Respect - Code » Blagoja Risteski

Respect-Code

successfully led the redesign of the platform in 3 stages.

01 The Product

a platform ensuring transparent communication of consumer products to transform supply chain data into credible consumer-facing stories.

02 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.

03 My Role

Discovery

Research

UX Design

UI Design

Wireframe

Prototyping

04 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.

05 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

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.

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.

06 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.

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.

07 Color Theme

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.

08 Stage 1 - redesign

Example of the final redesign of the transparency platform of HENNESSY.

Reusable sections

I started building the sections with the use of wireframes, in order to quickly get feedback from stakeholders and iterate further.

09 Secondary Reserach

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. 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.

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.

10 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.

11 Final Polished UI

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.

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.