Read for Love

Sep 2020 - Dec 2020

As networks keep evolving, more and more people are addicted to mobile phone apps such as TikTok, Instagram, Twitter, etc. We can barely see people reading books in the subway or in coffee shops. Also, I find it’s difficult to concentrate on reading e-books on cell phones because of those news notifications. The emergence of e-book apps is definitely good for people who love to read, it’s more convenient to find books we want and we can read anytime, anywhere. But still, most people prefer tweets or posting photos on Instagram rather than reading a book. Would people read more books if the books they read would be turned into donations to poor children?

Problem

Encourage people to read more. Combine reading and charity. Establish a community people can read books with friends and share thoughts.

Solution

Design an app that can help users build a reading habit while doing something good for society.

ROLE

Product Designer

Tools

Figma, Adobe XD, Photoshop, Illustrator

understanding

User Interview

Target users

Age: 20-40
Have reading habits
Want to do charity

Learning goals

People’s reading behaviors
People’s attitude about online charity
People’s attitude about focus apps

What do users day?

“I have used Ant Forest for like three years. I really like this function at first, because I thought I contribute to environmental protection. But since I can’t see the tree I planted, I didn’t see the follow-up report and feedback, which made me feel unreal .”
“Sometimes, I have trouble to find e-books online and because I don’t have much time to go to bookstores, I really need an e-book app that has abundant book resources .”
“I know there are a lot of fake donation platform out there, I hope charities to be open and transparent.”
Interview findings
Most people are willing to do charity, but they are concerned that the platform is falsified. They want the platform to be transparent enough. For reading, they care about concentration experience and book resources.
Personas
Competitive Analysis

How?

Design an app that can help users build a reading habit while doing something good for society.

ideation

User Task flow
Task 01

As A Reader, I Want To Block ‘Facebook’ For 30 Minutes When I Am Reading So That I Won’t Be Disturbed.

Task 02

As An Environmentalist, I Want To Donate 20% Of My Membership Fee To Environmental Protection.

Task 03

As A Teacher, I Want To Find A Textbook Named ‘About Face 4’.

Wireframes

Brand design

logo design

Inspiration

Final Logo

Design system

retrospection

What did i learn...
It was an unforgettable experience to design a product from end to end. I would conduct usability testing to evaluate my designs if I had more time. Then, make an iteration based on the testing sights.

Read for Love

Sep 2020 - Dec 2020

Knowledge Planet was a knowledge-sharing platform launched in 2017. The user base grew fast in the first few years, and now it has over thirty million users. There are two types of users: Community Host and Subscriber. The community hosts are industry experts who usually create quality content, host activities, and provide advice. The subscribers join in seeking guidance and sharing thoughts with people. Since 2020, page Community and page Moments have been facing a declined user retention rate.

Problem

Subscribers need a way to quickly and easily connect and share thoughts with others so they can improve themselves. But currently, they feel hard to find the information they want.

Solution

Improve the discoverability, efficiency, and scannability to provide a more delightful and accessible experience.

ROLE

Product Designer
- Conducted user research and user testing.
- Came up with solutions based on research findings.
- Created wireframes, clickable prototypes, and design specifications

Team

1 Product Manager
2 Main Engineers
1 Product Designer

Design comparison

Design preview

Community

Before

After

Moments

Before

After

introduction

What are Community and Moments?

Community

Community is where subscribers can communicate about shared interests with people, read and publish posts, etc.

Community has two core features: Questions and Activity. Subscribers can ask questions and join the activities during the membership period. Community hosts usually answer these questions within 24 hours.

Moments

Moments is the constantly updating list of posts. Moments includes status updates, photos, videos, and links from people and communities that subscribers follow on Knowledge Planet.

understanding

User Interview
To figure out the root cause of the low user engagement, I need to learn about user requirements and pain points. I conducted a user interview with 15 users, including 5 existing users and 10 old users. I got some interesting findings.

To get a better sense of users' everyday experiences, I asked the following question:
How do you feel about the Knowledge Planet? Are you satisfied with current design?
“I want to read posts from the people I followed but it’s impossible! There are too many posts every day and they are only sorted by time. And posts on Moments are simplified, so I regard Moments as a preview or notification page.”
“It’s really annoying that there is no way to collapse or filter the comments from the people I’m not interested in.”
“I know members can ask questions, but I didn't find out how to do it. I only participated in the challenges once or twice, but I need to click the challenges button to check out the new challenges, I think it’s inconvenient.”
Interview findings

Low discoverability

Ask questions and join activities are subscribers' benefits during the membership period. However, subscribers have trouble finding the Questions button, and they hardly join activities, which leads to shallow user engagement.

Low efficiency

The post layout is quite simple and makes the Moments like a preview page. The posts are only sorted by time, but reading the following users' posts is highly required.

Poor scannability

Most people scan instead of reading because they want to quickly find the content they need. However, most posts on Community were too long, and its comments can't be collapsed. Subscribers often lose patience with long posts.
Persona
How might we improve the discoverability of the features users want?
How might we provide a more delightful reading experience?
How might we provide an efficient information aquisition experience?

ideation

Brainstorm & Medium fidelity wireframes
Community exploration
Improving discoverability

Reposition the Questions button to a more prominent area.

Users won't intentionally look for new stuff. Therefore We should improve the discoverability of these exciting features. The Questions is one of the vital components, and its Call-to-Action button for sure deserves prominent areas.
Improving scannability

Redesign the layout of posts to improve scannability

Post titles provide critical points of each post; Up to three lines of text preview and collapsed comment list saved screen spaces.
Moments exploration
Improving scannability

New layout for posts to keep consistency

01. Unified post layout on Community and Moments enhanced the visual consistency.
02. Shortcuts on Moments provide a convenient way to enter communities.

user testing

What i want to learn?

Learning goals

01. Evaluate the usability of new Questions and Activity cards
02. Evaluate the discoverability of Questions and Activity
03. Evaluate the satisfaction of reading and info acquisition experiences

Tasks

01. Check the new activities, accept a challenge and write a check-in post
02. Ask a question in the community
03. Find your favorite community host's latest post and save it to your collection
Task success rate
insights

Activity button lack of usability

Activity cards on Moments remind subscribers of new activities and allow them to participate in activities more conveniently. Task 1 had an 80% success rate, and all the new users tried to check the new activities on the Moments page. Subscribers still need to click activity buttons to check all activities, but almost all new users overlook activity buttons.

Iteration

Activity button improvement
Improving discoverability

Providing visual feedback

Use colors to indicate that there are exciting activities for them. The button color will turn grey after subscribers have checked the activities.

design

activity card exploration
option A

Clean and easy to read

Challenges card

Assignments card

option B

Inviting colors and easy to be noticed by users

Challenges card

Assignments card

preference test

what are Subscribers care about the most?
The test showed that 62.5% of users preferred option B because the colors were more intriguing. However, 3.6% of users didn’t like both of them.

final design

prominent call-to-action

Questions before

- Cluttered background
- Lack of contrast in text color
- Disappear while scrolling

Questions after

- Clear background
- High contrast in text color
- Fix position while scrolling
Check the New Activities at A Glance
Prototype

Check the new assignments and publish an assignment post

New activity buttons have a highly discoverable interface. Users can know if there are new activities by button colors.
Inviting Interface & Seamless Experience
Prototype

Accept a challenge and check in for the first day

Subscribers can participate in activities while browsing Moments. New activity user flow is much easier and seamless.
A more efficient way to filter out the content users want
Prototype

Find a post from the following user and save it to the collection

Let users select what to read
Prototype

Add an interested category to the filter bar

A customizable filter will help users filter out what they want efficiently. With tons of content, a search function is essential for a fast and straightforward experience for finding content.

design impact

Ratings on the Apple app store increased from 3.5 to 4.9

design system

retrospection

What did i learn...
I learned a great deal about the importance of discoverability and scannability. It’s meaningless to have a well-designed feature if users cannot even discover it. For content-heavy applications, making the content clear and scannable is vital. With limited screen space and constantly changing content, it’s essential to create scannable content so that messages can be delivered more efficiently. Besides, providing an easier way to filter out the content can improve user satisfaction to a great extent. In turn, users will be more likely to remain and engage with the app.

Read for Love

Sep 2020 - Dec 2020

Dragon Baby Seafood is an online seafood grocery store based in San Francisco. At first, their target customer group was only nearby Chinese, customers usually just placed orders through WeChat groups. In 2020, as the user base grew, Dragon Baby launched their app and website for customers to purchase and track orders more efficiently and conveniently.

Problem

Now, Dragon Baby has been expanding its customer groups and delivery areas. At the same time, however, users reported more issues with the purchasing process.

Solution

Redesigned the user purchasing process and optimized main features to create a frictionless and efficient interaction.

ROLE

Product Designer
- Helped with usability studies.
- Collected study insights, and brainstormed for possible solutions.
- Created wireframes and clickable prototypes.

team

4 Product Designers

Prototypes

Design preview

Sign In / Sign Up

Auto Location

Announcement Popup Window

Browse

Back in Stock Notifications

Product Page

Shopping cart Page

check out Page

usability testing

usability testing setup
We all know that the check-out process is one of the essential parts of online shopping. Thus our first learning goal was to evaluate the current check-out process. Then another component we were looking into is the navigation and search function. How can customers complete other tasks if they can't find the products? Therefore, the second learning goal was to obverse customers' browsing behaviors.

Tasks

01. Browse the app and add the products you like to the shopping cart.
02. Place the order after completing task 1.
03. Purchase one pack of Fresh Clams and two packs of Codfish.
Findings & Recommendations
Findings

01. Hard to see the critical information

01. Users need to read the announcement because it has a lot of critical information, such as how to place orders, where to pick up seafood, when the deadline is, etc. However, the link seems unclickable.

02. Users felt confused about no free-shipping offers or billing information on the shopping cart page.

03. Some products' descriptions are outside of the screen on the product information page.

04. Freshness is the most significant advantage of Dragon Baby compared to other similar products. But those seafood images with dark overlay look unattractive and make it hard for users to believe they're freshly caught.
Recommendation
01. Display the critical information in a more prominent position
02. Use clean and attractive product images
03. Provide discounts, free shipping information on the cart page
04. Inform users of other fees, including tax, service fees, and tips
Findings

02. Hard to find the products

The app lacks search functionality, while many users often rely on searching to find the product they're looking for. Although it has different categories options on the home page, they share the same layout and look exactly like other products. More than half interviewees ignored these category options.

Recommendation

01. Incorporate a search on the homepage
02. Relayout the homepage, separate categories and products
Findings

03. Missing error prevention

01. Currently, Dragon Baby only provides delivery service in San Francisco, but users living outside San Francisco can also place an order successfully with no warnings.

02. Users felt unreliable because there was no error alert when entering the wrong information.

Recommendation

01. Provide an error alert when users enter the wrong information
02. Autofill the address
03. Locate the user's address before purchasing

ideation

Optimizing customer purchase experience
A few users reported that it's highly frustrating when there is no warning at all when they are outside the delivery area. To avoid that, we proposed a brand new onboarding process to encourage users to log in before browsing so that they'll be notified when their addresses are not deliverable. The latest user flow has less friction, and customers will achieve their goals quickly and easily.

The previous customer user flow

The new customer user flow

Taks flow wireframing

Onboarding experience

Add products to the cart

Check out process

final design

Frictionless interaction & seamless buying process

Onboarding experience

Add products to the cart

Check out process

Prototypes
Based on the recommendations from the usability study and the optimized customer purchasing process, we focused on improving the onboarding experience, product searching, and check-out pages.

Sign In / Sign Up

Dragon Baby primarily uses WeChat to communicate with customers, so we added a log-in with the WeChat option on the sign-in and sign-up pages to make customer service more accessible.

Auto Location

After customers log in, the app will ask them to access their location and guide them to add the shipping address. Even if users' addresses are not deliverable, they can still enter the homepage and browse products.

Announcement Popup Window

The Announcement is essential to read before purchasing, so we made it a popup window that appears when customers first log in. It can also be found on the contact page now.

Browse

Customers can easily find products with the search bar or switch categories.

Back in Stock Notifications

Add a subscribing option for users to get notified when the wanted product is restocked to avoid customers leaving the app immediately.

Product Page

We added a shortcut to the cart, and a save feature so that customers don’t have to go back to the home page to find the cart button.

Shopping cart Page

We changed the default selection of all products to a flexible selection and added recommendations, purchase history, and free-shipping reminders.

check out Page

There were not many changes on Check out page except an error alert for the invalid information.

retrospection

What did i learn...
After working on this project, I realized that a smooth user flow and good navigation are essential to e-commerce platforms. Support typos and error alerts can gain more trust from customers. Make sure the search is functional and easily accessible to all customers, then the customers will be able to achieve their goals quickly and with ease.

It's necessary to provide helpful notifications when we cannot meet the customer's needs, such as the products being out of stock or the orders cannot be delivered. A warm and sincere welcome not only gives a sense of caring and makes customers feel appreciated, but also helps sustain customer interest by creating an expectation. All in all, a good user experience needs all elements working in unison.

Read for Love

Sep 2020 - Dec 2020

GM Renaissance was a project that I participated in during my Product Design Internship at General Motors. It consists of designers from multi-disciplines with an absolute passion for designing concept cars, architectures, UI/UX, and life experiences for the future.

Team

Shixiong Du - Graphic Designer
Rex Cong - Graphic Designer
Yunlei Shen - Product Designer
Mark O’Dell - Advertising Designer
Krithika Sengottaiyan - Fashion Designer

Tool

Webflow, Figma, Conceptboard, Slack

FINAL screens

Design preview

overview

my contributions
We got five teams in this project: Team Ethos, Team Axon, Team Wanderer, Team Durant City, and Team Halioi. Ethos was the global team responsible for concept research, branding, CMF design, advertising, and web design, while others were the individual design teams. I was the UX researcher and web designer on the Ethos team and mainly focused on multi-sensory research and the final website development.

multi-sensory research

What will our life experiences be like in 2039?
In reality, most of our daily experiences are multi-sensory. The internet connects people virtually, and the pandemic completely shifted people's work and life from the real world to the virtual world. In the future, people's life forms may include augmented reality, artificial intelligence, and long-term world-building projects. With many new technologies coming out, video, virtual reality, and augmented reality will be more accessible. These new technologies have emerged to bring a multi-sensory experience to combine the real and virtual worlds.
Multi-sensory

5 Senses

There are five basic human senses: touch, sight, hearing, smell, and taste. The sensing organs associated with each sense send information to the brain to help us understand and perceive the world around us.
Multi-sensory Experience exploration
(Images from unsplash & adobe stock)

Artificial

Conceptual light

Bioluminescence

Biomimicry

Moon phases

Multi-sensory guidelines for design teams
Combining my research and each team's design philosophy, we came up with four different multi-sensory guidelines.

Team Axon

Team Wanderer

Team Durant City

Team Halioi

Web design

site map
Before starting the design, I created a site map based on the works each team would present.
Style guide

Color Palette

(Credit to Shixiong Du and Rex Cong)

Project logo

(Credit to Rex Cong)

Team logo

FINAL screens

logo animation & home page
Team intro animation

retrospection

What did i learn...
It was a unique experience for me to design for the future. Thinking big and thinking about the future were challenging. At first, I was not familiar with multi-sensory design, and it was abstract and hard to express.   As I started to communicate with people, I found that abstract concepts became tangible, and the research process became more enjoyable. It was the most memorable part of the project.

Working with multidisciplinary designers with different cultural backgrounds was an incredible opportunity for me to understand the importance of communication. As the web designer, my job was not only to design the website but also to understand other teams’ needs while meeting the requirements of General Motors. Communication, understanding, and punctuality were the keys to my success.

Read for Love

Sep 2020 - Dec 2020

Champagne Diner is Seattle’s dream restaurant, which is classic carefully balanced with modern. It doesn’t feel either retro or quite present-day; too spacious, too tasteful, calm, even. However, its logo looks slightly chintzy, and the website doesn’t match the store decoration. I decided to rebrand it and design an ordering system to provide a better experience for the customers.

PROBLEM

Although Champagne Diner has a dedicated interior decoration. its branding was poor. The logo looked chintzy, the website didn't match the decoration.

SOLUTION

Rebrand and design an ordering system to provide a better experience for the customers.

Role

Visual Design
Brand Design

Tool

Figma, Photoshop, Illustrator, InDesign

branding

Mission statements

Connect neighbors and create a convivial atmosphere by welcoming guests with fresh, handcrafted meals, quality champagne, a broad spectrum of libations, and friendly, familiar environments.

Moodboard
Logo exploration

Sketches

Logo variations

brand guidelines

The Logo

Logo Anatomy

Minimum size

Responsive logos

Clearspace

Logo animation

Brand colors

Typefaces

Iconography