Return

Return

Return

REDESIGNING PRODUCT FOR A LEADING PROPERTY DEVELOPER

Supercharging exploration and motivating purchase for retail shoppers

Supercharging exploration and motivating purchase for retail shoppers

DESIGN SYSTEMS

UX EXPLORATION

UI EXPERIMENTATION

OVERVIEW

Following the launch of a new brand direction, a leading property developer sought the help of frog design to revamp their digital shopping centre experience

Following the launch of a new brand direction, a leading property developer sought the help of frog design to revamp their digital shopping centre experience

DISCLAIMER: In order to protect client privacy, the full extent of the project will not be disclosed and designs have been altered.

Customers at the helm

Along with the lead designer I had to figure out a way for customers to navigate the website in ease and get to the information they want immediately.

Shop-lifting

Along with the lead designer I had to Buff up the product's look and feel to align with the new brand direction and increase traffic for customers.

Role

Product designer - UX/UI Conceptualisation, UX/UI Research, UX/UI documentation, workshopping with stakeholders, interaction design, creating variable components, adding components to design systems, rapid prototyping

Team

R.W - Project manager

M.O - Lead Product designer

Me - Product designer

Timeline & Status

Jan 2024 - March 2024 (3 months)

Tools Used

PROBLEM

Navigating around the online shopping centre experience was a challenge because of the limited visibility of important information, crowded architecture and static centre updates

Navigating around the online shopping centre experience was a challenge because of the limited visibility of important information, crowded architecture and static centre updates

●

●

●

SOLUTION? (DRUM ROLL PLEASE)

●

●

●

HIGHLIGHTS

A retail experience with intention at the helm; easily manoeuvred by customers all while showing the centre at its best.

A retail experience with intention at the helm; easily manoeuvred by customers all while showing the centre at its best.

COMPONENTS SHOWCASE

INTERACTION DESIGN

PROBLEM

Through user research we understood that the client's customers had to navigate a crowded architecture; filled with inconsistent and static information.

Through user research we understood that the client's customers had to navigate a crowded architecture; filled with inconsistent and static information.

Context I had before the workshop. The digital experience had not been update in 10 years and was missing a lot of best practice UX elements. Navigation was very cumbersome and information was stagnant.

No power to the people: Their current experience did not have any powerful way-finding tools. You had to exhaust the mega menu just to find a single store.

A website that's slowly dying: The customers were visiting less and less. This is bad for the business at it mean there will be less traffic to the store.

No alignment on brand: To bring p to chops decade old product that did not align with the current brand. There were not many best practice UX elements.

GAME PLAN

In short, make it easy for people visiting the shopping to get to the information they want and excite them of the offerings to drive conversion

In short, make it easy for people visiting the shopping to get to the information they want and excite them of the offerings to drive conversion

North-star

Doing it the frog way

Create a journey as if it was an exciting story and replay it back to the users and customers the same way.

Out of the box thinking

Bring in ideas that can tackle a purpose well but just crazy enough to make a difference.

Quality Assurance

Bring designs consistent with their design system, multifaceted, developer-friendly and documented well.

APPROACH

Surveying the landscape: Figuring the root causes of inefficient navigation and traffic dropoff through workshopping.

Surveying the landscape: Figuring the root causes of inefficient navigation and traffic dropoff through workshopping.

We figured it was best for us to talk directly with clients so that we can gain a deeper understanding of the overall landscape so myself and the lead designer set up multiple design workshops where we divided the activities to make and facilitate so clients can raise any flags and request for the new experience.

Discovery

Design

Ideation

Ideation

Design

Discovery

To hollistically gauge the experience, we workshopped to find the user goals and pain points.

To hollistically gauge the experience, we workshopped to find the user goals and pain points.

We set up some bubbles of the user goals that would commonly factor into the visiting the experience with the help of a stakeholder that managed the analytics. Then we made the stakeholders highlight the important ones.

Through this activity we found that there was a heavy emphasis on the simple things…

Through this activity we found that there was a heavy emphasis on the simple things…

Let me find things quickly and easily

Find opening and close times
Find a store
Find offers
Locate a store
Navigate the centre

Keep me updated on matters regarding the centre

Information is live
Information is updated
Information is consistent
Information is accurate

Now that we understand the user goals we conducted a current state analysis to see if the experience reflected it.

Now that we understand the user goals we conducted a current state analysis to see if the experience reflected it.

Along with their own concerns and requests the clients also raised some issues directly faced by their customer.

Their current experience was not at all bad by any means but they were missing a lot of UX best practises elements such as hierarchy and alignment. Information was also inconsistent and was a tad difficult to navigate around.

Important information was not available immediately

Either there was a dead end the flow or there wasnt a clear starting point users could begin with

A Treasure hunt for most

The internal architecture was messy and forced users to exhaust the mega menu.

Offers and events were not accurate

Information was very static and inconsistent. Sometimes even going missing.

Through the workshop we found two focus points.

Through the workshop we found two focus points.

FOCUS POINT 1

Information front and centre, keep it simple and quick.

Through the research we found a heavy emphasis on the simple things.

FOCUS POINT 2

Easy navigation for an easy experience - remove any complexity

These were concerns raised by both stakeholders and users of the product

GAP / EUREKA MOMENT

We discovered that navigation is king. By simplifying the architecture and putting way-finding front and centre, we can engage the customers better.

We discovered that navigation is king. By simplifying the architecture and putting way-finding front and centre, we can engage the customers better.

Their current architecture had seven main headings with content attached to it. It separated into the categories of what's on, stores, restaurants, events offers and amenities. It did not really follow a theme.

SNIPING FOCUS POINT 2

To streamline navigation we squeezed down the architecture into four key user intentions that will encompass the retail journey

To streamline navigation we squeezed down the architecture into four key user intentions that will encompass the retail journey

Following the inputs from the user goals and pain points from the analytics stakeholder, we also asked what were the most vital contents were to them from a business standpoint. What is most important for customers to see?

Plan your visit: Information on centre opening times and directions. Questions: Where is the centre located? What time is it open?

Shop in store: Store listings, opening hours, and navigation within the centre. Questions: What stores are in the centre? When are they open?

Experience: Other activities and events within the centre. Questions: What events are on at the centre?

Inspire: Content generated by Client A. Questions: Where can I find recipes?

Discovery

Concept Ideation

Design System

GAP / EUREKA MOMENT

Supercharging way-finding- A mini study on widgets.

Supercharging way-finding- A mini study on widgets.

Myself and the lead designer figured it was good to split off and tackle the other deliverables of the project. They, being more experienced with the redesign focused on setting up page narratives whilst I will focus on ideation regarding solving their pain points.

SNIPING FOCUS POINT 1

To shove the information the customers want to see in their faces so they don't have to think about looking for it.

To shove the information the customers want to see in their faces so they don't have to think about looking for it.

Figure 2B. Internal Architecture

Figure 2B. Internal Architecture

Figure 2B. Internal Architecture

Having purchased the newest iPhone. I had really been into the idea of the dynamic island as a way to quickly get information without disturbing the overall peace. I asked the lead if it was okay for me to implement this style

Ideally i'd wanted a swiss-army knife style widget that encompassed dynamic information as well as the four key intentions with extra stuff added. I took this very low fidelity wire-frame and showed it to the developers.

Very cool and novel idea, but we just couldn't get that kind of information (busyness and parking spaces) for this specific product.

Very cool and novel idea, but we just couldn't get that kind of information (busyness and parking spaces) for this specific product.

Honestly it was good for me to check with the devs before doing any further design. I also opted to not include location as it will be too much content and will just push them to be more confused.

GAP / EUREKA MOMENT

Now that we've largely wrangled the root cause. It was time to do some brand talk before we get designing; how do you want your future state to look like?

Now that we've largely wrangled the root cause. It was time to do some brand talk before we get designing; how do you want your future state to look like?

There was a new brand direction that the company wants to implement throughout their eco-system that boated fun and chic. A marketing stakeholder said it was the way to get people more engaged with content and drive ocnversion

Since they wanted a different and fun approach, I picked some competitors websites to analyse that I feel pushed boundaries in terms of interaction and visuals

Since they wanted a different and fun approach, I picked some competitors websites to analyse that I feel pushed boundaries in terms of interaction and visuals

  • Figure 2C. Inspiration 1

    Figure 2D. Inspiration 2

I consulted with the other frog designers to ask if it was okay for me to show them websites i thought were cool that was outside of retail they said it was a smart idea since a lot of retail websites are the same and it really hit the mark on being different.

One example was Porche's landing screen which had a clear focal point they wanted the customers to focus on highlighting a specific product. I was thinking this would be good in showcasing a featured store.

From this I was able to gauge 1 positive, 1 negative and 1 thing they'd like to see that wasn't included

From this I was able to gauge 1 positive, 1 negative and 1 thing they'd like to see that wasn't included

Funky interactions.

They enjoyed when there were cool animations and interactions between elements such as takeover scrolls.

In Your Face Visuals

When something was too big or in your face, the stakeholders felt it was a bit jarring and would like to avoid it

More details on certain pages

Although the visuals and interactions were nice they wondered how the information from their product would translate in this look.

Playing around with widgets looks

Concepts on content display/ gallery

Homepage new look concepts

Using an in-depth design system we were able to skip wire-framing via page narratives.

Using an in-depth design system we were able to skip wire-framing via page narratives.

It was here that I learnt about page narratives and how it basically bypasses the idea of low fidelity wire-framing if you had a design system in place. It blew my mind that we could work like this. The load of page narratives were split between myself and the lead designer

And jump straight into high fidelity designs whilst adding / changing up one or two components to finally give them three designs on a spectrum from safe to bold

And jump straight into high fidelity designs whilst adding / changing up one or two components to finally give them three designs on a spectrum from safe to bold

PROS: This version aligns most with the existing components and will allow us to build it fast. It also suits a more elegant feel to the overall experience

CONS: A tad reserved from the vision we had during the brand talk. It also does not have a floating widget that will streamline navigation.

PROS: This version aligns most with the existing components and will allow us to build it fast. It also suits a more elegant feel to the overall experience

CONS: A tad reserved from the vision we had during the brand talk. It also does not have a floating widget that will streamline navigation.

PROS: This version aligns most with the existing components and will allow us to build it fast. It also suits a more elegant feel to the overall experience

CONS: A tad reserved from the vision we had during the brand talk. It also does not have a floating widget that will streamline navigation.

PROS: This version is chic and modern whilst still keeping true to the company brand. It uses a moderate amount of components from their design system.

CONS: Clients said the colours are not favoured and it seems a bit overbearing for some customers

PROS: This version is chic and modern whilst still keeping true to the company brand. It uses a moderate amount of components from their design system.

CONS: Clients said the colours are not favoured and it seems a bit overbearing for some customers

PROS: This version is chic and modern whilst still keeping true to the company brand. It uses a moderate amount of components from their design system.

CONS: Clients said the colours are not favoured and it seems a bit overbearing for some customers

PROS: This version uses a lot of interactions and visuals that the clients liked. It also highlights a lot of content while having the floating widget.

CONS: Clients said accessibility might be a problem. and that the marketing team may have trouble finding assets to present on this version. It also uses the least components from the design system. Which makes it hard to build.

PROS: This version uses a lot of interactions and visuals that the clients liked. It also highlights a lot of content while having the floating widget.

CONS: Clients said accessibility might be a problem. and that the marketing team may have trouble finding assets to present on this version. It also uses the least components from the design system. Which makes it hard to build.

PROS: This version uses a lot of interactions and visuals that the clients liked. It also highlights a lot of content while having the floating widget.

CONS: Clients said accessibility might be a problem. and that the marketing team may have trouble finding assets to present on this version. It also uses the least components from the design system. Which makes it hard to build.

BLOCKERS

Differing perspectives and ways of working that gave us a rocky start

Differing perspectives and ways of working that gave us a rocky start

Blocker 1: The amount of activities in one workshop overwhelmed them and was an oversight on my part.

Blocker 1: The amount of activities in one workshop overwhelmed them and was an oversight on my part.

Whilst eager to start jazzing up the experience, our initial workshop was rocky. Clients, unfamiliar with our style of workshops, felt rushed which hindered session productivity. They were also unfamilliar with some design concepts which added time for me to explain further

So we compromised by restructuring our workshop cadences and running a quick figma session on making feedback loops more streamlined.

So we compromised by restructuring our workshop cadences and running a quick figma session on making feedback loops more streamlined.

1.

Sending agendas, tasks, reminders, and feedback requests to the client prior to our meetings to avoid delays.

2.

Utilizing the Figma comment system effectively, allowing stakeholders to provide input at their convenience, especially if they encountered difficulties during sessions.

Figure 2A. Asynchronous feedback via Figma comments

Figure 2A. Asynchronous feedback via Figma comments

Figure 2A. Asynchronous feedback via Figma comments

OUTCOME

Asynchronous feedback that allowed stakeholders, developers and designers to align without having any extra sessions

Asynchronous feedback that allowed stakeholders, developers and designers to align without having any extra sessions

Blocker 2: Perception of the initial direction was off the mark.

We ran a showcase of the three design versions and thinking they would gravitate towards the bold version…

We ran a showcase of the three design versions and thinking they would gravitate towards the bold version…

They didn't dislike any of the designs, more so they even praised that we gave them three options to choose from. However the head of brand said that the bold designs are Too bold and worried about the overall accessibility and new colours from the bolder versions. Worst case there are also development constraints we needed to worry about.

It turns out development wise-it was not feasible to be build in the time span so they favoured the safe version more. So we compromised by taking what interactions and element are developer friendly and integrating it into the safe designs.

It turns out development wise-it was not feasible to be build in the time span so they favoured the safe version more. So we compromised by taking what interactions and element are developer friendly and integrating it into the safe designs.

Once we got the green-light for the final concept direction, myself and the lead designer split the workload for the pages and below are the pages and interactions that I have made.

OUTCOME

A deeper understanding of the users branding and sentiments toward the desired outcome. That allowed us to piece together an approach that is easily built with the design system and by developers whilst also having the interactions that were favoured by the clients.

A deeper understanding of the users branding and sentiments toward the desired outcome. That allowed us to piece together an approach that is easily built with the design system and by developers whilst also having the interactions that were favoured by the clients.

SOLUTION

Final Designs

Find recipes and DIY crafts: This page invites customers to browse recipes and DIY crafts that they can make using ingredients that can be purchased in the centre - driving conversion.

A balance on visualising content: They want clear visuals but not so overbearing. So I opted for large boxes of content that displays a set number of such as 2:3. 3:4, 1:2. These ratios will be easilliy followed by marketing team

A balance on visualising content: They want clear visuals but not so overbearing. So I opted for large boxes of content that displays a set number of such as 2:3. 3:4, 1:2. These ratios will be easilliy followed by marketing team

A balance on visualising content: They want clear visuals but not so overbearing. So I opted for large boxes of content that displays a set number of such as 2:3. 3:4, 1:2. These ratios will be easilliy followed by marketing team

Way-finding made easy: Customer has access to the widget at all times which funnels them into the different intentions when visiting the centre. They are also given live information such as opening times.

Way-finding made easy: Customer has access to the widget at all times which funnels them into the different intentions when visiting the centre. They are also given live information such as opening times.

Way-finding made easy: Customer has access to the widget at all times which funnels them into the different intentions when visiting the centre. They are also given live information such as opening times.

A clean design that puts navigation at the helm that displays content in an exciting way whilst being very compliant with the design system.

A clean design that puts navigation at the helm that displays content in an exciting way whilst being very compliant with the design system.

We aimed to make the designs both glanceable and aesthetically pleasing, encouraging users to spend more time exploring the site. Crucial information was made easily accessible through a sticky menu and opening hours.

The stakeholders praised the new experience, which addressed all desired changes, including the incorporation of the new brand identity, intuitive navigation, and enriched content offerings. Despite the challenges faced, the project concluded on a positive note.

Chic and brand aligned design: The websites new design adopts a clean look that reflects a new brand Identity and familiarity.

Simple and intentional navigation: Users now explore with a goal in mind, able to access crucial information in mere seconds.

Engaging and user-first experience: A successful pivot from information to immersion. The experience takes the user on a journey with engaging interactions and intuitive pathing.

Documenting components and making sure it is multifaceted before handover.

Documenting components and making sure it is multifaceted before handover.

This makes sure devs as well as other designers know how a component works and understands any unique interactions it has. Documenting components will allow for a sustainable design system that is scalable and dev-friendly.

The project outcome was an uplifted digital retail experience that eased the navigation of 150,000 annual shopping centre visitors.

OUTWARD RESULTS

Ask

Already making waves - informal testing showed an increase in 1.5x navigation speeds

From the analytics stakeholder tested with a few members of the company and showed at least 1.5x faster to get to information that was given.

INWARD RESULTS

Ask

Build time for the website will shorten by 1 week because of component reusability.

The developers projected they'd be able to implement the changes faster because the final designs were similar in looks to their other sector websites with the same components

RETROSPECTIVE

Some key takeaways

Post project I had a retrospective on the project where I asked the lead designers and project managers for feedback and what I can do better. Overall it was positives with some improvements requests around things that can be easily fixed.

Leverage Existing Work:
Utilising elements already in the design system saves time, ensures consistency, and minimises duplication of effort.

Take your time don't rush:
During the workshops it is best not to rush the stakeholders and when explaining your reasonings it is okay to take your time.

Adapt to different ways of working:
Recognise and accommodate varying work styles and levels of familiarity with concepts to ensure effective collaboration.

Attention to detail:
Thoroughly check and communicate requirements to avoid rework and ensure execution is precise.

Thanks for reading!!!

NEXT CASE STUDY

ADOBE PRODUCT CHALLENGE

VIEW

VIEW

CONTENTS

OVERVIEW

PROBLEM

APPROACH

BLOCKERS

SOLUTION

RETRO

About

Resume

About

Resume

dzakyayrosihan@gmail.com

LinkedIn

Created by Dzaky Rosihan 2024

dzakyayrosihan@gmail.com

LinkedIn

Created by Dzaky Rosihan 2024

Return