B2B2C Mobile app
Modular Multi-brand framework
Modular design framework to provide a highly customised home view experience that supports customers’ key use cases and branding needs.
Team
Product manager
UX Designer (me)
Mobile devs
QA
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.
Challenge
Lack of flexibility. Branding customisation relies only on colors and images that not fully support the brand expression
Role
End-to-end design process including discovery, ideation, iteration, and supporting developers with implementation.
Uncover insights and translate concepts into the new design to gain alignment and drive decision making.
Prototype and testing variants with clients
Interaction, Visual design, Prototyping
what we learned
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.
Major issues
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
Shopping center 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.
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.
Exploring
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
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 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.
DESIGN SYSTEM
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
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.
Brand expression
With the new framework, customers can define their brand attributes like colors, typography, shapes, and style to match their expression.
Modules
Each module has a theme component. These reflect flexible style attributes, configurable content, and image ratios.
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.
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.