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.
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.
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.
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.
The semi-globes of the front and back can be connected to form an entire globe, adding an “Aha” moment to create engagement.
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!
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.
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.
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.
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.
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.
- 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.
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.
months internship
interfaces, assets, and animations I designed
fixed UI bugs in the Unity game engine
increased user engagement by 20%
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.
Design high-fidelity interfaces
Design different Hero Action states
Ensure consistency with the design system
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.
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?
Action information is logically grouped, providing clarity. A clear visual hierarchy is used to pull focus on the main section.
Color and icons are used as signifiers to present new elements in a visual, meaningful way so that information is easy to absorb.
To convey each action state’s meaning, I experimented with multiple art elements. After discussion with my team, we decided to pick the elements that deliver messages instantly and please people’s eyes.
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.
Produce eye-catching animations
Create components & icons
Design high-fidelity interfaces
Improve the current user experience
Correct existing game layouts
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.
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.
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.
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.
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.
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.
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 is a system that integrates the smart display with Alexa, Amazon Echo Show, and the smart camera, Blink Indoor. Capture your actions using Blink Indoor, share your real-time cooking footage to Echo Show, and quickly get visual cues on how to proceed with the recipe. 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 to relieve confusion when they don’t know how to follow certain recipe steps.
A recipe is a preset experience. But humans aren't machines and often make mistakes when following instructions. Instead of aligning our actions to the recipe, how could we make recipes flexible?
Simply ask Alexa to start the recipe and command with ease. Step-by-step video recipes with details on the side make cooking organized.
Switch between your cooking footage and the recipe video to make a satisfying meal. Don’t worry about how fast to cut, or trying to catch up: Alexa follows you.
How to chop an onion? How much oil should I use? It’s difficult and confusing to follow a recipe because people don’t have the necessary cooking skills required.
With Echo Blink, you don't need to worry about how to slice chicken breasts correctly. Alexa adjusts the current displayed visual cues and information to best match with what's currently on your cooktop.
Alexa is ready to help you by providing textual, video, and visual instructions. Just ask Alexa what to do and you won’t have to worry about not knowing how to protect your eyes from tearing when cutting onions.
Looking at a recipe during cooking could be problematic: you need to focus on both cooking and reading the recipe. In addition, picking up your phone frequently could get food smudged all over your screen and contaminate your ingredients. Not in the kitchen? Alexa got you.
Alexa always keeps you updated with the currently-being-cooked food condition and the next step. You can check your food condition when you are not in the kitchen. The hands-free cooking assistance provides relief and prevents feeling hurried from multitasking. Enjoy cooking and let Alexa handle the boring work.
Prestigious communications appear after setting up, which give users a sense of what could be expected in the very first moments. It also serves as a voice-command guide throughout the whole experience.
I used Runway ML to test the recorded footage using a Machine Learning model: YOLOv4 for optimal object detection. Utilizing this framework requires a large custom dataset of images to recognize a custom object.
The labeling process and the trained results provided a clear direction for me to design real-time visual cues.
In my graduation show, I implemented a prototype through Twitch Studio. Although the streaming was a bit laggy because of the internet speed, it still worked out well!
Brainstorming
Online research
Competitive analysis
User interview
User survey
Contextual inquiry
Persona
Empathy map
Storyboarding
Information architecture
Low-fidelity mockup
Mid-fidelity iteration
Machine Learning experimentation
High-fidelity (interactive)prototype
Usability testing
Feedback & refinement
Summarize project
Project website
User interview
User survey
Contextual inquiry
Online research
Competitive analysis
To help gather insights and brainstorm design ideas, I analyzed the collected data from the survey, interviews, and contextual inquiries to solve higher-order problems. One of the most valuable insights I received is difficulties occurred while holding a mobile phone and cooking at the same time.
Based on my prior user research insights, a smart display with a voice assistant could be a direction moving forward, instead of mobile apps. Then an opportunity emerged: Echo Show seems to be a feasible solution, but what is missing in the screen-based recipe products?
I bought an Echo Show 10 (3rd Gen) and analyzed its key recipe features deeply, to get to know Echo Show and what's demanded in the market to seek out potential opportunities.
Based on my prior research insights and observations, I created a user persona that demonstrates the essence of my target user group and an empathy map that helped me understand my persona's needs and pain points.
Insights
Ideation
01
How to reduce users' confusion by giving them the necessary knowledge needed to proceed with a recipe?
Provide basic cooking tips so people could make a meal with ingredients and a recipe.
02
How to create a seamless connection between the recipe and real-time user action?
Leverage machine learning to enable a real-time recognition of objects and users' actions.
03
How to alleviate users' stress by turning recipes into an entirely hands-free process?
Deconstruct recipes into steps that are precise and compatible with Alexa.
Based on my prior research insights and inspired by the Meta portal, I realized what screen-based solutions missed: users' actions are non-screen-based during cooking. A product opportunity quickly emerged: a product combo, including an Echo Show and a Blink Indoor camera, that records users' actions and sends back feedbacks.
Echo Blink works by running through its unique Alexa skill logic, which processes the user's request and runs the object detection model.
I visualized the concept into low-fidelity sketches with the key frames of my design and thoughts.
I developed mid-fidelity wireframes to apply to my task flow. Since cooking footage is necessary for the design, I decided to record my own videos of making a meal to bring visualization to life.
Before moving forward to the final design, I developed two rounds of design iteration. Testing at this point allowed me to continuously improve key elements and helped me to identify any possible friction points.
There were a couple of specific design elements that could be improved from the participants' feedback. Most participants mentioned that they were a bit confused and not engaged when looking at the visual cues. I found out that there was more research needed to make intuitive interfaces when incorporating with advanced-technologies.
I revised the flow, prototype, and visual language, and made a complete flow with interface animations. I am glad that I tested with users along the way, which helped lead me to several rounds of iteration that were incredibly insightful when designing the final high-fidelity interfaces.
One of the core features of this concept is voice interaction.
Hence, a video prototype with sound is crucial to showcase the user flow.
Cut chicken breasts
AR detection
Chop an onion
Instruction
Cook chicken breasts
Auto-timer
Amazon Echo Show has existing design guidelines and UI kits, but they were not enough for this project since I introduced new elements. However, I decided to follow its original layout system to create consistency.
This project inherited the color and typography used in the Alexa design system. It also introduced a bright yellow as the color for the AR detection box as it needed to stand-out and be highly visible.
Based on the original branding, I introduced new visual language for the elements that only occur in this project, such as icons and AR guidelines.
The components were designed by following the above design guidelines.
My past UX design experiences were mostly on mobile or web platforms, and it was my first time designing on Echo Show, a device with different dimensions, capabilities, and formats. It was a tough process, but I learned to take the intended platform into consideration as it could be a great solution to free users’ hands. This project helped enhance my skill in designing user-friendly experiences across multiple devices.
Designing with emerging technologies such as ML, AR, and AI, was one of the most engaging activities for me in this project. I realized that user experience drives technological changes, but technologies can also influence user experience. Design can serve as a bridge between the user experience and the different technologies used. As designers, it is crucial that we build that connection to offer productive and effective experiences.
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.
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.
We want to provide a direct perception of the user's drawing in a way that users can check the perceived emotional elements in their artwork (top right corner). This gives them an overview of how AI perceives their artwork when using AI-trained brushes.
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.
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.
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.
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
We trained three Image Generation models (StyleGAN2) and came up with the following insight:
1. ML can inform, predict a line and learn from others’ artworks.
2. ML can infer emotional responses, but will never know how a line expresses.
Based on my observation, AI is a valuable tool for adding expressiveness into pre-existing line works.
We asked our participants to sketch with the prompt: "draw a happy line". We then gathered the sketch results to observe how participants perceived different emotions through drawing expressive lines.
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.
We went through 3 rounds of iterative design from low-fidelity to mid-fidelity prototypes. We gained valuable insights on how to create user engagement and refine user interactions.
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.
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.
A design system helped keep designs consistent and easy-to-manage.
We designed the icons with key-lines applied side by side, all the icons appear as similar size. We also used same corner radius to keep it consistent.
We picked Manrope as our primary typeface to work harmoniously with the other components.
A design system helped keep designs consistent and easy-to-manage.
After training the models, we asked participants to draw using the ML-trained brushes. The artworks created were great; we were amazed at the app’s future potential.
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.
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.
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.
- 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.
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.
months internship
wireframes and interfaces
I designed
visual and growth design tasks I completed
of my designs were launched
CareerTu co-branded with several brands including TIJN to provide students with practical, business project experiences. I was the solo designer for establishing the landing pages for TIJN and banners for the CareerTu x TIJN campaign page.
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.
CareerTu also published four white papers for four different fields in Chinese. I was responsible for designing and running through iterations for the request page layout and icons.
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..
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.
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.
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.
CareerTu hosted a 5-day giveaway partnership with its brand partners for Thanksgiving.
Designed a Pinterest series of images in both light and dark colors for the CareerTu x TIJN campaign.
Designed marketing campaigns, including email templates and posters to celebrate Thanksgiving.
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.
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.
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.
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.
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.
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.
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.
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.
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
User interview
User survey
Contextual inquiry
Online research
Competitive analysis
Positioning matrix
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.
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.
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.
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.
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.
Moving forward to the ideation stage, I used an affinity map to organize all of my ideas and a MoSCow chart to prioritize the "must-have" features.
I mapped out the necessary sections and features into an information architecture map to organize contents.
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.
This is the final low-fidelity flow, which helped me to visualize the app screens and worked as a useful tool to showcase the flow.
I draw a complete user scenario to showcase how and when my persona Hanna uses the app.
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.
Besides the minimalist design, I wanted to create a sense of engaging and playfulness for my users. Therefore, I picked vivid yellow and orange colors as my potential primary colors.
The design style was created to serve the main goal: to bring playfulness and relaxation throughout the app 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.
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.
The original Tesla OS music page design uses small typefaces. I made them bigger so it's easier to be seen while driving.
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.
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.
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
Contextual inquiry
User interview
User survey
Online research
Heuristic Analysis
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.
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.
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.
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.
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.
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.
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.
I created the IA map and MoSCow chart using Figma and Miro.
I gained valuable feedback on opportunity spaces and ways of visualizing and interacting with affordances from the first round of low-fidelity sketches.
I ideated both the appearances and interactions of the affordances, in order to give a hint of how users could possibly interact with these design elements.
The iterative design process allowed me to continue refining and testing widget design.
I explored the possibilities of integrating micro-interaction designs into widgets. It supports the users and gives visual feedback.
I applied a driver-first design strategy (driver-centric design) and aimed for the product to be accessible and transparent to better serve users from all perspectives.
Color and typography created harmony with the other components and the interfaces.
I followed The Web Content Accessibility Guidelines (WCAG) for accessible colors and contrast ratios.
Components were designed following the design system guidelines.
Widgets were considered the most important UI element since it assists users with essential functions.
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.
- 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.
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.
projects led from ideation to launch
subscription boost in 6 months
conversion rate in the sign-up flow
user satisfaction rate by revamping the platform
.webp)
survey responses
interviews
usability tests
team meetings
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
