Mark

Design

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.

Jason Li
Basic Information
Name Jason Li
Age 20
Work E-Commerce Sophomore
Family Single
Location Beijing
Brands Zhihu, Quora, Evernote,36kr
Technology Geek / Mac / iPhone
Bio
Jason Li is an ambitious student. He wants to work in an IT company after graduation. So getting latest information and knowing more about IT industry becomes one of most important things to him.
There are several things he likes to do every day:
  1. 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.
  2. He reads the latest news about IT industry and saves the valuable content.
  3. He reads the blogs he subscribed like Adaptive Path, Beforweb to get more knowledge about UX design.
Recently he is reading an official document of a JS library. He wishes that there is a tool can help him record the position where he read last time, so next time he reads it, he may quickly find out where to start.
Need
  1. To make highlights, notes, save the valuable content.
  2. To show the highlights and notes made last time when reading the same article.
  3. To review the highlights, notes and articles easily through the mobile application.
Frustrations
  1. Jason is an Evernote fan. But Evernote can not make highlight or note to a specific sentence or paragraph.
  2. When using Evernote extension to save an article, it is too slow.
  3. 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.

Projects

Mark

A better way to manage your knowledge and share with others

Design

Draft

When new tab page becomes the place to make draft

Design & Development

ZUI Days

Help countdown the days that matter to you

Design