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
The First Screen
6 weeks
Context
Kick Off
Enhance emotional connection
Visual Expression
Iteration 1
About Us
Deepen user memory points and brand identity
02. Users contact offline team( by form, tel or email)
01. Lack of key info that would enhance user trust (services, products, and brand):
It fails to showcase the service professionalism and product quality
Based on user research and competitive product analysis results, we selected appropriate key information that enhances users’ trust.
01. Product Information
Teammates
Oliver Billinge-Design Lead
Daniel Pryer- Head Copywriter
- After (A part of)
- User Interview
Paul Glazzard- Developer
Maya- Marketing
Research
Interviewee: 5 Interviewees, 25-45 years old, who have a certain level of income and are interested in purchasing high-quality watches.
In Conclusion
Define
02. So, users will seek this information on the website to
build trust in the brand:
03. But, users think this website:
- What Info Do Users Want To See ?
Provide relevant information about product details and services to enhance customer understanding and confidence, assisting them in making informed purchasing decisions.
02. Brand Information:
In collaboration with the marketing team, we reviewed the information displayed on the website and clients’ introduction to identify feasible information that showcased brand reputation and reliability.
Services (Which Brand We Offered)
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.
Information Architecture
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.
- Fonts
Elegance and readability
Immersive
Interaction
We Choose This Version
Before
Classic
03. Provide services and complete transaction offline
- Why Need To Re-design?
Defined Visual Style
Based on the results of the competitive analysis, we determined colors and fonts that highlight luxury based on brand positioning and competitors. and after communication with our clients, we have selected black and white as the primary colors, with the brand color (yellow) as the accent color. We also utilize the elegant font (Casanova Serif Display) and the highly readable font (Area Extended).
Layout
Before
After
- Buttons
Concise and easy to understand
- 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.
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 connect with offline teams
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.
Final Design
User Testing Feedback
Can users independently complete all operations ?
Enhanced visual richness and dimensionality
Fast delivery of brand services
Enhance the atmosphere and immersive experience
More direct and predictable switching navigation
Hi -Fi Prototype Design Strategy:
- The challenge we met: Lack of brand uniqueness
In this process, we identified limitations in showcasing the brand's professional background information, lacking elements that highlight the brand's distinctive characteristics, resulting in a lack of uniqueness and memorability.
- To further enhance the brand competitiveness
To address this issue, I closely collaborate with the content team, marketing team, PM, and clients to collectively explore the captivating aspects of second-hand transactions and define the brand's story, values, and mission aligned with the brand's philosophy.
- Crafting compelling brand stories and conveying brand values
We package the brand's unique characteristics by emphasizing expressions that evoke emotional resonance, such as history, heritage, and memories. Through the skillful use of storytelling throughout the design process, we aim to enhance the emotional connection with users.
Slogan
“Time’s Whispers, Unveiling Stories Untold.”
Mission
History Memory Inherit
Value
Our mission is not just to sell watches, but to carry forward the countless unique moments that timepieces hold, awakening people's appreciation for time.
Outstanding Cherish High-quality
- By creating interactive touchpoints, I aim to create an immersive user experience that enhances user memorability.
Showcasing The Product Brand:
Taking into account maintenance costs and scalability, I focus on showcasing the product brand to enable users to quickly grasp relevant brand information.
Animated Transitions & Interactive Touchpoint:
By incorporating animated transitions and interactive touchpoints for each section, I enhance the immersive and seamless user experience.
With reverence for time and a profound love for the art of watchmaking, we ignite passion behind every timepiece. We are dedicated to delivering extraordinary watch experiences, crafted with the highest quality and exquisite craftsmanship.
The Positive First Impression:
Based on research conducted by the marketing department on user attention span, I employ a 5.5-second animation upon entering the screen to swiftly capture users' interest and establish a positive first impression through immersive visual aesthetics.
Immersive And Continually Experience:
With a user-centered layout and interactive animations, I aim to create a immersive and continually experience for users.
Overlapping Scroll Effects, More Immersive:
I also consider accessibility and carefully utilize brand colors, leveraging color variations and overlapping scroll effects to provide a more engaging and continuous visual experience throughout the browsing journey.
When Hovering
- Offline and Online Collaboration:
Comprehensive Strategy for Enhancing Brand Competitiveness
To strengthen our brand's competitiveness, we have implemented a comprehensive strategy. After defining unique brand characteristics, we present the brand in an emotive manner, emphasizing continuity and nostalgia. Our offline team creates customized cards for each pre-owned watch, sharing the stories behind the brand and passing on the memories to the next customer. This approach not only deepens the emotional connection between the brand and its customers but also reinforces brand awareness and influence.
" This watch, it’s the first one in my life, accompanying the arrival of my son. I used it to record every minute of his growth, witnessing his first steps, his first words. For three years, it has been on my wrist, emanating warmth and precious memories. And now, I pass this love on to you, hoping that you will cherish it and continue to capture your own special memories."
Enhance User Trust
Whether users can enhance their trust in the brand through the information and visual expression conveyed by the web page ?
- 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.
- Persona
Based on user interview results, I developed user personas for different age groups and characteristics, including trendsetters, lifestyle enthusiasts, and business professionals.
- User Journey Flow
01. User Trust:
is the main factor affecting second-hand sales
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
Unprofessional: They doubt the quality of the goods and the reputation of the merchants
Fake: By the overall visual feel of this site, users think they are not selling genuine products
Insights
- Poor brand image on the page design
We found that poor brand image on the page design conveyed an unprofessional and low-quality brand image to consumers, causing a crisis of trust among consumers
Enhance browsing experience
Purchase/ Sell Process
Increase predictability
Increase user trust
Quality Assurance
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.
02. Poor visual sense that users feel fake :
It does not align with the brand's luxury market positioning.
- Design Direction
- The Challenge We Met
Faced Design Constrains
- Solution:
Constrains
User Flow
MVP Testing
Brainstorming
Exploration
Lo-Fi Prototyping
Reshape the brand image by improving the information delivery and visual representation to enhance user trust and encourage their willingness to engage with our offline team.