A web app and extension for effortless article highlighting and saving
Markup is a tool that empowers users to highlight their favorite articles and save them to personal lists. This project focuses on redesigning Markup's web app and browser extension with the goal of expanding the user base and boosting user adoption and engagement.
UX/UI Designer
(Sole Designer)
Product Manager
Developers
Data Analyst
Marketing
7 months
KDAN
Markup aims to enhance users' reading experience by providing them with an easy-to-use tool. However, the previous design did not effectively meet their needs, such as providing an intuitive and user-friendly navigation.
These are the factors may have caused the problem:
Additionally, we suspect that an inconsistent brand identity may also have negatively impacted the product's promotion.
The redesigned Markup tool now offers a seamless and effortless experience for users when it comes to highlighting and saving their favorite articles. It provides smooth navigation and an intuitive interface, enhancing the overall user experience.
Markup's new web app offers users an intuitive experience for saving and highlighting articles, with its simple and well-structured layout. Users can effortlessly find and read articles through a hierarchical structure and easy-to-read information layout.
The redesigned Markup browser extension offers an easy-to-use experience, allowing users to easily highlight and save their favorite articles while reading online. These articles are stored in their personal list, and users can effortlessly access the web app through the panel to locate them.
The user base of the browser extension increased by an impressive 27% within just one month.
The user base of the web app saw a notable 13% increase within just one month.
The new browser extension has been recognized with the Featured badge on the Chrome Web Store.
During the beginning stage of redesigning, Hallway Usability Tests were conducted internally among 4-5 staffs who were not participle in product development, using the old design to gather quick feedback and identify areas of confusion.
Several issues were identified:
To address the issues we discovered, I thoughtfully defined our design goals:
To create a clear hierarchical structure that simplifies user navigation and makes it effortless to locate information.
To place related elements in close proximity, enabling users to easily identify and understand information groupings
To ensured a consistent brand identity throughout the Markup tool, reinforcing its recognition and trustworthiness.
To ensure a quick validation of the issues we had identified, a rapid design update was implemented to vet out early assumption. We made a few key changes and our decision was based on the findings from our audit. We focused on adjusting the structure, information layout, and interface design of the browser extension in this launch.
About 3-4 months after launching the update, we collected user feedback through customer support interactions and reviews. To our surprise, some of our assumptions didn't match the actual user feedback we received.
For instance, the changes we made to the design had unintended negative impacts on the online reader's experience, and some aspects of how we presented information were not easily comprehensible to users.
During the beta launch of browser extension, we identified a need to reorganize the information architecture of the old web app. Subsequently, the Product Manager and I collaborated on revamping the categorization and classification of information, grouping it based on primary user scenarios.
For instance, in the previous design, platform-recommended content was intermingled with user-generated content, leading to user confusion. In the new design, we have separated them into the 'explore page' and 'my personal page,' resulting in a more user-friendly and organized layout.
The primary deliverable at this stage is the enhanced information architecture. Additionally, I have color-coded the information to ensure that the entire team is aligned with the actual improvements.
By implementing the new information architecture, we have effectively prioritized and highlighted specific features for easy discovery and use. Also, we have expanded user scenarios to enrich the online reading experience. This enhancement has had a positive impact on the online reading experience and user engagement.
At the ideation stage, I came up with multiple ideas to search for possible design solutions.
These are the approaches I experimented during the process:
In the new design, I've labeled the main menu features with text and introduced a hierarchical structure. This ensures that users can easily navigate between pages, minimizing any potential confusion and preventing information overload. Furthermore, users can effortlessly access the web app and locate their saved articles.
I've established a design system to promote design unity, encourage collaboration among designers, developers, and stakeholders, and enhance efficiency for future iterations.
In the Markup web app, the Explore page is designed to aggregate articles from various websites and categorize them, making it easier for online readers to find articles of interest. However, during the development process, our engineers discovered that displaying article content on the article preview cards would significantly slow down the web app's loading time. Implementing this design would require additional time for technical research, potentially affecting the product's release timeline. As a result, I had to make a compromise between loading performance and the ideal design.
After discussing with the Product Manager and engineers, we decided to deprioritize the feature of displaying article content, so the initial version of the article card design would not include 'article content previews.' While this design wasn't ideal, it ensured that we could meet the product release schedule.
We've created a structured visual layout for saved articles, ensuring they are displayed clearly and are easy to locate.
We've refined highlight colors to maintain visual balance. Additionally, an instructional prompt appears when the list is empty, guiding users to create their first annotation.
Introducing the 'Annotation Note' feature enhances the annotating experience, allowing users to effortlessly save their thoughts and ideas.
Testing Is Crucial in Product Development
While we couldn't conduct user testing before the initial launch due to time constraints, our quick launch revealed potential issues that could have negatively affected the product. From this experience, I've learned that testing plays a vital role in the product development process to ensure a solution aligns with user needs and expectations.