Overview
In the era of information explosion, it's becoming more and more difficult to find valuable information and manage them in the way we want. Mark is a wonderful place to find valuable information other users share and also a great tool to make highlights and notes on the articles and sync throughout all the users' devices.
Every day, I read a lot of long articles, blogs, books using the browser. So many times, I need to highlight, note and save valuable sentences or paragraphs, but there is no tool which can meet my expectation.
Kindle and Medium inspired me. When reading books and articles, I can always easily highlight, note and share the important contents. So next time I read the same book or article, all the highlights and notes I took last time show up.
I came up with a solution which is to use browser extension to highlight, note, sync and use a mobile application to read the marked contents.
The Problem
After market research and competitors analysis I found that there are few similar products which provide the same function, but they either doesn't offer some important features or offer too complex solutions.
My idea is very simple:
1. Design a simple browser extension to let users mark content.
2. Let users read their marked content and valuable content shared by other users.
The Challenge
This is my first time to design such a complex application from 0. I was involved into the process from the very beginning to the end all by myself.
Research
I downloaded and tried all the competitor products including Evernote, Diigo, Pocket, Raindrop, Linter... I got a lot of inspiration from them. On the other hand, the market research and competitors analysis helped me make the priorities to differentiate Mark from other product.
Persona Development
In order to test my idea and hypotheses, I made an Ad-Hoc Persona which will help understand the possible scenarios.
| Name | Jason Li |
| Age | 20 |
| Work | E-Commerce Sophomore |
| Family | Single |
| Location | Beijing |
| Brands | Zhihu, Quora, Evernote,36kr |
| Technology | Geek / Mac / iPhone |
There are several things he likes to do every day:
- Read the news of the people with different background to broaden his view on Zhihu and Quora. He likes to save valuable answers to Evernote.
- He reads the latest news about IT industry and saves the valuable content.
- He reads the blogs he subscribed like Adaptive Path, Beforweb to get more knowledge about UX design.
- To make highlights, notes, save the valuable content.
- To show the highlights and notes made last time when reading the same article.
- To review the highlights, notes and articles easily through the mobile application.
- Jason is an Evernote fan. But Evernote can not make highlight or note to a specific sentence or paragraph.
- When using Evernote extension to save an article, it is too slow.
- After saving an article using Evernote, he seldom reads again.
Wireframe
I started with some quick sketches on the paper and outlined the main structure of the app. Then I moved to Sketch creating wireframes of Mark.
Chrome Extension
Mobile Application
Hi-Fi Mockups
Next step was to make the details of each screen, develop visual aesthetics and generate hi-fi mockups for each flows.
Chrome Extension
Mobile Application
Prototype
I used Marvel to show more detail about how it interacts with users.