Work
Information Architecture / User Research / Wireframe / Design System / UI Design / Testing
Timeline
August 2020 – Present
Tools
Figma
Create a multi-featured and easy-to-use app for the Chinese community in Canada
Team
This is a freelance project in which I’m the first and only designer, work closely with my client, who’s also the stakeholder, and the development team who are based in China.
Background
Most Chinese media and publishers in Canada still produce content in physical newspapers and magazines. There are only a few Chinese news mobile apps available and most of their user experience is not well designed.
My client wants to create an app for Canadian Chinese to read high-quality articles and content, and also can help them find useful information like local business reviews, school rankings, hiring information, coupons, discounts, and many more.
Challenges
- How to make an app, which has so many features, easy to use? How to guide users to find what they are looking for? How to make complications simple?
- The client is expecting to launch the app around spring 2021, the timeline is very tight for an app like this.
- CMS is another big problem. How to structure a CMS platform to give either admin or contributor a good user experience?
Colour
Most Chinese apps in China are vibrant when it comes to visuals. Chinese prefer orange, red, and yellow, orange stands for both energetic and friendly. Meanwhile not as aggressive as red, and as bright as yellow.
I also added complimentary colours to differentiate features and sections.
Typography
NotoSans is one of the most common fonts in Chinese typography. Chinese people are used to this font. Therefore I choose this font for better users reading experience.
Components
Vectors
Information Architecture
There are three major features in the Kankan app: Articles, Stores, and Discover.
Articles are pulled from reputable local media, content creators, and independent authors; Stores, a feature like Yelp, which contains different business’ information, reviews, and coupon; Discover includes upcoming events, jobs, school rankings, and more features (e.g. mortgage calculator, gas prices, lottery, and public transportation).
Each feature contains many details and lots of potential interactions. It becomes challenging to simplify user flow to many different features and build up a backend platform within limited time and budget.
Wireframe
For simplifying user flow and reducing complication, I try to keep only essential features on each section for phase 1. All features are independent to avoid interaction between different features.
Since I started, other than design, I spent a lot of time communicating with stakeholders to ensure their needs in the current phase and future phases. I also involved in the discussions with the development team to build up a basic structure for the backend that satisfies the needs of stakeholders.
UI Layouts
500+ hours / 200+ screens
The project is still ongoing, and ver 1.0 is planning to release in the spring of 2021.
The App can be downloaded below:
