Duality.ai
Website redesign to increase user engagement for a 3D robotic company
Work Experience
As the UX Visual Designer at Duality Robotics, I thrived in a dynamic startup environment
identifying product challenges and fostering cross-functional collaboration. My key focus was on building and refining a design system that streamlined processes and enhanced efficiency, ultimately driving cost savings and value across the organization.
Product link
View final deck
MY ROLE
UX Visual Designer, design system
TEAM
UXD*1
PM*2
Engineers*3
TOOLS
Figma,
Google Suite
TIMELINE
2 Months
PROBLEM
Collaboration gaps were hindering product development efficiency and quality
I developed an efficient design system that promotes seamless communication and maximize the potential of team members in a virtual start-up environment to enhance the user-centered design practice.
01 Research
Challenge:
Limited awareness of the design system.
To boost DDS awareness, I created a stakeholder map that visually highlighted organizational gaps, effectively communicating the benefits of a design system.
02 DESIGN highlight
To help PMs and developers intuitively visualize ideas during meetings, I built lo-fi components from scratch as part of our agile design process. These easy-to-drag elements maximized creative thinking and made design enjoyable for non-designers.
03 DEPLOY
Implementation
To encourage the use of the design system, I created Duality Best UX Practices. This scoring system standardized the review of UX improvements, enhancing the accuracy of design implementations.
Challenge
We were challenged to integrate Gen AI functionality into the Robotic Scenario, enabling users to input text to more intelligently control the AMR's destination location and record its own segmentation.
The goal was to create a seamless user flow while incorporating the new AI prompt feature without disrupting the existing design of the Falcon. I successfully constructed a fresh AI prompt experience that offers a balance of user-friendly onboarding for first-time users, easy result navigation, and an organized widget layout.
The final deliverables were provided to the engineers in the form of UI assets for implementation. Feature officially launched on May 2024. Feel free to click here for more information.
MY ROLE
UX Designer
TEAM
Jade, Product Manager
Engineers x 3
TOOLS
Figma,
TIMELINE
Sep,
2023
DESIGN
Quick Prototype
With a clear scenario story provided in a document by the Manager and a rough prototype from the engineers, I swiftly conducted hi-fidelity ideation based on the existing UX. I explored four different ways to streamline the first-time user experience. The main differences among them lay in how the example prompts were displayed.
Iteration
Group Feedback
After presenting the ideas to the internal team, we received valuable feedback and decided to further optimize the "Inspire Me" option. This approach enhances the interaction by making it more intriguing, while also ensuring it doesn't involve too many steps or take up too much space.
priority components for deployment and annotations to decrease the friction of possible design hand-off.
DEPLOY
UX Refine
Following the presentation of our ideas to the internal team and receiving valuable feedback, we decided to continue refining the "Inspire Me" option, which makes the interaction more intriguing while ensuring it remains concise and space-efficient. We further developed ways to maintain transparency for the user regarding the route on the monitor. This resulted in a live progress step UI that, when compared with highlighted codes, is less distracting and more accessible.
NEXT STEPS
Refreshed UI Assets and Design System Update
While perfecting the final solution, we updated the Duality Design System to ensure consistency in components and style. We look forward to the next step of user feedback.
WORK EXPERIENCE
Duality.ai is a leader in using 3D simulation to tackle complex real-world problems. Despite its cutting-edge reputation, the online presence required a major upgrade.
As the digital face of Duality.ai, the website plays a critical role in onboarding visitors and converting them into customers. Although the initial visual appeal provides a pleasant first impression, the actual time spent on the website and the click-through rate for logging in were disappointingly low.
During my time at Duality, I collaborated across teams to boost user engagement. Through research and redesign, we prepared the site for Google Presentation Season, resulting in an impressive 31.4% increase in Q4 2023 user registrations compared to the previous quarter.
MY ROLE
UX Designer
TEAM
Jade, PM
Mia, VD
Alena, UXD
Mish, Content Writer
TOOLS
Webflow,
Figma,
HTML
TIMELINE
Aug-Sep,
2023
Homepage Redesign Highlights
Blog Page Redesign Highlights
01 Research
Accessibility audit
To improve the blog content style for better engagement and readability, we started the first step of improving user experience from the foundation: accessibility. (using the following criteria)
We came up with following suggestions:
- Avoid redundant links
- Fix semantic structure
- Maximize the impact of the article
- Break Into small, scannable paragraphs
Web Analytics Audit
To better understand user’s behavior interacting with our website, we used Clarity to analyze the click heatmaps and recordings. We found out that most users follow the CTA buttons while browsing, and extra steps or heavy content may easily deter them from reading.
Suggestions:
- Don’t let users think
- Highlight sign-up CTA
02 Define
To improve the website content style for better engagement and readership.
During the Define stage, I devised a blog style guide strategy aimed at crystallizing the objectives for the site upgrade, with a specific focus on the home page and blog page. The strategy also entailed breaking down these goals into manageable steps to ensure incremental improvements in user engagement within a limited timeframe.
03 Design
Transforming Vision into User-Centric Solutions
In this stage, Irapidly developed two contrasting style options for the blog page: Minimalist and Futuristic. These styles were carefully designed to align with Duality Robotic's vision and brand identity, aiming to attract new users while significantly improving the blog's readability and visitor engagement.
During the design review, we merged elements from both styles to create a sleek design featuring detailed article cards with categories and dates, dynamic hero section color changes based on categories, and added interactive elements like a share widget.
Considering the limited time, I also highlighted the priority components for deployment and annotations to decrease the friction of possible design hand-off.
03 Design
Content Design
Content is at the root of design; interface content facilitates the user experience, marketing content frames the user experience, and product content supports the user experience.
Therefore, before implementing the entire design, I worked with the copywriter to double-check the best content to display on the page in order to achieve the quarter's user engagement goals.
03 Design
Wireframe Iteration
The homepage design underwent three iterations, transitioning from scrollable cards highlighting Duality's features to a video hero background, and ultimately arriving at a cross-device responsive design. This final design prioritizes practicality and aligns with the usability that user interacts with the page. The outcome compasses a streamlined interaction model, well-defined layout partitions, and an increased emphasis on content and text presentation.
04 Deploy
Webflow Implementation
Fortunately, with my knowledge of webflow, I was able to complete the design in two weeks with little help from the developers. The results were impressive. In the meantime, considering the completeness of the future iterate design and being limited by some of the webflow rules, I also created a post body guideline for future easier blog editing in case mistakes occur.
04 Deploy
Next Steps
The website's launch marks the beginning of a continuous iterative process. Just two weeks after the site's debut, I revisited Clarity to observe user interactions with the new design elements. Notably, I observed users attempting to click on the UI example in the contact area. As a logical next step, I will explore options such as adding a frame or browser chrome around the UI or transforming it into an interactive modal to enhance user experience.
SPECiaL THANKS
Special thanks to Jade, Alena, Mia, Mish and my Duality Families who have been encouraging and giving me valuable advice throughout this project. Tracing back the route, attending Config2023 as a representative of Duality, chatting about my vision for AI at Mediterranean Restaurant, be commented on my design ideas as "sick as hell", these shining moments make me extremely proud of who I am as a designer.
WORK EXPERIENCE/
I’ve led end-to-end UX design for the “Creative Manager” initiative on VidMob’s primary platform.
At VidMob, I worked on this capstone project in tandem with various UX design initiatives to assist clients in creating smarter ads.
The main objective is to collaborate with cross-functional teams to accomplish UX sprints on the Creative Analytics side of the client facing platform (launched in Q3 2022).
It was a challenging but rewarding process that taught me skills beyond design in ad serving, data analysis, and AIOps (Artificial Intelligence for IT Operations).
PROBLEM
Fuzzy flow and lack of information are decreasing user efficiency on Creative Manager
VidMob provides a leading creative analytics platform that helps brands improve their marketing results by unifying creative & data. As the most overarching auditing feature in VidMob's premier platform, ACS, Creative Manager allows clients to see all the ad creatives and select a specific ad creative based on its performance. The existing interface contains too many CTAs and lacks quick previews for asset info. The user ends up spending extra time browsing and analyzing assets manually.
Creative Manager Initiative is a UX sprint that enables marketers to browse and analyze assets more intuitively through modular classification and smart asset snap cards. This gets users ready to leverage intelligent creativity in the next step.
MY ROLE
UX Research;
UX Design Lead
TEAM
Emily Rinehart, Product Manager
Andres Maza, Senior Designer
TOOLS
Sketch,
InVision,
Zeplin,
Confluence
TIMELINE
July-August, 2022
01 Research
Measuring user flow + Analyzing UX improvements
To gain a holistic picture of the problem space, we measured the current user flow based on our VidMob UX Best Practices to audit how much the present design meets our UX standard. Three cross-discipline evaluators individually assigned scores on 52 guidelines for the screen. Overall, evaluators scored similarly, and the matching UX issues were identified. (what the most interesting findings?)
02 Research
Competitor Audit
By auditing similar products in the existing market, we found that each platform presents ad creatives differently, based on the platform characteristics—for example, Facebook Ad Manager group ads by the campaign; Amplitude allows users to compare the KPIs of campaigns based on a customized multi-metric analysis; Madgicx provides a spend-revenue data visualization for users to audit the performance of creatives. Hence, understanding the behavior and motivation of the primary users using our VidMob Creative Manager is crucial.
Research
User Interview
We conducted user interviews with 3 Strategic Client Associates and learned about their experience using the Creative Manager, top of mind pain points and usability issues.
03 Design
Wireframe Iteration
After quickly prototyping four ideas with different priorities, I finalized the decision by discussing with the senior designers, product managers, and engineers in the daily catch-up meeting to measure how much each idea meets user needs, compliance with PRD, and is technically feasible.
04 Deploy
Visual Component Library
After quickly prototyping four ideas with different priorities, I finalized the decision by discussing with the senior designers, product managers, and engineers in the daily catch-up meeting to measure how much each idea meets user needs, compliance with PRD, and is technically feasible.
SPECiaL THANKS
Thanks to Emily, Taylor, Andres, Kelly, and the Tripod team, that support me to collide our design thinking in this growing playground—VidMob.
OPPORTUNITY SPACE
The COVID-19 pandemic revealed a massive acceleration in the art market/ yet this trillion-dollars-valued art industry is limited to a small percent of the population
New needs of creating and collecting art surged and new ways to interact with art prevailed. However, Millennial investors are excluded from the art industry as there are high costs often associated with investing in art.
When committed to tackling the challenge from Goldman Sachs, my team developed an innovative experience to bridge the gap between the emerging creators and investors. Our work was end-to-end; we began with an in-depth discovery process, which led us to design, develop, and deliver a digital experience for millennial investors to diversify portfolios in a new era of art investment.
MY ROLE
Lead UX Designer & Researcher,
Stakeholder Liaison,
Video Creator
TEAM
Nayeon Kim
Dany Weng
Jane Guan
TOOLS
Figma
Miro
AE
TIMELINE
Sep - Dec 2021
PROMO VIDEO
PRODUCT FEATURES & VALUE
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet.
1. Brand Identity
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta vestibulum.
2. Marketing Consultancy
Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus.
3. Business Card Design
Donec sed odio dui consectetur adipiscing elit. Etiam adipiscing tincidunt elit eu convallis felis suscipit ut.
4. Art Direction
Aenean tortor libero, condimentum ac laoreet vitae, varius tempor nisi. Duis non arcu vel lectus urna.
01 Research
User Interview + Field Research
To understand the obstacles stopping people from investing in art, I led the team to generate the research strategy, including precedents and analogs studies, 6 galleries field research, 10 in-depth stakeholder interviews.
Asking the why behind the why
We found that many millennials are experienced investing in ubiquitous vehicles except art because don’t have access to the art investing system. To understand the reasons behind the obstacles, we synthesized user painpoints through affinity map into three points: Interest, Cost, and Knowledge.
02 Define
Identifying scope & target audience
Through building three personas and a user journey map, we narrowed down the target user group to millennial beginners in art investing because they can hardly start their investment journey in terms of knowledge, cost, and ROI (return of investment). We decided to focus on the stage to empower Millennial art investing beginners with accessibility.
View User Journey Map
03 Design
Ideate a smart way for investors to access affordable artwork.
Based on the “digital native” characteristic of millennials, we moved our findings into core themes and several possible solutions from four vehicles —network, service, channel, user experience — to empower our target user with accessibility.
Research
Prioritize a feasible idea through identifying market opportunities.
To drive the ideas forward, I led the team to conduct a competitive analysis of 12 popular products (including art resource providers and investing market space) to identify market opportunities. The result lands on the following areas:
04 Wireframe
Improve fidelity through cyclic user testing.
Our team rapidly moved through design cycles while continually improving our fidelity through three rounds of user testing with target users.
Reflection
Challenge: Why is the design good for our users?
This is the project I conducted user testing with the most times. We kept raising questions about what and why the design is good for our users. Through continuously collecting feedback from users in the different design stages and communicating with stakeholders, we pushed our idea forward to land on a solid footstone.
Next Step: Keep up with the trend of NFT
We don't assume the existing patterns on the market are a blueprint for our design. Thus, we will focus on digital art & crypto for the next step, a leading future trend.
WORK EXPERIENCE
I led the design the animation of the two circles morphing and intersecting to symbolize duality and fusion, which covers 8 different subthemes of the students' thesis works.
The overall theme of the Thesis Festival was hybrid, with subcategories representing duality/hybrid features, and I designed eblast (Mailchimp) graphics, social media graphics, and themed inserts. Total social media impressions were up to 4000+, a 40% increase in likes over last years' Thesis Festival posts.
Feel free to view more through this link.
MY ROLE
Lead Visual Designer
TEAM
Yi Li,
Brenda Hawley,
Steven Mayer
TOOLS
Figma,
After Effect
TIMELINE
April, 2022
Physical Computing
Bloom
An interactive kinetic sculpture response to hand gestures.
In-car AR
Venture
An AR game to elevate the In-car experiences for kids
INteractive art
Alaya Blooming
An eternal blooming lotus triggered by spectator's observation.
UX design (SaAS)
Opt-in
Non-profit group decision-making game based on the decentralized MeshNet
UI/UX Design
Squarean
An rhythm fitting game to revitalize square dance experience
Product design/ AR
Pally
An AR app and interactive wall to eliminate bully between teens
UX design (SaAS)
Pollen
Upskilling platform for mothers starting careers in privately certified maternal healthcare
context
In this era of e-commerce dominated by digital transformation and personalized experiences, standardized website templates are no longer sufficient to help sellers stand out in the fiercely competitive market.
Leading the YES STUDIO design team, which comprises professional user experience designers, I specialize in tailoring website modules for brands targeting international markets. We genuinely focus on what users want, effectively increasing their time spent on the website, boosting conversion rates, and reducing shopping return rates. Here is a great example of a customized gifting website project - "Cute Mart" that I have participated in and guided.
The tools we used to dev the webs included, but were not limited to Webflow, Shopify, WordPress, and custom code modules. The goal was to achieve below.
FOR DESIGNER PEERS
Hey, I love making my design files organized. If you feel the same way, access the link to view my raw Figma design file for this project, which might help you take a peek of my working style.
context
Urban Dunk is a dynamic brand that blends urban culture with athletic performance, focusing on innovation, quality, and sustainability to meet the needs of modern athletes and fashion-conscious individuals.
I led the YES STUDIO team to design from scratch, creating a unique and creative brand image with catchy, trendy visual elements for Urban Dunk, aimed at helping clients quickly achieve the localization advantage of Chinese brands going overseas.
The current project has successfully registered a trademark, and our team is leading the digital marketing efforts primarily on TikTok, aiming to achieve a growth of 100k users in the first quarter of 2024.
