Echo Blink

Echo Blink

An AI-powered voice assistant that incorporates Conversational UI, ML, and AR visual cues to bring immersive cooking instructions to people’s kitchen.

Timeline
May – Aug 2021 (3 months)
My Role (Individual)
Research, Graphic Design,
Interaction Design
Overview
This is a 3-month academic project sponsored by Koenig & Bauer. Koenig & Bauer challenged us to design a new banknote, considering the theme, transparent windows, usability, printing methods, security features, and a digital campaign through iterative designs.
Tools
Adobe Photoshop, Illustrator, After Effects, Figma, Keynote
Research, Graphic Design,

Echo Blink is a system that integrates the smart display with Alexa, Amazon Echo Show, and the smart camera, Blink Indoor. It tackles the core problems of learning a new dish, building a seamless connection between real-time cooking and recipes. It is aimed to simplify the culinary experience, help people build confidence, and relieve confusion.

To present vulnerability, beauty, and resilience of life.

Front

The Antarctic world

I focused on species that live exclusively on the Antarctic Continent. The front side features a South Pole semi-globe with a blue whale migration route on it, an emperor penguin, krill, and seagulls.

Back

The Arctic world

The back side design is similar to the front side, but features unique species on the Arctic Continent: a North Pole semi-globe with a blue whale migration route, a narwhal, microscopic algae, and polar bears.

K&B challenged us to explore the future of transparency, usability, and security in banknote design.

Usability & Inclusivity

Usability serves as the foundation of visual content design. I incorporated bold, large denomination numbers printed on raised ink and other tactile features for people with vision disabilities to identify the banknote. The denomination number can be easily seen even if the banknotes are stacked.

Transparency possibility

K&B encouraged students to brainstorm transparency possibilities. Windows help banknote designs to be eye-catching, difficult to counterfeit, and easy to recognize. The transparency diagram went through several design iterations and assisted me a lot in the printing experiment process.

Interactions between banknote sides

The semi-globes of the front and back can be connected to form an entire globe, adding an “Aha” moment to create engagement.

An AR app to authenticate banknotes & inform global warming impact.

Scan your banknote.
Get it verified!

K&B also encouraged each student to brainstorm a digital collaboration associated with the banknote design.
Get your bill verified. Simply hold your banknote under the camera, wait for it to be scanned, and check out if it’s a real bill!

Link between the past, present, and future.

After getting your banknote verified, a time-lapse of ice melting on the South or the North Pole will appear. You can easily use the slider to switch between years, then the sea ice amount would respond to your action.

Look, feel, tilt:
How security features help to authenticate.

UV Layers

The purpose of including the UV security feature in banknotes is to distinguish counterfeit from real bills. To give the user a better understanding of counterfeit detection and a more engaged exploration, I highlighted some elements including species and denomination.

 Process

My learnings

In the end

First time designing a banknote

It was my very first time designing a banknote solution. It required me to step out of my comfort zone and understand banknote techniques that seemed to be far away from me. Although the process of overcoming challenges is rocky, this sponsored studio helped me to enhance my design skills to the next level and broadened my skill sets.

More than delighting users

A previous thought of mine is that design is aimed to delight our users and build expected experiences. After a term of study in this sponsored class, it adds up to my outlook as a designer: design can also bring value to the business. Unique design lets the company stands out from competitors, contributes to a better user experience, and builds a strong brand image.

Echo Blink

Echo Blink

An AI-powered voice assistant that incorporates Conversational UI, ML, and AR visual cues to bring immersive cooking instructions to people’s kitchen.

Timeline
May – Aug 2021 (3 months)
Team
Worked with designers, engineers, PMs, QAs, and producers on Game of Thrones: Conquest.
My Role
Ideation, Research, Prototyping, UI Design, Marketing Design
Tools
Adobe XD, Illustrator, After Effects
Context

Worked on Game of Thrones: Conquest

In May 2021, I joined @WB Games remotely as a UI Design intern to work on their mobile game, Game of Thrones: Conquest. This is a role-playing strategy game based on the award-winning TV show, Game of Thrones.

My Responsibilities

Created usable experiences through visual interfaces

- Identified experience issues and enhanced the current user experience.
- Designed and converted low-fidelity wireframes to high-fidelity prototypes.
- Delivered UI designs and animations for the new feature, Hero Collection Actions.
- Modified current UI layouts in the game engine.
- Enhanced user experiences through animated micro-interactions.

Collaborated with cross-discipline contributors

It is a valuable opportunity for me to collaborate with other designers, artists, producers, engineers, and QAs to create content for a live product. The designs I created were launched from Summer 2021 to Feb 2022.

4

months internship

45+

interfaces, assets, and animations I designed

20+

fixed UI bugs in the Unity game engine

20%

increased user engagement by 20%

Designed interfaces and experiences for the new feature.

Project #1

Hero Collection Actions

Hero Collection Actions is a system where users can unlock actions, assign actions to their heroes and earn rewards, and enjoy deeper gameplay. The design was finalized by other designers after my internship ended. It increased users’ engagement of new hero by 20%. The feature was launched in Feb 2022.

my contribution

Design high-fidelity interfaces
Design different Hero Action states
Ensure consistency with the design system

Goal

An attainable, straightforward solution.

The goal is to add deeper gameplay and reward users for any Hero Collection progress they made. The best scenario is users can attain the needed information and comfortably go through the flow.

Challenge

Convert a complex concept to an easy-to-understand design.

One of the biggest challenges I met is that the new feature introduces new elements, implying that there is a need for users to understand and learn new things. How can I convert a complex concept to an easy-to-understand design?

How might we convert a complex concept to an easy-to-understand solution?

Design decision

Group data in consistent, meaningful ways.

Action information is logically grouped, providing clarity. A clear visual hierarchy is used to pull focus on the main section.

Provide multiple coding formats of data.

Color and icons are used as signifiers to present new elements in a visual, meaningful way so that information is easy to absorb.

There are other enjoyable works in relation to interface design that I love!

Outcome #2

Other works

In addition to interface design, I also created animations and small assets, drawing users’ attention to the necessary details and providing a positive user experience.

My contribution

Produce eye-catching animations
Create components & icons
Design high-fidelity interfaces
Improve the current user experience
Correct existing game layouts

Night King badge:
Asset design & animation

While designing the Night King badge, a huge consideration I took was making sure that the colors are accessible for colorblind users. We finally decided on magenta, blue, and green as the primary colors since they are colorblind-friendly.

Battlegrounds Tutorial animation

Motion tells stories. Tutorial animation turns abstract information into tangible and visualized content. I worked in the Unity game engine to create ready-to-publish asset animations. It's nice to see my designs were implemented immediately into the game after finishing.

Troop Train selection:
Icon design & carousel UI

Since the icons only take up a small proportion of the interface, we increased the line thickness for better visibility. In the beginning, it was difficult to choose which way of interactions, including arrow, button, and dot, would be the best for the carousel design. After running through iterations and conducting several usability tests, we decided to move forward with the dot: it won't distract users from the main function and still conveys presents as a carousel.

In the end

My learnings

Get feedback early & often

During my first few weeks, I wanted to make a strong first impression, so I only presented my work after I went through several revisions by myself. Gradually, I learned that the most efficient process would be to share my first try and ask for feedback for further iterations. Be proactive, always ask for feedback, and keep on iterating.

How to use the design system

Since I worked on designing the interfaces for a new feature, I needed to learn when to rely on the design system and when to break it. A new feature requires designing new components. I learned that you need to decide when and how to deviate from the design system reasonably.

Personal growth

It was hard when I got started in the game design field as a person who mostly focused on mobile and web platforms. By continuing working with a group of brilliant and passionate people who were always willing to help, I gradually learned how to tackle complicated problems and work efficiently and collaboratively with designers and people from other disciplines.

Thank you, team!

This is an unforgettable summer with this amazing team! It’s such an honor to have this chance. Thank you so much, team!

Echo Blink

Echo Blink

An AI-powered voice assistant that incorporates Conversational UI, ML, and AR visual cues to bring immersive cooking instructions to people’s kitchen.

Timeline
May – Aug 2021 (3 months)
Team
Yining Qian
Jiaying Wang
Overview
This project leverages the power of machine learning (ML) to help the user communicate their artistic emotions through brushworks. My contribution was project research, ML experimentation, interface design, and interaction design. I focused on developing the app UX/UI experience .
Tools
Figma, Runway ML, Procreate
Research, Graphic Design,

Emoción is an AI-powered drawing tool that uses Machine Learning to analyze others’ emotional perceptions of line quality and form to inspire the users' creative work. The platform is a window into users' emotional reactions to art: more than just drawing software.

Exploring the emotional possibilities of line strokes in drawing.

A new way of drawing with machine-generated emotion brushes.

Emoción was designed to analyze others’ emotional perceptions of line quality and form to inspire our user's creative works. We used ML models to train a brush library that encourages users to express feelings through Formal Elements.

Select part of your drawing and save it as a brush.

We think that it is crucial to help users relate drawings to emotions. The tool "brush selection" encourages people to create brushes from their drawings, save them for future use, and share them with others. It builds a connection between users, the detected emotions, and our app's brush database.

Intuitive and simplified tools designed for assisting drawing with emotions.

Emoción was designed to be intuitive so that users can easily understand the tools and focus on drawing. Instead of being a professional drawing app, Emoción is a platform for visualizing emotions. Therefore, we came up with a list of simplified but needed tools.

Discover people's artworks & brushes. Bond between the brush & the artwork created.

Community is where people can share their artwork and different brushes they have created. Users can easily tap on the labels to view artworks consisting the different emotions. We also designed a brush detailed page that consists of the corresponding information. On the right side, there is a try-out space for users to test new brushes.

Week 1-6
Emphasize & Define
Week 7-12
Ideate & prototype
Week 12-14
Test & Validate

Brainstorming
Online research
Ideation
Concept iterations
ML experimentations

Information architecture
System map
Low-fidelity mockup
Mid-fidelity iteration
ML experimentations
High-fidelity (interactive) prototype

Usability testing
Feedback & refinement
Design system
Summarize project
Project website

problem statement

How can machine learning aid emotion expression through line quality and brushwork, to foster communication and inspire creativity?

Designed to share people's emotional reaction to art and inspire creative works.

How it works: system map

The app collects each user's brushstroke into a database to “feed” the AI. Through usage, the app will obtain more artworks to be included in a live-updating dataset for training new brushes, making the AI more inclusive and accurate.

Iterative design:
Usability feedback

We used Figma to continuously develop our interactive prototype. We showed our prototype to designers, students, and industry professionals to improve further.


Artboard Page

The first page users see when entering the app.

Artboard Page:
Emotion Percentage

The visual representation showcases the percentage of each emotion detected in the artwork.

Artboard Page:
Brush Selection

This serves as a side function for the app: users can save part of the artwork as a new brush. Because of its function, we had to balance between legibility and minimizing page space.

Community Page

We aimed to make the community page more organic. Based on the feedback, we removed the boxes and used circles instead.

Brush Detail Page

There were still too many boxes. After talking with our participants, we decided to inherit the circle style onto this page as well.

Iterative design:
UI feedback

The toolbar and emotion percentage visualization serve as part of our main functions. We played around with how to visualize emotions in a way that conveys the message and does not distract users from the artboard. For the toolbar, we discussed whether it should have collapsed contents. We finally kept it flat and simple.

What we want users to think, feel, and do: inspiring, explorative, and organic.

In the end

My learnings

What can AI bring to design

The class was a great opportunity for us to explore possibilities of artificial intelligence in the design field, especially Interaction Design. We went through several rounds of testing with AI through datasets to understand its scope and potential affordances. It was fascinating to train the AI models, such as conversational AI and face recognition, and bringing them to the design solution.

Long explorative research but needed

We spent the first 6 weeks researching AI methods and training models to gain a deeper understanding of how AI can impact design. It is considerably a long time to spend on research and experimentation phase, especially for a 14-week class, but we explored new co-creation processes as we collaborated more with AI. Overall, I think the research period was crucial for us to explore, experiment, and gain user feedback for AI/Agents.

Echo Blink

Echo Blink

An AI-powered voice assistant that incorporates Conversational UI, ML, and AR visual cues to bring immersive cooking instructions to people’s kitchen.

Timeline
May – Aug 2021 (3 months)
Team
Individual Project
My Role
Ideation, Research, Prototyping, UI Design, Marketing Design
Tools
Adobe XD, Illustrator, After Effects
Context

Worked in a small team: enhanced my design skills & earned new knowledge

In October 2020, I joined CareerTu remotely as the primary UX/UI Designer. I was in charge of enhancing their website experience to improve user conversation rate, building B2C features, and working on marketing designs, including posters and social media images, for both Chinese and English speakers. At the end of the internship, the company were satisfied with my work and offered me a freelance position.

My Responsibilities

Oversaw the UX of a product from conception until launch

- Optimized the website experience by developing new systems, flows, and interfaces.
- Analyzed user data and identified insights to inform product iteration.
- Created marketing materials for the company’s website, including campaigns and print materials.
- Improved user conversion rate and growth.

Collaborated with cross-discipline contributors

Working at CareerTu presented a valuable opportunity for me to collaborate with the product manager and company engineers to deliver end-to-end designs. It helped me to get involved in multiple design fields and gave me a real-world experience of working on a project in a team setting. All my designs were launched in Fall 2020.

3

months internship

34+

wireframes and interfaces
I designed

40+

visual and growth design tasks I completed

100%

of my designs were launched

Optimized website experiences to built user-friendly designs & improve click-through rate (CTR).

White paper request page:
Python Challenge

During my internship, I was given the task of by designing a request page and covers of the Python Challenge white paper. We decided to place a carousel because the challenge ranged from level 1 to level 7.

Landing page banner

The landing page banner needed to be updated frequently in the likelihood of an event or festival. Hence, we ended up with the frequent implementation of the web design. Once there is an event, we will redesign the banner but keep the main structure. The illustrations and patterns were created without breaking the design language in order to maintain a consistent connection with the brand..

Coffee chat web page:
landing page, assets, icons.

The coffee chat landing page was another task assigned to me. One of the goals for the project was to allow user access to the coffee chat Wechat mini program after they scanned a QR code. My job consisted of producing call-to-action assets, creating a user-friendly experience, and keeping the visuals consistent.

Coffee chat lesson: UX flow

CareerTu has two types of lessons taught by KOL and industry leaders: regular lessons and lite lessons. Regular lessons included a tier which allowed people to dig deeper into the field for a higher price whereas lite lessons were similar to the starter pack. We mapped out the user flow and designed separate web pages with different layouts for the two lessons as they each had different focuses.

Purchased lesson page

We believe that quick navigation to all purchased lessons is crucial in order to build a user-friendly system. The goal here is for users to access their paid lessons with ease and convenience. Hence, we decided to add the purchased lesson section under the Profile section.

Besides UX/UI: visual design, growth design, and more!

In the end

My learnings

Rapid prototyping & learning

As the UX/UI designer at a team working on a rapidly-updating website, I needed to adapt to the fast-paced design iterations and website implementations. Having to deliver design solutions quickly was a great lesson for me to learn: I needed to repeat the prototyping and testing process as many times as needed until it became user-friendly for the end users.

Work in a small team: you get to learn a lot

Working at a startup company not only helped me to see how a business grows, but also provided plenty of opportunities to learn about the company and fill the gaps between UX/UI design and other design fields. I acted as the solo or primary UX/UI designer for most of the design work I completed during my internship at CareerTu. It gave me the chance to lead projects and get involved in crucial discussions about upcoming design sprints.

Echo Blink

Echo Blink

An AI-powered voice assistant that incorporates Conversational UI, ML, and AR visual cues to bring immersive cooking instructions to people’s kitchen.

Timeline
May – Aug 2021 (3 months)
My Role (Individual)
Ideation, Research, UX/UI Design, Prototyping, Branding
Overview
This project tackles the problem of creating a hands-free cooking experience inside the kitchen. It gave me insights to ideate and design Echo Blink in 2021.
Recognition
My design was selected to be featured in The Best Cooking App Designs by DesignRush (a platform known for promoting the best designs).
Research, Graphic Design,

Bite is a voice-command cooking app that provides simplified and clear guidance from ingredient preparation to the end of meal-making, and personalized meal suggestions and plans, creating an easier and hands-free overall experience.

Let Bite be your ultimate cooking assistant.

Select taste preference

Getting the user's taste preference before showing the feed is crucial. After gathering and analyzing the data, it can generate recipes that correspond to their needs, such as ingredients, taste, and skill levels. It provides the best results and exactly what people want, not wasting their time with improper information.

Auto-recommend recipes

The app filters recipes based on users' taste preferences. It collects users' cooking history data to recommend the right recipes for users.

With the finger gestures, users can simply swipe up or down to browse through different recipes, and swipe left or right to dislike or like.

Adjust the recipe serving size

The recipe states 7 serving sizes but what if we only have 2 people? Bite gives users the freedom to adjust serving size of a recipe. Users don't need to worry about leftover food anymore.

Hands-free:
audio-control recipes

Convenience and efficiency is the key for users. It's inconvenient to set a timer or check ingredient proportions on your mobile phone during cooking. Simply asking the question or saying the command, the app will give the right response and offer an individualized experience.

Smart search

User would be able to select pre-existing ingredients and search recipes based on them. The smart search navigates users to their destination quicker and more precise. It records users' recipe history and provides recommended ingredients for a faster apply.

Plan your meal for the day, or for this week

Bite provides the convenience that users can add meals to their schedule. So they don't need to plan what to cook at the very last moment.

Beginning research: how could we find the core problem of cooking?

Week 1-4
Research & Define
Week 5-12
Ideate & prototype
Week 12-14
Test & Validate

Brainstorming
Online research
Competitive analysis
User interview
User survey
Contextual inquiry
Persona

Information architecture
Low-fidelity mockup
Mid-fidelity iteration
High-fidelity prototype
Branding

Usability testing
Feedback & refinement
Summarize project
Project website

problem statement

Cooking is multi-tasked.
How might we design a hands-free cooking experience?

Primary Research

User interview
User survey
Contextual inquiry

Secondary Research

Online research
Competitive analysis
Positioning matrix

Initial user research:
Define target audience

To understand how users decide what to cook, I surveyed to know more about the cooking experience of 63 participants. I interviewed a group of millennials with beginner and intermediate cooking skills about what they found challenging during cooking.

Summarize user research:
Find pain points

To find the core problem, I summarized my research findings into three major pain points: cooking knowledge, time issues, and problems appeared during the cooking process.

One thing I noticed is that 70% of the interviewees mentioned it's inconvenient to pick up their phones during cooking.

Deeper understanding:
user persona & user journey

Based on my prior research insights and observations, I created a user persona that demonstrates the essence of my target user group and a user journey map that helped me understand my persona's activities.

Market research:
competitive analysis & positioning matrix

A competitive analysis helped me to understand what products are currently trending in the market and their pros and cons. A positioning matrix helped me to compare between these products and find their positions inside the market.

Designed to bring ease & convenience to the cooking process.

Challenge

Ideation

01

Cooking process is complicated and multi-tasking. How could we simplify the whole process?

Step-by-step recipes bring ease of use and keep users on track with their progress.

02

People are confused during ingredient selection & preparation. What should we do if we are missing an ingredient?

Allow users to change the serving size of a meal and provide ingredient substitution options before the recipe stage.

03

People don't want to use wet hands to touch their phones. Looking at their phones also distracts attention.

Audio-command, video recipes would free users' hands and prevent the screens from getting dirty.

Usability test & low-fi iterations

By testing with several participants that fall into my target audience group, I was able to run through two low-fidelity iterations and refine them based on the feedback received.

Communicate the brand to audiences: visual design & branding.

Marketing vision

Since cooking is already causing frustrations, I focused on the three keywords: clear-to-navigate, fast, and convenience, and integrated a minimal design style into the app design.

Echo Blink

An AI-powered voice assistant that incorporates Conversational UI, ML, and AR visual cues to bring immersive cooking instructions to people’s kitchen.

Timeline
May – Aug 2021 (3 months)
Skills
UI/UX Design, User Research, Wireframing, Prototyping, User Testing, Design System.
Overview
This is a redesign of the Tesla Model 3’s dashboard screen for current and future Tesla owners.
Tools
Figma, After Effects, Miro
Research, Graphic Design,

This project aimed at solving this problem: controls and displays of information as the current Tesla UI design are not easily accessible. I decided to redesign the dashboard interfaces and ultimately focused on the home screen where most user interaction happened.

Everything is controlled within a single touch screen.

Home screen: all-in-one & easily accessible

The purpose of redesigning Tesla's UI is to make main controls and vehicle information accessible to users while driving. The redesign gives users a clear, direct view of the functions listed. The components were created to be expandable to the entire right section.

Navigation & autopilot

The original Tesla OS design has pale colors and low-contrast interfaces. I redesigned it to have vivid colors and high contrast so that it can be easily seen by drivers, since they need to focus on the road and their attention is limited while driving.

Driving at night?
We have a dark mode.

I wanted to make sure that this redesign is accessible for people driving at night. Dark mode has the capability of reducing eye strain at late night or in a dark environment.

Week 1-4
Research & Define
Week 5-12
Ideate & prototype
Week 12-14
Test & Validate

Brainstorming
Online research
User interview
User survey
Contextual inquiry
Persona

Information architecture
Low-fidelity mockup
Moodboard
Affordance design
High-fidelity prototype

Design system
Usability testing
Feedback & refinement
Summarize project
Final presentation

problem statement

How might we redesign Tesla's OS so that controls and displays of information are easily accessible?

Understand the current Tesla OS, compile research insights, and conduct heuristic analysis.

Primary Research

Contextual inquiry
User interview
User survey

Secondary Research

Online research
Heuristic Analysis

User interview: To understand drivers' experiences & opinions

I interviewed nine drivers including both EV and gasoline car owners to better understand their experiences and opinions regarding driving. My interview goals included acquiring a better understanding of drivers’ demographics, their attitudes toward their current vehicles, past driving experiences, expectations of future vehicles, and opinions on car features.

Persona: gasoline car owners who are curious about EV

Personas synthesize research from multiple sources, draw insights from interviews and psychometric data, and are inclusive of diverse communities. Since most of the interviewees own a gasoline car, I aimed to target current gasoline car owners who are considering purchasing a Tesla in the future. The main goal is to create experience designs that does not distract users while driving.

User journey map

Based on the persona, I created a user journey map for an overview of the actions that Lucy takes before and after driving. It helped humanize the users and mapped out the essential steps before, during, and after the driving experience I needed to consider.

Drivers are painful because...

They are concerned about getting distracted while driving and don't fully trust autopilot.

They enjoy automatic vehicles but prefer higher-level ones with advanced tech.

They are engaged in feature-rich cars and digital controls but not physical controls.

They expect their vehicles to have fewer maintenance problems.

Heuristic analysis:
Tesla Model 3

I ran a usability evaluation method, called heuristic analysis, on the current Tesla dashboard design to identify usability issues and improve user satisfaction. During the evaluation, I found two serious problems: overloaded information and inaccessible, hard-to-reach controls while driving.

Heuristic analysis:
Vehicles with heavy on-screen interactions

To research vehicles featuring heavy screen-based interactions in the market, I conducted heuristic analysis on Porsche Taycan and Ford Mustang Mach-e. A key finding was that users were able to understand and interpret information with clear icons and label faster and easier than just words.

Task flow: when users are ready to drive

I mapped out my users' journey at the start of the drive. Heuristics and task flow analysis informed significant, structural usability improvements in the information architecture.

Design outcome #1:
UX /UI design to improve usability.

Micro-interaction design

I explored the possibilities of integrating micro-interaction designs into widgets. It supports the users and gives visual feedback.

Design outcome #2:
Build a design system to communicate decisions and facilitate flow.

Echo Blink

Echo Blink

An AI-powered voice assistant that incorporates Conversational UI, ML, and AR visual cues to bring immersive cooking instructions to people’s kitchen.

Timeline
May – Aug 2021 (3 months)
My Role
Product Designer
Team: Designers, PM, Engineers, Marketing.
Skills
Web & Mobile UI/UX Design, User Research, Wireframing, Prototyping, UX Principles, User Testing, Product Thinking, Design System.
Tools
Figma, Adobe Suite, Google Analytics, Midjourney, DALL-E 2
Research, Graphic Design,
Context

Worked as the sole Product Designer

In the late 2022, I relocated to Santa Monica from Pasadena, where I lived for more than 4 years, to join Creator Now as the sole Product Designer. The journey has just begun.

My Responsibilities

Built intuitive product experiences

- Developed web and mobile designs.
- Utilized a user-centered method to research, design, and iterate the experience.
- Delivered low to high-fidelity wireframes and prototypes using Figma.
- Shaped vague concepts into clear product visions.
- Created a Design notion team to document processes and bring more awareness to design.

Collaborated cross-functionally

It’s a great opportunity for me to team up with experts like designers, engineers, and marketing to create designs quickly. As a result, our products received positive feedback from both stakeholders and customers.

20+

projects led from ideation to launch

263%+

subscription boost in 6 months

50%

conversion rate in the sign-up flow

8.2/10

user satisfaction rate by revamping the platform

Echo Blink is a system that integrates the smart display with Alexa, Amazon Echo Show, and the smart camera, Blink Indoor. It tackles the core problems of learning a new dish, building a seamless connection between real-time cooking and recipes. It is aimed to simplify the culinary experience, help people build confidence, and relieve confusion.

Process

Agile + Design Thinking

Identify pain points and areas of improvement through user research.

53

survey responses

19

interviews

13

usability tests

48+

team meetings

Gathered User Insights

To understand how users feel while using the app, I worked closely with the marketing team and gathered 53 user insights that guided us to understand users' pain points and align with their needs.

Understand Users

Based on the usability tests with 13 users, I found out that it's easy to get confused and bored while browsing. The old designs lacked a clear visual hierarchy and visual appeal, which made it challenging to prioritize essential features and engage users effectively.

Understanding User Persona

We tailored our platform's UX/UI to address the challenges of young creators. His journey underscored the need for an intuitive interface and a sense of community. This influenced our user-friendly design, welcoming colors, and engaging visual elements, emphasizing support and mentorship for budding YouTubers.

Problems

ideations

01

Users feel overwhelmed and confused when landing on the app, especially the home page.

Declutter the app, improve content usability, and reduce the number of elements on the home page.

02

The current design is pale and users are not engaged with it.

Improve overall layouts and make them more premium, dynamic, and detail-oriented.

problem statement

Users feel lost, not engaged, and overwhelmed while using the app.

Home Page: revamped to be simple and engaging.

Old Home Page Design

Our home page is the first page that users will see when they land on our app and serves as a central hub that connects users with all the features. However, our old home page didn’t tackle the 4 pain points efficiently and couldn’t let users consume content efficiently.

Iteration 1:
Fewer Cards, Read Easier

Tackled On...

Too much information.
No clear visual hierarchy.

We were not satisfied with the old design as it was overloaded with information and didn't have a clear visual hierarchy. To address this, we simplified the home page by removing unnecessary content. This design is about making things straightforward for users, presenting only the essentials.

Iteration 2:
Know Where To Click

tackled on...

Lack of clear guidance.

We tackled the pain point that users were struggling with a lack of clear guidance by introducing Daily Quest. It guides users with a "start" indicator through the process, making it easier to navigate and initiate tasks. Gamified visuals also increased engagement.

Final Design

Redesigned it again...

I came up with the 3rd iteration that tackled the 4 major pain points of having too much information, no clear visual hierarchy, lack of clear guidance, and lack of engagement.

We decided to transform Daily Quest into Daily Actions: Learn, Create, Contribute. This can help prevent users from feeling overwhelmed by too many options and guide them toward completing their tasks efficiently.

User satisfaction rate raised from 7.4 to 8.2 (a total of 10) after the revamp.

User Impact

As our business needs evolved, I redesigned the platform 3 times to match each phase. By revamping the home page and the platform, our user satisfaction went up from 7.4 to 8.2 (thanks to responses from 543 users). This not only made things look nicer but also made the site easier to use, showing that smart design changes can really make users happier.

Sign-up flow: provide customized experience.

Old Design

We want to know users' intentions

1. Business Goal: We wanted to collect more data and understand user’s intentions.
2. Iterative Design: I iterated through design phases to create a streamlined sign-up flow.

Intention Setting

We asked users to select their intentions to understand their needs and provide customized experience. 60% signed-up users selected their intentions on this page.

Payment

The old design wasn't effective in convincing users to subscribe to our membership, but with my new design, we achieved an impressive 50% conversion rate after the new design launched and boosted the subscription by over 200% in 6 months.

Collaborated on redesigning other features to improve user engagement.

Leaderboard

Before I joined

Old Design

In collaboration with the marketing team, We discovered that users found the leaderboard boring and repetitive. It consistently displayed the same group of people, mainly due to their high subscriber count. We wanted to find a way that smaller creators can have a chance to shine to further increase engagement.

March 14, 2023

Collaborative Brainstorm

I worked with our Product Design Intern, Guo Chen, on this engaging project. We analyzed user feedback and brainstormed creative ideas to enhance user engagement. Our collaboration allowed us to come up with a satisfied solution together.

  • Added time selector: allows both big and small creators to receive well-deserved recognition. We wanted to empower users to view performance over various timeframes, fostering inclusivity and diverse discovery.
  • Gamified UI: resembles friendly competitions and encourages active user participation. This game-like approach resulted in a more rewarding user interaction with the platform.

Content Library

Before I joined

Old Design

The old design had issues with content visibility. The video card was too big and showed unnecessary descriptions. We aimed to fix these problems to enhance the UX.

February 6, 2023

Iteration 1: Optimize Interactivity

Inspired by the Netflix and YouTube’s designs, I made the video cards smaller and added categories to classify content. They aimed to offer a more organized experience when browsing videos.

Mar 22, 2023

Redesigned and tailored to user needs

In response to user feedback and our commitment to continuous improvement, we decided to reshape the Content Library page after just one month. I added labels and an in-progress category to allow easier discovery and enhance content organization, also redesigned thumbnails for e a more engaging visual experience.

Crafted a comprehensive design system from 0 to 1 entirely by myself.

Design System

Besides UX and UI, I created Creator Now’s design system and its Figma component library for both mobile and web. Since our primary audience is creators around 20 years old, we've incorporated bright hues, contemporary font, and interactive components to not only capture their attention but also resonate with their energy. We aimed to create a visually stimulating experience that engages our users.

In the end

My learnings

Working in an agile startup environment

As a Product Designer in a fast-paced startup, I've learned to balance between speed and quality, which is essential for a seed-stage company. By conducting rapid user research, designing quick iterations, and "over-communicating" with the team have helped me adopt an agile mindset.

Collaborating with Cross-Functional Teams

I had the opportunity to directly communicate and closely collaborate with the CEO, engineers, product manager, and marketing team, I gained a deeper understanding of how different teams work together to achieve common goals. This exposure not only improved my communication skills but also allowed me to grasp the significance of seamless collaboration among various departments in driving the overall success of the company.