successfully led the redesign of the platform in 3 stages.
50% cost reduced
30% sales increase
25% drop rate reduction
The Product
a platform ensuring transparent communication of consumer products to transform supply chain data into credible consumer-facing stories.
The Challenge
redesigning the platform and primarily enhancing the experience on mobile devices, and finding one solution that will bring “custom or premium clients” together to one unified platform. Up until this point the premium brands required separate custom platform solutions.
My Role
Discovery
Research
UX design
UI design
Wireframing
Prototyping
What I Accomplished
successfully led the redesign of the platform in 3 stages. First I managed to find solution through design to bring all of the clients under one platform.Then I enhanced the mobile first experience by increasing the clarity in early stages of users adoption and finally increased the engagement by using storytelling.
Research
stage 1
User interviews
I conducted interviews with five participants, including both current clients and internal stakeholders. The interviews were guided by three predefined goals to ensure focused and meaningful insights.
Interview goal 1
What motivates the clients to continue with the transparent communication of their products?
Interview goal 2
What makes them request separate custom platforms for their brand?
Interview goal 3
What are the challenges that the business and development is facing because of the custom platforms?
Results
With all of the insights from the interview goals, and analysis of all of the different custom platforms, I noticed a pattern that kept coming up.
The pattern had a repeated use of sections that were different but had similar purpose and mostly usage of color accents to connect with the brand identity of the client.
Solution
The solution was very simple, I proceeded with designing sections that will be easily reusable for every client need (build as one platform) by using the tool “Contentful” in which without code our internal CSM teams can build these platforms with ease without need of additional developers and designers for every platform, using the pre-defined sections.
For the branding part I created a simple color theme that can be adjusted in Contentful to match the clients branding and Font themes with type-scale that is reusable but also can be personalized by changing the font family, that will achieve the look of the clients branding.
Result
50%
reduction in development and maintenance costs
From a UX perspective, this increased clarity enhanced client understanding and trust, leading to a more user-centered product offering, which resulted in:
30%
increase in sales
Wireframes
building the sections: from wireframes to polished UI
Reusable sections
I started building the sections with the use of wireframes, in order to quickly get feedback from stakeholders and iterate further.
Continuous Iterations
Improving the navigation
80% of the users are landing on the platform through scanning a QR code attached on the product, and 100% of those users are using mobile phones to scan the codes.
In most of the cases the users land on the specific product page, and the biggest friction point that I discovered is that they don’t have a way to navigate to the brand page and other products easily.
Color Theme
stage 1
Building the color theme
The biggest challenge in building the theme was ensuring it was simple enough for our non-technical and non-designer people to work with, while also effectively representing the branding standards for both standard and premium clients.
The idea was to start with one source color that can be adjusted to any color that would match the brand, and then using that source color to apply it on different surfaces with different opacity levels (from highest surface to lowest). Also adding accent color into the theme.
Using this theme our internal non-technical CSM (customer success managers) team was able to build many premium client platforms (technically under the same 1 platform), which significantly reduced the costs for development and maintenance.
Stage 1 - redesign
Example of the final redesign of the transparency platform of HENNESSY.
Secondary Reserach
stage 2
In order to develop a foundational understanding of the users' issues and the friction they experienced, I began by analyzing several Hotjar recorded sessions of users reaching a specific product page after scanning a QR code typically printed on the product.
Since most of the users (80%) come from scanning a QR code, rather then coming to the product page from the previously redesigned brand page, the focus was on the mobile first and welcoming landing page approach.
Assumptions
After analyzing the sessions I came to the assumptions that the users were landing on a page that didn’t clearly communicate the story of the product and were confused what were the next step they should take.The page they landed on didn’t had any explanations or clear steps the users should take which resulted in big rate of drop offs.
Testing against the assumptions
In order to confirm this assumptions I decided to get a baseline % rate of drop-offs at the early stage of adoption, with any rate over 60% will confirm my assumptions.With a plan to reduce the rate by 15-20% in the first quarter of developing the redesign.
By using the calculation: “Drop-off Rate (%) = [(Number of users at the start of the step – Number of users who proceed to the next step) / Number of users at the start of the step] × 100”,the calculation resulted in drop-off rate of 68%, confirming my assumptions.
building the sections: from wireframes to polished UI
Ideation & alignment - stage 2
Quick wireframes
Started working on quick wireframe ideas in order to get quick feedback from stakeholders, and also align with the tech team and the technical feasibility.
The idea was to build a separate welcoming page with focus on storytelling and add clear next steps that will reduce the drop-off rate.
To enhance user engagement and facilitate onboarding, I chose a timeline design for the storytelling component, creating an intuitive and visually engaging experience.
Final Polished UI
stage 2
After a few alignments and iterations, I arrived at the final polished design, which seamlessly integrates the storytelling component with the more technical and in depth supply chain analysis.
Stage 3
adding story mode summary with AI
Ideation and alignment
In order to increase the User Engagement further, I decided to enhance the story telling component by adding a AI summary story mode.
The aim of incorporating AI-powered story mode was to:
1. Enhance the Accessibility: Users can quickly grasp the main points without reading the entire story, making content more accessible to those with limited time or reading difficulties. 2. Time Efficiency: Summaries save users time by providing a concise overview, allowing them to decide whether to explore the full story or move on. 3.Improved Engagement: Easily digestible summaries can pique user interest and encourage deeper interaction with the content.
