Project Background
This is a time that information exploring. It’s predictable that we can not only rely human brain to absorb and remember everything. And at meanwhile, electronic document is replacing the traditional way to save information, like people today are getting used to write with office document apps. And today it’s a time not only PC is the device but also our smart phones, so this brings new market – cross platform note application.
“There is a need , there will be a market .”
Project Objective
The objective was to build the desktop client for Mac OS and major Windows system to complete the cloud sync circle. So that users can save, create, manage and browsing notes including photo, text, sound on any of their device. Data could be synced cross platform with “Cloud”.
My Role & Team
As the lead UX designer on this project, I worked with PM, researcher and developers.
Deliverables
• Research of Text Editor
• Design (Wireframe/Mockup/Specification/Redlines)
Tools
Photoshop, Illustrator, Axure, Office Suit, After Effects
MKNote(www.mknote.com) is the first cross platform personal cloud notebook in
China market. It is available virtually everywhere, including phones(iOS/Android), desktop(Windows, Mac), website and chrome plugin. Users can create notes, record sounds, save photos, capture inspiration, and share ideas all from within MKNote. Notes are constantly syncing so that if you captured something on desktop, notes will also be available on your phone or other device, and vice versa.
Research of Text Editor
Goal
Find out the key editor features that users need.
Method
• User Interview & Card Sorting
• Competitive Analysis: 印象笔记(Ever Note)、有道云笔记、为知 Wiz Note
Sample
Tester 30，Interview 6
Process
Competitive Editor Analysis
Not like the mobile platform, people have different habit and focus on desktop client: Users need to create and manage complex information, such as writing an index for a book. In that case, text editor is one of the core features on desktop client. We want to know what features that users would like to use most when use note apps.
I made cards and script with our researcher. We tested with 30 users asking them to pick out the cards of text editor features. And we interview with 6 users. Asked questions about how they use text editor and their feature choices under some conditions. Such as:
What are your favorite font size, font family?
What will you do with typographic?
How do you add an image to note content?
How do you emphasize words?
….
Overall Results
1. Select All (ctrl + A), screenshot (ctrl + alt + A), the majority shortcuts of users have been accustomed to using to achieve editing.
2. Format Brush, Undo and Redo are the most effectively functions for users.
3. Insert and edit picture are the functions associated with the picture, users generally place more emphasis. They hope the picture of the note willb be simple to edit, crop and mark (circle, line drawing, writing)
4. Insert attachments, users often need to save some attachments.
5. Insert a link, users generally copy and paste links.
6. Word count and create time of note, users do need them sometimes, and they want them to be automatically generated.
Password, they thinks it’s not a must but a plus of note.
Window(XP/7) Desktop
For desktop, I focused on capturing, creating and management experience.
• Download Software: http://note.sdo.com/download
• Wireframe: http://aiy2j1.axshare.com
• Visual Mockup:
Windows 8 Metro Design ( Intel Ultrabook Collaboration Project)
The design was based on native Windows 8 style and experience, and designed a ¼ screen display snap view for fast record.
• Download Software in Windows Store:
• Wireframe:
• Visual Mockup:
Mac OS App Skeuomorph Style Design
The design was based on native Windows 8 style and experience, and designed a ¼ screen display snap view for fast record.
• Download Software in App in Apple Store:
• Wireframe:
I designed the main view in 3 column, and it could be switched from 3 to 2 column, so that it won’t take a lot of space on screen. And also designed a widget for fast launch.
Online Wireframe: http://k0agan.axshare.com
• Visual Mockup:
The idea was to create the atmosphere for reading and writng.
Login & Register
2 Column Main Hub
Independent Tab
Main Hub
Widget
Account
