B2C

Modular Multi-brand framework

TYPE

UX-UI Design

YEAR

2023

ROLE

COMPANY

HyperIn

UX Designer

Modular design framework to provide a highly customized home view experience that supports customers’ key use cases and branding needs.

▪️ Team

Product manager
UX Designer (me)
Mobile developers
Costumer success

▪️ Context

The native mobile apps are part of the Connect B2B2C ecosystem. The project was developed in cooperation with Shopping Center Ratina and is being used in major shopping centers across Finland.

▪️ Problem

Branding customisation relies only on colors and images that not fully support the brand expression

All app looks quite similar, our customers think is difficult to create differentiation

The home view is static with several usability issues with an outdated feel&look

▪️ Solution

Create a modular design framework to provide a highly customised home view experience that supports customers’ key use cases and branding needs.

Framework flexibility: Make the framework flexible that support brand attributes

Control: Give control over how our customers want to define the experience of the app

▪️ Discovery

Understanding the current state

To understand the current scenario I worked closely with PM and Account Manager to identify the most relevant business cases, what the customers want, and check frequent requests.

▪️ What I did

Competitor analysis
I conducted competitor research to better understand the broader market landscape. Apps from Macao and Dubai stood out for their higher degree of personalization and more visually appealing designs.

User feedback
I took a closer look into user feedback we had received from our costumers.

Customers key kases

▪️ Cases

Marketing-Campaign focus: Loyalty retention programs and campaigns to attract new users. Marketing heavy focus.

Events - Hub focus: Invite consumers to the premises.

Silent case: Centre does not have a marketing - brand focus approach.

▪️ Ideation

Understanding the current state and usage contexts of the app helped me develop a clear vision and define a strong foundation for the time to come.

▪️ Exploring

Ideation
To communicate the personality of the new home-view framework to our client and team, I developed a set of design principles. These describe key attributes the app should account for both customers and consumers.

▪️ Exploring

Modules definition
To design the modules, I had to work with certain limitation and specification that came from the Portal (where all data was host). My mission was to design components that were highly configurable. I worked closely with PM to define requirements for each module to piece together the framework’s anatomy.

Setting the design direction
The first thing I did was explore various design options to determine which ones would be the most scalable and flexible. I was looking for - How does the user discover content? -How to structure the modules? How to integrate the framework with the overall navigation?

▪️ Iteration & validation

Concepts were taken further and with few rounds of iterative feedback with Ratina we landed on a version that was well liked.

▪️ Prototype

I aimed to make quick UI prototypes to work collaborative with one of our clients “Shopping Center Ratina”. We wanted to understand if our concept solve their needs and help to reflect their brand expression. In total, we had 2 iterations that helped us to define a solution that truly solve our customer needs and expectations.

▪️ Testing

Version 1:
For customers was important the campaigns and loyalty program. That was something they wanted to be shown first. Their goal was to attract consumers with their amazing benefits.

Version 2:
They still wanted to highlight even more the campaign section and have a welcome for they loyalty members.mers was important the campaigns and loyalty program. That was something they wanted to be shown first. Their goal was to attract consumers with their amazing benefits.

Multibrand system structure

Scope was a big factor here. At this stage in the game, we did not have enough development power to build a design system from scratch. We decided to use an open source design system to help us build and scale the framework.

M3 design system by Google was our saviour. The custom and flexible design attributes fit perfect in what we needed, and the deign tokens helped us scale and adapt each shopping centre’s themes.

Solution

Bringing it all to life

I was already familiar with the branding for each shopping center as I also being supporting their brand in other channels. So going into this project, I had a ton of guidelines and resources at my disposal.

Module components

Each module has a theme component. These reflect flexible style attributes, configurable content, and image ratios.

Brand expression

With the new framework, customers can define their brand attributes like colors, typography, shapes, and style to match their expression.

Flexible content

Customers can define the order and modules they want to display. They can dress the home view to match their current campaign or display useful information for the end-consumer.

Dealing with edge cases

In some instances, I used icons to enforce the message and make it more commercially appealing.

Takeaways

Until this day April 2023, the project is still in implementation and we are planning to lunch the Framework this summer.

I had a lot of fun in this project, as I also had the opportunity to conceptualize a core feature product from scratch and influence a design system approach to the team where we were able to iterate and implement at a fast speed.

Modular Multi-brand framework

UX-UI Design

2023

HyperIn

UX Designer

Modular design framework to provide a highly customized home view experience that supports customers’ key use cases and branding needs.

▪️ Team

Product managerUX Designer (me)Mobile developersCostumer success

▪️ Context

The native mobile apps are part of the Connect B2B2C ecosystem. The project was developed in cooperation with Shopping Center Ratina and is being used in major shopping centers across Finland.

▪️ Problem

Branding customisation relies only on colors and images that not fully support the brand expression

All app looks quite similar, our customers think is difficult to create differentiation

The home view is static with several usability issues with an outdated feel&look

▪️ Solution

Create a modular design framework to provide a highly customised home view experience that supports customers’ key use cases and branding needs.

Framework flexibility: Make the framework flexible that support brand attributes

Control: Give control over how our customers want to define the experience of the app

▪️ Discovery

Understanding the current state

To understand the current scenario I worked closely with PM and Account Manager to identify the most relevant business cases, what the customers want, and check frequent requests.

▪️ What I did

Competitor analysisI conducted competitor research to better understand the broader market landscape. Apps from Macao and Dubai stood out for their higher degree of personalization and more visually appealing designs.

User feedbackI took a closer look into user feedback we had received from our costumers.

Customers key kases

▪️ Cases

Marketing-Campaign focus: Loyalty retention programs and campaigns to attract new users. Marketing heavy focus.

Events - Hub focus: Invite consumers to the premises.

Silent case: Centre does not have a marketing - brand focus approach.

▪️ Ideation

Understanding the current state and usage contexts of the app helped me develop a clear vision and define a strong foundation for the time to come.

▪️ Exploring

IdeationTo communicate the personality of the new home-view framework to our client and team, I developed a set of design principles. These describe key attributes the app should account for both customers and consumers.

▪️ Exploring

Setting the design directionThe first thing I did was explore various design options to determine which ones would be the most scalable and flexible. I was looking for - How does the user discover content? -How to structure the modules? How to integrate the framework with the overall navigation?

▪️ Iteration & validation

Concepts were taken further and with few rounds of iterative feedback with Ratina we landed on a version that was well liked.

▪️ Prototype

▪️ Testing

Version 1:For customers was important the campaigns and loyalty program. That was something they wanted to be shown first. Their goal was to attract consumers with their amazing benefits.

Version 2: They still wanted to highlight even more the campaign section and have a welcome for they loyalty members.mers was important the campaigns and loyalty program. That was something they wanted to be shown first. Their goal was to attract consumers with their amazing benefits.

Multibrand system structure

Scope was a big factor here. At this stage in the game, we did not have enough development power to build a design system from scratch. We decided to use an open source design system to help us build and scale the framework.

M3 design system by Google was our saviour. The custom and flexible design attributes fit perfect in what we needed, and the deign tokens helped us scale and adapt each shopping centre’s themes.

Bringing it all to life

I was already familiar with the branding for each shopping center as I also being supporting their brand in other channels. So going into this project, I had a ton of guidelines and resources at my disposal.

Module components

Each module has a theme component. These reflect flexible style attributes, configurable content, and image ratios.

Brand expression

With the new framework, customers can define their brand attributes like colors, typography, shapes, and style to match their expression.

Flexible content

Customers can define the order and modules they want to display. They can dress the home view to match their current campaign or display useful information for the end-consumer.

Dealing with edge cases

In some instances, I used icons to enforce the message and make it more commercially appealing.

Takeaways

Until this day April 2023, the project is still in implementation and we are planning to lunch the Framework this summer.

I had a lot of fun in this project, as I also had the opportunity to conceptualize a core feature product from scratch and influence a design system approach to the team where we were able to iterate and implement at a fast speed.

HyperIn, Indoor map editor tool • B2B

HyperIn, Document system tool • B2B

Let’s connect

Product manager
UX Designer (me)
Mobile developers
Costumer success

Competitor analysis
I conducted competitor research to better understand the broader market landscape. Apps from Macao and Dubai stood out for their higher degree of personalization and more visually appealing designs.

User feedback
I took a closer look into user feedback we had received from our costumers.

Ideation
To communicate the personality of the new home-view framework to our client and team, I developed a set of design principles. These describe key attributes the app should account for both customers and consumers.

Setting the design direction
The first thing I did was explore various design options to determine which ones would be the most scalable and flexible. I was looking for - How does the user discover content? -How to structure the modules? How to integrate the framework with the overall navigation?

Version 1:
For customers was important the campaigns and loyalty program. That was something they wanted to be shown first. Their goal was to attract consumers with their amazing benefits.

Version 2:
They still wanted to highlight even more the campaign section and have a welcome for they loyalty members.mers was important the campaigns and loyalty program. That was something they wanted to be shown first. Their goal was to attract consumers with their amazing benefits.