eCommerce Website Redesign
Redesign eCommerce website for the world's children's safety market leader.
Brand
CYBEX is a Germany-based international brand of baby car seats, furniture, and strollers, with a strong focus on safety and today's urban lifestyle.
The main brand features are the combination of unique Design, unsurpassed Safety and quality, and intelligent Functionality. Millions of happy customers all over the world and numerous awards prove that this strategy works.
Project goal
Provide competitive strategy that highlights strengths and immersive user experience with high-end design and customer guidance features.
Team
Engagement Manager, Project Manager, UX Director, UX Designer Lead (me), 2 UX Designers, UI Director, UI Designer Lead, 2 UI Designers, Business Analyst, Solution Architect, Development Lead, backend developers, frontend developers, and QA.
My Role & Achievements
As a UX Team Lead I provided research, conducted deliverables, created prototypes, handled client's feedback, and provided technology team consulting, documentation and implementation review.
Though the client team was in Germany, our UI Director and project management in UK and technology team in Colombia and Ukraine, I've managed a successful collaboration.
Achievements
-
Using the Value Proposition Canvas framework to marry UX Personas with market UX research to find the most efficient strategy.
-
Optimising team collaboration on the prototype with components reuse and separating content and design editing. This approach allowed us to save up to x10 time on urgent editing for big amount of components (e.x. filtering options on the Product listing).
Project Results
Successful launch in time and budget frames.
Revenue and loyalty grow, and Card abandonment reducing. Return number decreased due to the guided product selection and proper product size and feature presentation.
The stage aims to explore the market, understand the customers and the product and ideate the best user experience for the website. Stages result - clear functional, look&feel requirements for the solution.
In the Design stage, we clarified the client's vision (as an expert in her product and audience), and technical limitations for the solution. We created Prototypes based on initial requirements, and verify the interface with the client and his customers' representatives.
After the approved prototype went to implementation, the UX team consulted UI designers and worked over the cases for implementation. Informal duties of the UX team also included facilitating team and client collaboration.
Discovery
Market & Competitors Analysis
Besides the overall market and niche analysis, my team and I provided a deeper UX investigation of competitors. It helped us to understand, what are the customers' expectations, and what pain points are not yet covered, so we could provide a competitive experience strategy.
Understanding the Customers
To collect the data we studied Google Analytics data, customer reviews on the current website and other shops, and CYBEX subscribers on Instagram, and conducted a series of guerrilla interviews with product customers and prospects.
Value Proposition Canvas
We used the Value Proposition Canvas framework to see the product's value and opportunities from the user perspective and focus on customer demands.
The tool helped to understand in detail, which site features should be taken into consideration to create a better experience for the customer.
Ideate over Solution with the Client
The UX team presented research results, strategy propositions, references, and interface ideas to the client to collect feedback and verify the main aspects of the project. Business analysts with the support of the UX and Development teams gathered initial requirements into documentation. After work estimation and project plan approvement with the client, we jumped to the solution Definition.
Design
Luxury Experience
When creating solution prototypes, we strived to provide the best solution, which would not only satisfy the expected amount of information to make the buying decision but also appeal to emotions.
Premium look and feel, elevated functionality, club loyalty program and of course - focus on both parents and children comfort and safety.
Prototyping Approach
The team and I selected Axure RP as a main prototyping tool to provide the client with not only an informational architecture and visual hierarchy understanding, but also to demonstrate the interface behavior. Interactivity provided wider collaborative options when verifying flows with the customers' representatives. It also made the client team feel much safer and manage their expectations.
In the latest steps, interactive prototypes provided a user scenario toggle, so the client team and the development team could check the proposed component behavior and cases.
Global Elements
As a luxury brand website, the CYBEX header should “seduce customers by the beauty”, to give bright emotions and experience. Along with the outstanding design, the web pages' usability and verbal content were carefully conducted to maximize the effect.
Key features
-
Guided product search
-
Rich content
-
Direct access to the product page
Homepage and Category Landing Page
The Homepage was designed to provide the ultimate flow to engage the customer in product investigation, impress, and support the customer with the purchase decision. High-quality unique content and smooth interactions aimed to lead the user to more in-depth site exploration.
Key features
-
Close-up emotional photo and video content, highly esthetic images translate main brand values.
-
The sophisticated balance of text and images helps to decrease the customer's cognitive load and mark the proper interaction flow.
-
The collection context facilitates feeling the associated lifestyle
Product Listing
Listing page design aimed to support the user in finding the proper product and comparing the products.
Key features
-
Collapsable refinements help the customer focus on comparison and purchase decisions.
-
Featured products or promo content slots in the product grid help to decrease the cognitive overload for the customer and create a special engaging visual rhythm.
-
Sticky Filter panel for longer product listing
Product Explore Page
Inspired by the automobile and technology leaders' websites (such as Apple and Audi), we crafted an additional user flow with Explore Product page.
So the users who want to learn the product better now can dig deeper and focus on product features. This flow aimed to provide the user with additional inspiring product details to help make a purchase decision.
Key features
-
Engaging imagery
-
Features focus
-
Page sticky navigation
-
Direct access to the Shopping page
-
Product story
Product Shop Page
As a major part of the customers already know the brand and already made a decision, they would have a shortcut - a "Shop Now" page to select the product options and get it as soon as possible.
Key features
-
Vital product information to select the perfect product option
-
Features details
-
Compatible products and product recommendations
-
Product customization
Collaboration for the Best Solution
The UX team delivered prototypes to the client in packages with 2 iterations. For each package, after a careful feasibility check in close collaboration with the development team, we arranged the workshop with the dev team and the client team to present prototypes, and discuss the solution.
This workflow allowed us to be on the same page with the dev team and the client, manage expectations and meet the budget and timeframes.
Technical Collaboration
Design and Development, working together
The major problem of a beautiful design is not the usability, feasibility, or marketing goals achievement. Implementation is the problem. Often the website in production does not meet design ideas, documentation details, and client vision. To avoid this process issues the CYBEX redesign implementation was developed with UX Designers' support and consultancy.
My work as a UX Team Lead for Technical Collaboration stage covered:
-
UI layouts review
-
Behavior cases consulting
-
Functionality documentation review
-
Consultancy for the edge cases elements behavior
-
Facilitate collaboration between teams on Design solution clarification and implementation
As a result, the website launched in time and made everybody happy: the client, the team, and of course, the amazed customers.
