Trickle
UI/UX Designer
July - Present, 2022
Overview
In summer 2022, I joined VisionVX’s Trickle Team as a UI/UX Design Intern.
During the 3 months, I devised and analyzed over 200 user surveys to validate our assumptions and ensure products align with user needs.
I reorganized and unified the design system to create the standard of components, text, and layout and unify disjointed experiences.
I also worked with the front-end team to redesign the setting feature to form consistency throughout the products and smooth user experience flow. Our new design empowers users to collaborate and communicate better in their workflow.
Due to privacy concerns, I would be focusing on the high-level design process.
Introducing Trickle !!
Trickle is a web application that unifies workspaces where the team can collaborate, communicate and hang out. With features such as news feed, embeds, live threads, and reactions, users can voice their ideas anytime, synchronically update information through multi-departments, form close cooperation between colleagues, create stronger teams, and have fun at work.
What I worked on…
User Research
I coordinated and led user research studies to validate our assumptions and ensure products aligned with user needs.
-
Identified research topic by communicating with product manager and engineering team.
-
Designed qualitative and quantitative questions that address user behaviors and thoughts.
-
Distributed, collected, and analyzed survey questions and provided research insights to update users' feedback.
User survey (pictures blurred for confidentiality)
Main Projects
Due to the time emergency, some of Trickle’s user interfaces were designed by the front-end team without the design being polished. The UI design system was unorganized and the prototypes were not aligned with the newest version.
Design System
I created a new UI design system that consistently uses throughout the prototypes.
-
Reorganized the style guides, such as typography, colors, shadow, blur, size…etc.
-
Created new components, such as navigation, news feed cards, pinned…etc.
-
Redesign some UI tokens, such as buttons, dropdown menus, input, avatar…etc.
Buttons
Typography
Design System (pictures blurred for confidentiality)
Hi-fi Prototypes
I recreated the hi-fi prototypes to the newest updated version, which is used in later iterations. I mainly constructed the news feed page, threads page, live threads page, people page, and settings, which are the main features of Trickle.
Hi-fi Prototypes (pictures blurred for confidentiality)
Redesigned Features...
After communicating with the front-end team and managers, based on user feedback, I made some iterations for several features:
1. Settings feature
Improved UI design, such as the navigation bar, button, and input bars, to form consistency throughout the products and smooth user experience flow.
Settings Feature (pictures blurred for confidentiality)
2. Live thread feature
Redesigned the live thread feature to solve the card length problems and improve the user experience successfully.
Live Thread Feature (pictures blurred for confidentiality)
3. Reaction button
Redesigned the Reaction button to make the button more obvious and intuitive for users to click and use.
Reaction Button (pictures blurred for confidentiality)
Reflection
1. Expand your scope of knowledge.
I learned lots of front-end knowledge to have a smoother conversation with the tech team. With some front-end coding knowledge, I know how to design and caption the design to make prototypes understandable. I also learned that to be a great designer, I need to not only take the design perspective but also stand in engineers’ and managers’ perspectives.
​
2. A design System is essential for the team to unify design elements.
I have to admit that I have a very basic understanding of the design system before this project. I learned a lot from creating the design system and also improved my Figma skills. A good design system can make the iterations easier later and unify the design as a whole.