.png)
31 Boulevard
Shopping Center Application
EBAC Certification Project
Target
To build the platform for the "31 Boulevard" shopping center, whose main purpose is to create customer loyalty and attract new consumers.
There are no specifications, so it is a project open to proposals.
Position
Product Designer
User Research, Interaction, Visual Design, Prototyping and Testing.
Challenge
Identify the users, combine mall activities with digital functions and make a practical application for each customer's requirements, providing a superb multi-sensory experience.
Project Timeframe
2 months
Only design area without development.
Solution
I worked on the "31 Boulevard" project as a Product Designer to create an application that would be part of the customer's experience in the mall, accompanying them through the whole process:
Connecting with friends or family to plan the day of their visit, adding the stores they want to visit in a fun and dynamic way, having access to a rewards program, information about accessibility (elevators, wheelchairs, baby changing stations, pet stations, etc.), news about the place, among others.
Process
.png)
Knowing the User
I went to a shopping mall and approached the user directly to observe their activities, how they did them and why they did them.
I was able to come to the conclusion that:
​
-
Approximately 80% of the users were young people between 15 and 35 years old.
-
Approximately 10% were older users accompanying the younger ones.
-
Approximately 10% were children.
-
Most are accompanied by at least one person.
-
Many families attend with children and dogs.
-
The average person buys a coffee or ice cream and then walks around the plaza, but does not enter the stores.
-
A large number of people alone stay in a café with their computer.
User Interviews
I interviewed some mall attendees in order to understand their needs, make an empathy map, as well as proto-personas.
The interviews provided the following insights:
​
-
Our users' economy has been affected by multiple factors such as the pandemic and inflation, so they are more careful with their spending and plan their purchases better.
-
They enjoy going to an entertaining place where they can enjoy with their family or friends, where they have everything in one place without having to worry about their safety.
-
The hardest part is agreeing with their family or friends to meet, and deciding what to do.
​
Based on this information I created this empathy map:
Empathy Map
User Personas
The User Personas are inspired by the tastes, needs and personal experiences of the people interviewed.
Ideation
A brainstorming of information and functions for the application was carried out based on the user's needs; then, they were selected by categories and by color to facilitate their identification, giving the following result:
Heatmap
I transferred the above ideas by organizing them into a Moscow Diagram, to categorize them by the impact they would have versus the effort required to develop them; finally, a vote was taken with the team in Heatmap mode on the proposals that should be part of the first version vs. those that could wait for later stages.
Information Architecture
The information architecture was planned so that users can find the content in a simple and organized way.
Digital Wireframes
The Wireframes were made with a tablet and a digital pen. This gave me a better idea of how I wanted to design this platform and the information I expected to have on it, as well as easy access to the elements.
Low Fidelity Wireframes
After the Digital Wireframes I made the Low Fidelity Wireframes with which I tested the basic operation of the application.
High Fidelity Mockups
The mockups are the result of the information architecture, low fidelity wireframes and design elements brought together in this product.
Design Elements
In this section you will find the design elements I made for the application.
Colors
Typography
Buttons
Fill Button
Fill Button-Trailing Icon
Fill Button-Leading Icon
Outline Button
Outline Button-Trailing Icon
Outline Button-Leading Icon
Iconography
Cards
Vertical Directory
Horizontal Coupon
Vertical Coupon
Horizontal Coupon
Inputs
Visits Planner
Plan Entry
Activity Proposal
Activity Accepted
Friends
Add Friends
Add Friend to Plan
Friend Added
Notifications
Unread Notification
Notification Read
Chat
Received Message
Sent Message
Prototype Preview
These are all the interactions that were made for the prototype made with Figma.
High Fidelity Prototype
This High Fidelity Prototype is the result of the high fidelity mockups, as well as the interactions that were added and it is possible to interact with this prototype made with Figma.
Usability Testing
The usability test of the product was done with several users in which they had an estimated time of 20 minutes to complete the following tasks:
​
-
Search for a store in the directory and add it to favorites.
-
Search the list for a coupon and add it to favorites.
-
Plan a visit.
​
At the end of this test it was concluded that:
​
-
The action bar contained too many items and was confusing to use.
-
Users preferred to have direct access to their notifications rather than another item.
Before
After
-
The coupon cards did not have a nice color.
Before
After
-
The profile picture was too big.
Before
After
Learning
Working on this project has been an exciting and challenging experience. Being my first design as a Product designer I found my passion, that connection that we achieve with the user, since we not only think about what can be beneficial for the company but in their needs and their experience using the product I am creating; in the same way, observe how little by little it comes to life and goes from being an idea to a reality that impacts.
​
The biggest learning I had was:
​
-
The user always comes first: it is extremely important to listen first hand to what they want, and be sensitive enough to know what they are thinking and make a project that not only meets their needs but exceeds their expectations.
-
Mastering software like Figma: it is very important to have the knowledge of Figma as it is the tool that helps us to prototype and share what I have in mind in a way that is accessible and easy to understand for everyone.
-
All elements must be carefully planned: To obtain excellent results and minimize errors, so that the work is perfect.
I hope you enjoyed this project as much as I did, thank you for coming this far with me!