Venus Jewelry
E-commerce Startup Website Redesign
UI/UX, Brand Identity | Internship
Company
Duration
Tools
9 weeks
Adobe Illustrator, PhotoShop, Figma, After Effect
Tingting Dong (UI/UX Designer)
Liz Li (Senior Graphic Designer)
Ming Xu (UI/UX Designer)
Mohammed Pahadwala (Web Developer)
Team
Impact
Increased E-commerce website views and improved the checkout page work completion rates.
I advanced the landing page, checkout flows, information architecture, and interface consistency throughout the website and mobile app redesign.
I led the visual and system design, improving the brand identity compared to the client’s previous website.
My Role
Project Timeline
According to the client's needs, they aim to redesign their E-Commerce website to maximize benefits and encourage customers to purchase their products repeatedly.
Context
Problems
Inconsistent checkout process & Unclear hierarchy
The main problems with the previous shopping page include the lack of promotion input on the checkout page, a repetitive form-filling process, and duplicated information across separate pages, which results in a confusing checkout experience. Additionally, the landing page has unclear product categories, making it difficult for new customers to navigate.
Understanding
Based on the client’s requirements, I first tried to interview their previous customers, review their feedback, and audit the results. Next, I analyzed the current website page and tried to see other competitors’ checkout pages to see the features that need to be improved. Finally, I designed the wireframes and prototypes for user testing to iterate the designs.
What did our customers say
Findings
#1
Scattered Similar Information
Too many pages divide checkout flows into distracted sections, resulting in repeated back and forth to confirm the item and delivery information.
#2
Lack of Content Relevance
Improper information leads to customers’ confusion and keeps them more time checking details such as the billing and delivery information disorder.
#3
Missing Discount Access
Lack of promotion code input, customers cannot find the benefits at first sight even though the coupon codes are provided at the top of the page.
Define
User Journey
Redesign the checkout page to ensure providing a smoothing process by prompting users with benefit sections, intuitive visual elements, and concise steps for quick information acquired.
Goals
provide prompting elements during the checkout process for customers with fewer clicks, increasing the checkout efficiency for a pleasant smooth shopping experience?
How Might We…
Design Process | Checkout User Flow
Make it Easy
The previous checkout flow lacked a coupon section and did not provide a login link for the existing account member. So I add them to the mailing section. In the initial flow, I tried to separate the cart, mailing information, and payment into three pages.
However, it is difficult for the user to see the delivery fees on the mailing page. Based on the feedback, I incorporated the auto-filled address to help them preview the extra fee changes on the same page, helping them make decisions efficiently.
First Iterated Flow
Second Iterated Flow
The iteration process happened between group design critique and usability testing with our stakeholders. There are three key improvements according to users’ feedback.
Mid-Fi Wireframes & Improvement
The coupon input section should be shown for users to apply in each step. The visual prompt with color contrast is also important for quick checkout.
01. Banner promotion
➡️ CTA Button
02. Billing Address
➡️ Shipping Address
The coupon input section should be shown for users to apply in each step. The visual prompt with color contrast is also important for quick checkout.
03. Checkout Process Indicator
➡️ Two Parallel Information
The original separate checkout steps are inconsistent. Users want to view clearly on one page rather than clicking back and forth to modify the information.
Web & Mobile App Prototype Overview
Features
According to the feedback, I tried to design two pages for customers to complete the checkout process. One page shows shipping fees utilizing the geolocation function and the other compresses billing information and payment together, simplifying the pages for quick checkout. It has three features below.
How to Satisfy Our Customers?
01.
Auto-filled Shipping Address
Utilize the geolocation function to minimize address input time and allow customers to view shipping fees before making a decision.
02.
Enable customers to maximize their benefits during the purchase process, ensuring a pleasant and satisfying experience.
Provide More Discount Entrance
03.
The billing address is pre-filled based on the customer's location. Additionally, a single-page information layout is designed to avoid navigating through multiple pages, enhancing checkout efficiency.
Simplify Process & Save Your Time
Overview
Increased E-commerce website user views by 14%, and improved the checkout page work completion rates.
Outcomes
Depicted us as a brand that inspires customers to bring their innovation and creativity to life.
Enhanced the user interface to help users efficiently navigate and discover various collections.
Definition Process
Stand out with unique visuals
After analyzing the competitor brands, I identified three ways to break through and stand out.
Most other jewelry brands used only black and white colors. Therefore, the bright and harmonious color palettes improve the brand impression.
1. Color
2. Self-addressed
Many jewelry startups addressed the product itself. The compatibility between accessories and customers is less mentioned.
Dynamic visuals are seldom used in the jewelry brand. The brand energy and passion can also be conveyed through interactions across different platforms.
3. Motion Graphics
Brand Identity
Where Elegance Meets Empowerment
Inspired by the celestial allure of Venus, the goddess of love, our brand embodies the duality of modern-day elegance, from the ancient allure of romance to the contemporary ethos of self-love and awareness.
Venus Jewelry isn't just a brand; it's a symbol of grace, sophistication, and the essence of self-expression. We invite you to enter a world where luxury intertwines with meaning and find each piece whispers tales of love, strength, and timeless beauty.
System thinking for scale,
Streamline the Design +
Dev Process
Visual Components
When I began the project, there were no existing design system files because the previous website guidance was unclear and the content repeated on the same page, which lacked guidance. Based on this, I decided to design a new design system that integrated simplicity, elegance, and intuitive UI to achieve higher conversion rates and checkout task completion rates.
Logo Formations
Why is the logo presented in this manner?
The combination of stars and gemstone facets symbolizes the steady power radiating from the center. The logo aims to resonate with the beauty and passion of the customers.
Final Design
In this project, I learned how to negotiate with clients and assist them in identifying their goals. Initially, we developed two attractive high-fidelity prototypes to showcase the final design as a reference, hoping to capture their interest. Unfortunately, this approach was time-consuming and unsuccessful. However, using mid-fidelity prototypes improved communication and expedited the design process.
Takeaways