Modular Multi-brand app home view framework

A home view framework with a customized modular design supporting customer use cases and branding.

Company hyperIn

Year 2023

Role UX/UI designer

My Role

Conceptualisation and product strategy
Competitor analysis
User interface and micro-interactions
Prototyping (flows and interactions)
Dev handoff

Project Summary

Re-design the home view of the native mobile apps that are part of the connect b2b2c ecosystem. The project was developed in co-operation with Shopping center Ratina with the goal of create custom modular design framework that support key business cases and branding.

The goal

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

Our high-level design goals were to:

Make the framework flexible that support brand attributes
Give control over how our customers want to define the experience of the app

Current state

Understanding the current state.

Static UI not follow trends and website styles/design

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

Exploring -  Defining

Customer key cases

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.

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

Exploring

Conceptualization

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.

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.

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.

The Framework

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?

Testing our concept

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 3 iterations that helped us to define a solution that truly solve our customer needs and expectations.

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.

Version 3: Our happy customer wanted to fine-tune some graphic and branding specifications.

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.