01. Users browsing the website
My Role
End-to-end UX/UI Designer
Avant-Garde Global is a brand that specializes in selling pre-owned luxury watches. They attract customer traffic through their website and provide offline services and transactions to users.
- Service Process
Before
Timeline
6 weeks
Context
Kick Off
Visual Expression
Iteration 1
02. Users contact offline team( by form, tel or email)
I collaborated with the marketing team to select the information that users desired to find on the website, based on competitive analysis and user interviews. Considering design strategy and objectives as a foundation, I built a low-fidelity prototype.
01. Product Information
Teammates
Oliver Billinge-Design Lead
Daniel Pryer- Head Copywriter
After
- User Interview
Conclusion
Paul Glazzard- Developer
Maya- Marketing
Research
&
Define
Design Strategy
Interviewee: 5 Interviewees, 25-45 years old, who have a certain level of income and are interested in purchasing high-quality watches.
Key information to build brand trust
Brand Background and Services
Lo-Fi Prototyping
02. Brand Information:
Iterated Prototype
Further Interview and Analysis
Agile Design Thinking : Addressing Business Constraints in Low-Fidelity Design
01. Information Architecture
Upon presenting the lo-fi prototype to the client, we received valuable feedback and specific design constraints. It is important to acknowledge that the design limitations have hampered the ability to convey a higher level of brand professionalism in the presentation of information.
When unable to provide detailed product information, how to enhance the conveyance of product quality ?
Introduce certification and guarantees: Emphasize certifications and guarantees associated with the products, such as manufacturer warranties, and quality assurances etc, to convey reliability and product quality to users.
When the background information it can provide is insufficient, how to show the brand's professionalism and reputation
Expand the brand's influence: Transform the brand's historical information into a clear brand value and enhance the brand's strength
Team photos that match the brand image: Showcasing the reliability and professionalism of our brand to users, establish an emotional connection with our brand team and enhancing their trust in our brand.
Highlighting Each Brand Advantage: By emphasizing each advantage, delving into the core values of the brand, and conveying the brand's professionalism, reliability, and reputation to users.
Introduce return policies: Provide clear return policies and accessible customer support channels to demonstrate confidence in product quality and display a commitment to customer satisfaction.
When unable to develop additional pages (minimal investment), how can we enhance users' understanding of the products and services
First display of brand services (Brands available for sale): Helping users quickly understand the range and positioning of products sold on the website, providing more choices and opportunities for comparison, and enhancing purchasing decisions and confidence.
Showcasing Curated Watch Brands: By featuring the best watch brands available for sale on the website and highlighting their unique advantages, we help users quickly understand the value and quality of Avant-Garden Global.
I started by mapping out user navigation through a user flow diagram, then sketching how functionality would work with each of the pages. I created the IA using a card sort method where I re-grouped the current website IA and make it more cohesive, which was key to forming the new navigation. During the ideation process, the site architecture was also constantly changing, which meant I had to adapt frequently to quick changes.
02. Solutions Under Design Constraints
02. Fonts
Elegance and readability
Immersive
User Experience
Before
High-quality Products
Classic
03. Provide services and complete transaction offline
- Why Need To Re-design?
Competitive Pricing
Users don't trust the brand (Avant-Garden) and are reluctant to make contact,
Because…
Missing information that users care about (brand, product)
The overall visual sense does not conform to the luxury positioning of the product ( users have doubts about the brand professionalism and quality of the product)
“ How might we improve information delivery and visual presentation, reshape brand image, enhance user trust and browsing experience, and encourage them to connect with our offline team, thereby driving ultimate conversion? ”
I collaborated with the PM and marketing team to establish design improvement directions based on our user needs and analysis.
Building Brand Trust: Showcase the brand's reputation and certifications, such as authorized dealerships, proof of watch authenticity, and product certification.
User Experience Optimization: Enhance the website's user experience to ensure users can easily find information and make purchases.
Defined Visual Style
Layout
03. Buttons
Concise and easy to understand
04. Brand Visual Keywords
Luxury
Pro: Enhanced visual impact and rich layering are employed to highlight the quality and details of the product, creating a captivating visual experience.
Cons: The product switching buttons do not adhere to best practices, as users are unable to anticipate or filter the products they want to see.
Iteration 2
Pro: Switching buttons that are more in line with operational cognition, intuitively showcasing all the included brands.
Cons: The white texture lacks distinct contrast and immersion, making it difficult to focus on specific products.
Visual Style Selected
Immersive User Experience: Through creating an immersive user experience, we aim to deeply engage users in the brand's world and establish an emotional connection.
Advantageous Information Communication: Effective communication of our brand's advantages is crucial. We achieve this through clear and compelling written descriptions, captivating storytelling, and impactful brand messaging, accurately conveying the brand's core values and differentiating advantages.
Visual Expression Optimization: With carefully designed interfaces, visually appealing graphics, and captivating animations, we convey the brand's uniqueness, quality, and value.
Building Trust and Recognition: We aim to help users quickly understand and perceive the brand's unique value, thereby building trust and identification with the brand.
Landing Page
Contact Us
We took a crucial step to ensure the quality of our design and the feasibility of user experience. We invited 5 participants to participate in our design review meetings and involved them throughout the entire design process. We conducted interviews with them, focusing on usability, user trust, and user experience aspects.
Willingness to contact
All users expressed a willingness to contact the offline team
We have now entered the MVP testing phase, which is expected to last for at least 8 weeks. This includes preparation, implementation, and data collection processes to ensure sufficient user engagement and feedback.
Within just one month, we have received feedback from the clients indicating a growth of over 20% in user contacts. This gives us confidence in predicting that, during the subsequent market promotion and advertising activities after the product goes live, we will be able to attract more target users and convert them into actual sales. Stay tuned for further updates and progress.
Can users independently complete all operations ?
How Might We
Reshape the Brand Image
Products Information Completeness and Clarity: Ensure comprehensive, accurate, and easily understandable watch information on the website.
Brand visual and Tone: Convey the brand's high-end, luxurious, and professional image through carefully selected color schemes, typography, and visual elements.
Enhanced visual richness and dimensionality
Fast delivery of brand services
Enhance the atmosphere and immersive experience
More direct and predictable switching navigation
02. Products- showcasing products quality
Provide detailed information, assisting users in making informed purchasing decisions
03. About Us- showcasing brand strength
Highlighting brand professionalism and credibility
04. Services- showcasing the benifits
Providing users with detailed information about the services offered, highlighting the benefits they can enjoy
05. Process- enhance information transparency
Inform users about the unique service process of the brand, ensuring transparency and clarity in the purchasing journey, resulting in a seamless and convenient experience for them
Hi-Fi Prototype
Final Design
When Hovering
Within the design constraints of not being able to showcase product details, we highlight a curated selection of premium watch brands, emphasizing Avant-garde's professionalism and reliability. But it doesn't stop there:
Enhancing user trust: By showcasing the most advantageous brands, we communicate the reliability and professionalism of the brand.
Elevating brand image: Strengthening the website's brand image and reputation attracts more user attention and choices.
Reinforcing purchase decisions: By showcasing special channels, professional teams, and comprehensive after-sales service, we instill confidence in users' purchase decisions.
Showcasing all available brands and relevant certifications serves to:
Providing reliability and credibility: Product certifications can prove the quality, safety, and compliance of the products, conveying the brand's reliability and credibility to users.
Building user trust: Certification labels can establish trust in the brand and products, making users more inclined to choose certified goods.
Offering product guarantees: Certifications can provide additional product guarantees, such as quality assurance and after-sales service, increasing user confidence and satisfaction in their purchase.
Setting apart from competitors: Certifications can serve as a competitive advantage, differentiating the brand from competitors and helping it stand out in a competitive market.
By utilizing AI-generated professional team member images and uncovering the brand's past transactions and values, we can compensate for the limited communication of team strengths.
Enhanced team credibility: The AI-generated team member images convey a sense of professionalism and expertise, bolstering the credibility of the team.
Increase brand awareness: Re-create the brand image and showcase the brand's values and mission to help users better understand the brand's uniqueness and positioning.
Reshape the Brand Image, What I’ve Done:
Enhance User Trust
Whether users can enhance their trust in the brand through the information and visual expression conveyed by the web page ?
01. The First Screen- enhance a good first impression
Quickly convey brand service and professionalism, giving a first impression of luxury and personalism
06. Testimonials- enhance user trust
Optimize the prioritization of information display to quickly assist users in locating specific details and enhance user trust
01. Color Panel
Ensure compliance with Principle 3A
- Who is the Avant-Garde Global
User Target: Due to the tight timeline of our project, we have positioned our target users based on clients’ quantitative data.
Purpose: To gather insights into their thoughts and behaviors regarding the purchase of pre-owned watches and their opinions about the website.
Methodology: The researcher maintained an open and non-leading interview approach to encourage participants' honest responses.
01. When buying a second-hand watch
02. User Journey Map
User Trust is the main factor affecting second-hand sales
User trust determines the competitiveness and conversion rate of the brand
Conclusion
Mobile Responsive Design: Optimize the website's mobile experience to deliver a consistent and seamless browsing and purchasing experience across different devices. Adapt to different screen sizes and ensure fast page loading speeds to enhance user satisfaction and conversion rates.
Improve User Flow- enhance user trust
We analyzed the psychology and needs of users when browsing the page, and I made a preliminary layout idea based on the user's prioritization of information
Re-imagine the layout based on the user's definition of priorities for the information
Product Information > Brand information > Other Information
Difficulties in attracting consumers from the website channel
Avant-Garde relies heavily on the website for lead generation and attracting users to engage with their offline services and transactions. However, the current user flow through the website channel is limited.
- Design Goals
Solution
Through website redesign, we aim to provide a positive user experience to convert website visitors into engaged users who will contact our offline teams, thus driving conversions for our offline business.
User Flow
After
