Project Background
Typing with keyboard to write something seems really normal to users nowadays, and the traditional writing tools like pencil is now fading from users’ daily life and memory. But there’re some scenario that people need to sketch or just write as on paper. With technology growing we could now use our fingers to draw and sketch on device if needed. However it’s not workable and not in a good experience sometimes, and we could also input by note or sketch apps on any device.
However we wanted to bring Nature User Interaction to our users. A better interaction and user experience combining Yoga tablet with Lenote – a note app as a family member preassembled in Lenovo Vibe Rom.
Project Objective
The objective was to find a nature interaction between software and stylus to help people write and sketch. A better solution with stylus that could perfectly combine software(Lenote) and hardware(Yoga Tablet). Make a better software&industry experience for nature human writing behaviour on modern device.
This project lasted around 1o month.
My Role & Team
I am the advisory researcher in Lenovo Corporate Research & Development. I was responsible for the experience on the Lenote app and Lepen stylus. I worked with user researcher, industry designer, product managers, engineers and countless teams within Lenovo. I led the research and design for Lenote and it’s mate Lepen stylus.
Deliverables
• Research (Analysis)
• Strategy (Persona/Scenario/User Journey)
•Design (Sketching/Wireframe/Rapid prototyping/Mockup/Specification/Redlines)
Tools
Photoshop, Sketch, Axure, Office Suit, Framer, AfferEffects
Lepen is a incubator project supporting Yoga Tablet which aims to write with pen on tablet instead of writing on paper. Lenovo used to do hardware, and now we want stand at a new angle that exploring more value in how to combine hardware interaction with a software. Lepen was born as the mate of Lenote. Lenote is developed as a note&paint app in Lenovo Vibe Rom.
1. A good user experience works between the lenote app and stylus running on Yoga tablet
2. An industry nice design of stylus
We had a released note app for tablet, stylus technology support and Yoga tablet device. But the problems from research findings that I was trying to focus were:
• The current note app input solution on tablet can not satisfy each users.
• Typing directly on a tablet screen, writing or sketching with fingers on screen are nice for users, but the way it is displayed does not effectively work for users who really want to write something on tablet, but it may just taken as a bauble.
Strategy
1. Analysis of Current Lenote App’s Design, Flow And users Feedback
Conducted a survey with Lenote users and checked history feedbacks of Lenote App.
Mapped out an diagram for the current Lenote app features and looked for opportunities for flow improvement.
2. Exploratory on Stylus in Market
Participated and checked the research by UX team and technology support team, analysised comparative stylus on market. Aimed to improve the writing experience to create satisfying interactions between Lenote app on Yoga tablet and stylus.
3. Brain Storming
We shared ideas, talked about how people note in traditional way.
4. Persona
Checked the survey from UX team considering from these perspective:
• Annual spent on 3C product
• Attitude toward tablet
• Tablet purchase considerations
• How often they use note app
• Life attitude
• Motivation on taking note
• Demographic & Characteristics
We had these personas:
5. Scenario
6. User Journey
Discovery
The gaps or improvements point that we found from research are:
• Users do expect more natured interaction with software or hardware. “I feel there’s an emotion contact when writing with pen on paper if I want to write a book. ”
• People feel more comfortable using a pen writing on tablet than finger, especially when they need to write down a lot of information.
• Typing on tablet is bad experience than typing on laptop in a writing scenario. “I looks odd when I’m typing by my fingers rapidly on a tablet.” “The available writing area is cut to half by keyboard…”
• Typing in document or note app could not simulate the traditional paper writing , painting experience… “When I was writing in XXX app, I could not freely sketch around the text or make any marks next to it.”
Thoughts
Something I thought about before we started with design,
1. Why we use layer?
Put everything on the “Layer”. During writing, people are used to write anywhere they want on paper. People also could write over above the words they just wrote down on paper again and again (Although it messed up the paper, that’s the Special about paper). A layer will help to simulate this scenario. When writing on the YOGA screen, Lenote layers will be generated as users clicked on different area. Layers could be overlapped, edit, moved and deleted. Then users could write anywhere they want on a tablet as they were used to write on paper, and at mean while users could delete, move edit which they couldn’t easily accomplish on paper.
2. How to present the note list and content? 2 Column or 1? Snippet List or Card or Masonry?
We hope users could clearly know from listed notes and find the note they want fast. The note list is the first impression that bond users and the notes. So we want to focus on the presentation of note content and bring an environment that engaging users.
Column:
2 Column
• Advantage: friendly to management notes, and this layout are much easier to navigation and switch from notes.
• Disadvantage: Cut down the area for note content; limited the note list area.
1 Column
• Advantage: maximize the note list, show more notes on screen.
• Disadvantage: cut down the area for note content; limited the note list area.
Card & Snippet List & Masonry:
Card:
• Advantage: simulate the image of “paper” or a “page” in a notebook; show more notes on one screen.
• Disadvantage: present less note content as summary in each card.
Snippet List:
• Advantage: present more note content as summary in each snippet.
• Disadvantage: “code” like, just looks like any table list; show less notes on one screen.
Masonry
• Advantage: present more note content as summary in each note’s box; simulate the image of “paper” or a “page” in a notebook; show more notes on one screen.
• Disadvantage: users’ sight will have to jump from one to another since the information in masonry layout is not in order. It’s not a good experience for users with mixed information in each note, it’s better to be used for photo presentation.
Considering those above and the size of tablet screen, we decided to go with the card layout of 1 column. The cards lays in order so that users won’t feel tired on browsing their notes, and it balances the amount of notes we wanted to show on the screen and the information we wanted to presented to users.
Design
1. Sketch
The following are app & stylus sketches. The screen focused on stimulate the traditional note flow, so that users feel it’s natural to write with Lepen in Lenote. For the pen we had several concepts focused on the distinct apperance and Ergonomic.
2. Wireframes
Online: http://au1o1t.axshare.com
Created wireframes of the note app and interactions with stylus that users could input from keyboard or by using stylus. And the “Red Point Layer” is designed to help users to move, edit, and sketch on the notes anywhere they want.
3. Visual Mockup
I designed the interface based on Lenovo’s guidelines and I used Lenovo color so that it consisted and enhanced the brand identity. Tried to delivery a clean and light interface to make users feel relax and easy to use.
4. Specification
Based on the Lenovo design guideline, I made the design specification for this app.
5. Animation
Some animation that I made with AE, Briefs and Origami. And I make a video for some concept introduction.
Manage a layer
Syncing
6. Concept Design for Lepen Stylus
Except those above, there are also some memorable or tough issues.
1. How to switch input between stylus writing and keyboard?
Considering our research that typing on tablet or mobile is slow and unfriendly to users, I decided to make handwriting with stylus as default input mode. Once users write with stylus, the mode will change to Writing Mode, and by long press on input area, it will change to Typing Mode. And users could click a button on navigation bar to switch input mode.
2. How to simulate the experience like painting or writing on real paper?
There’s no fixed lines or format in canvas. Users could paint, write with stylus and type by keyboard anywhere in the note canvas as a start.
3. How to be more smart?
a. Put everything on the “Layer”. In Writing Mode, a layer will be generated after 3.5s from the moment that users stop painting or writing on screen. In Typing Mode, layers will be generated as users clicked on different area but overlapping area. Layers could be overlapped, edit, moved and deleted.
b. Capture linguistic voice and turn it to text. We collaborated with Unisound (http://www.unisound.com) on the Voice Recognization technology Audio to Text technology. User could turn on the record and have a cup of tea… Then the linguistic voice will be converted to editable text on a new layer. And the audio was also kept in the layer with those text. User could play the audio, edit, remove, move the text.
1. Design experience cross hardware and software. Collaborated with YOGA tablet team on testing and conceive stylus and Note APP.
2. Software design could be leveled up when considering hardware interaction. Usually we design apps, software serves for apps. But I’s necessary to rethink how hardware serves for software.
3. Get to know how the stylus woks and experience participate in designing the conceptual industry appearance.
