View
More

HANNspree | HannsNote2

HannsNote2, Revolutionising Digital Note-Taking and E-Reading Experiences. Winning the 2024 German iF Design Award.

Duration:

1 year 7 months

Client:

HannStar Display Corp.

My Role:

Product designer

Team Members:

1 Project Manager, Product design team, Development team

Contribution:

User research, wireframing, UI design, prototyping

About the Project

HannsNote2 is a next-generation digital notebook and e-reader that combines intuitive design with cutting-edge functionality. As the lead designer, I enhanced user workflows, created seamless navigation, and developed features that earned the 2024 iF Design Award.

Project Details

The purpose of this project was to develop HannsNote2, our advanced digital notebook, enhancing the writing experience with paper display technology and eco-friendly design.

Prior to HannsNote2, we had already launched HannsNote1. Based on users' feedback from version 1, we aimed to upgrade our product and expand our market to reach more users.

Our goal is to improve the product to enhance user satisfaction, add more features, and utilise cutting-edge Paper Display technology, allowing users to enjoy reading and writing anywhere while expanding our target audience.

Design Process

User Research

First, I asked the PM for HannsNote1’s sales performance and user feedback. From over 1,000 responses, I identified key areas for improvement, categorised into software-related aspects (including UI/UX and file format) and hardware aspects (such as accessories). This analysis guided our team in designing HannsNote2 to better meet user needs.

Additionally, I conducted interviews with more than 30 individuals, including both electronic notebook users and those still using traditional paper. This helped identify pain points, usage habits, and the most popular brands, providing valuable insights for future competitive analysis and product positioning.

Insights

💡 Interviews with target users revealed a strong preference for intuitive categorisation and one-touch search features. This insight guided the design of an innovative, context-aware navigation system.

Who is the competitor?

I analysed five leading smart notebooks and e-readers on the market, focusing on user flows, distinct functionalities, and hardware comparisons. Through this competitor analysis, I defined our core service values and identified opportunities for our product, which aims to provide a smooth writing experience (with colour and note style options), comfortable reading, and easy portability. Additionally, I outlined product opportunities to guide future functional development.

💡 Our opportunities showcase the product's versatility through multilingual support, diverse sales channels, customisable templates, and lightweight, colourful design options.

Customer Segmentation

Persona

Feature Development

Function Flow & Wireframe


The Challenge

Tags Feature

After defining our key features, we worked intensively with develop team on feasibility. The biggest hurdle was handwriting recognition for keyword searches, which proved unworkable due to technical limitations. We adapted by adding a tag-based search, later extending it to calendar entries.

Full Colour Display

Initially, we didn’t realise that for full reflectivity screens, colour clarity requires direct sunlight or bright lighting. After testing with our engineers and PM, we found that using high-contrast colours was essential. We then switched to a high-contrast palette to ensure accurate colour display.

Prototype and Testing

After confirming feature feasibility with engineers, I created wireframes and a lo-fi prototype to test user flows efficiently. I designed seven tasks to identify user challenges and collected feedback from 11 participants across five testing rounds. Task completion time improved by 30%, enhancing user satisfaction.

Before and After

Homepage

The addition of notes in the top left corner is not prominent enough. After discussion, it's clear that the addition of notes isn't sufficiently noticeable; it should be visible at first glance.

Icons

The tag icon is not understandable. The sidebar menu on the note page should be consistent with the homepage menu and display icon names.

Notifications

Placing it at the bottom makes it easy for testers to overlook; thus, it should be moved upwards.

During the testing process, apart from recording each test session, we also conduct post-test interviews with the participants. When organising the areas that need modification, if engineering input is required, we discuss it with the engineers while considering feasibility. Additionally, if there is a singular blocking issue, we rely on subsequent user testing to assess whether corrections are needed.

User Interface Design

We designed the user interface with vibrant, high-contrast colours to ensure readability and improve the writing experience, tailored for Paper Display technology.

Icons were user-tested for clarity and supplemented with text for easy navigation. To streamline development, we established a comprehensive design system, allowing engineers to efficiently access and use design components from the asset library, promoting a smooth workflow.

Amazing feedback

After we launched our product, we won the 2024 German iF Design Award and partnered with Taiwan's biggest telecom company, Chunghwa Telecom, to target 10,000 unit sales in Taiwan, with plans to expand to Europe and Japan!

More Details