Product Design
Background
Sunvalleytek is an international e-commerce company offering electronic products worldwide, including projectors, baby monitors, and dash cameras. VAVA, one of its key sub-brands, is focused on expanding in the U.S. market and recently underwent a full rebranding. To align with the new brand identity, we needed to rebuild the website from the ground up.
The Team
This project was a collaboration between the Marketing team and our UI/UX Design team. The Marketing team handled brand strategy, content direction, and product positioning, while our UI/UX team focused on all digital experiences — including the full website redesign, app experience alignment, and the creation of a scalable design system.
As the design lead, I worked closely with designers, photographers, and copywriters to define the information architecture, design the user interface across platforms, and ensure visual and functional consistency throughout the new VAVA digital ecosystem.
Teammates
Timeline
My Role
Led UI design from wireframes to high-fi visuals
Structured the site’s information architecture and key user flows.
Built a scalable design system for future multi-team collaboration
The Challenge
Understanding the Friction
The original VAVA website struggled with both performance and scalability. The homepage had a high bounce rate (60.59%), and category pages made it difficult for customers to compare similar products or make confident purchase decisions.
At the same time, our product lines were expanding rapidly, requiring frequent content updates. Without a design library or unified system, every new addition meant repeating work and risking visual inconsistency across pages.
Our challenge was to redesign the site to improve clarity, support growth, and establish a scalable design system for multi-team collaboration.
Reduce user friction and increase conversion by improving product clarity and simplifying the shopping journey.
Create a scalable website structure that supports a fast-expanding product catalog without repeated manual work.
Build a unified design system to ensure visual consistency and enable smoother collaboration across design, marketing, and development teams.
How might we...
How might we help users quickly understand product differences so they can make confident purchase decisions?
How might we improve the homepage experience to reduce bounce rate and guide users deeper into the site?
How might we design a flexible system that allows new product lines and content to be added efficiently?
Pain points
Expectations
Users want success to be seamless — keep them moving forward unless further action is required.
Users want minor or non-blocking messages to appear less intrusively, so they can stay focused.
Users want helpful error messages that explain what went wrong and how to fix it.
Users want consistent and predictable patterns, so they can immediately recognize what’s important and how to respond.
Key User Insights
To better understand our target customers, we conducted user interviews with individuals who frequently shop for consumer electronics. The interviews helped us identify their shopping patterns, expectations, and frustrations when navigating VAVA’s existing website.
A key finding was that most users browse our site primarily on smartphones and laptops, highlighting the need for a responsive and seamless cross-device experience. We also gathered insights into how they compare products, evaluate pricing, and what slows them down during the buying process.
These learnings informed our persona development and guided the direction of our redesign strategy.
Jack Johnson
San Jose, California
Demographics
30 years old
Software Developer
Tech-savvy and comfortable with digital tools
Frequently shops online for consumer electronics
Pain points
Finds VAVA product categories confusing because many items look too similar
Needs clearer differentiation to understand which product fits his needs
Gets frustrated by long or repetitive buying processes
Needs
Sitemap
After defining our user needs, I collaborated closely with the marketing team to determine the essential content for each page. Together, we clarified the user flow, aligned on business requirements, and structured a sitemap that supports both product discovery and conversion.
Homepage
The redesigned homepage focuses on clarity, hierarchy, and product discoverability.
I introduced subtle animations and hover interactions to create a more engaging first impression without overwhelming the user.
The hero section highlights key products with strong visual storytelling, while the secondary banner area introduces an interactive browsing experience that allows users to explore multiple product categories more intuitively.
This structure helps improve engagement, reduces bounce rate, and presents VAVA’s expanding product lineup in a more organized and appealing way.
Category Page
I redesigned the category page using a product-card layout that surfaces key features and reduces confusion among similar-looking items. To support long product names and an expanding catalog, I refined the card ratio from 1:1 to 4:3 for better flexibility and readability. The interactive hover state with a clear CTA also streamlines the buying process.
Grid System
To establish a responsive layout foundation, I refined the previous banner grid, which used inconsistent 5–10px spacing that didn’t scale well. After testing multiple options, I adopted an 8-pixel grid system for cleaner alignment and easier scalability. The final structure uses a 12-column grid for desktop, 8 columns for tablet, and 4 columns for mobile to ensure a cohesive experience across all breakpoints.
Typography System
VAVA’s brand guidelines specify Helvetica Now as the only typeface for digital and print, so I built the entire typography system using its Bold, Light, and Micro families. When defining styles, I optimized not only font sizes but also line heights, ensuring they pair as whole-number values for cleaner vertical rhythm. I then organized these styles into a clear naming structure based on usage, creating a consistent system applied across all platforms.
Color Scheme
The brand palette initially included only black, white, and turquoise, which limited hierarchy and visual flexibility for web. Through design exploration, I expanded the palette with neutral background tones and functional greys to support clearer structure without altering VAVA’s brand expression. This extended system maintains the brand’s clean aesthetic while improving usability and content clarity across the site.
Other Components
Beyond the core layout and typography, I built a set of reusable UI components with clearly defined anatomy and interaction states. Buttons, inputs, and form elements were designed with consistent spacing, visual hierarchy, and behavior across hover, focus, pressed, disabled, and error states. This component system ensures predictable interactions for users and provides developers with a scalable, maintainable foundation for future feature growth.
Closing Thoughts
What I’ve Learned
Project Management
Leading this project taught me how to manage multiple workstreams simultaneously while maintaining transparency and alignment across teams.Team Collaboration
I learned the importance of setting clear timelines, communicating proactively, and collaborating closely with cross-functional partners to keep the project moving smoothly.Continuous Learning
To deliver high-quality design work, I realized the need to continually refine my skills, stay curious, and keep learning to create better user experiences.
©2025 KRISTY TIAN