The aim of this project was to hinder the discomfort of the daily mall visitors who struggle with the crowd from the malls, who have a tight schedule and don't have enough time to check each shop looking for a specific item, This app would allow them to check the current products from the shops, book them to try them on later or order them directly.
Roles played
Building the Persona
In the image below you can see one one of the three personas created based on the survey and interview results (83 answers). After analyzing the answer we noticed three answer patterns fitting for three age groups (18-25, 26-32, 33-53 yo). We attributed to it personality traits, preferences and other personal information creating a sum up of the answers of the same pattern.
-1.jpg)
For a better resolution click on
User Journey
On the board below you can see one of the user journeys in which I created a basic scenario illustrating the usual experience of the persona when wanting to go shopping. I tried to describe each step in great detail, add all the media and resources he interacted with, and the moods he went through. At the very end I came up with ideas for the app that could make the user's experience more enjoyable and tried to analyze the hypothetical impact of these app features.
For a better resolution click on
User Flow
Activities perfomed
Individually
-
Research
-
Interviewing potential users
-
Analyzing the survey results (83 answers)
-
Creating user journey maps
-
User flow
-
Sketches
-
Wireframes.
As a team
-
Brainstorming
-
Setting the aims/focus
-
Creating surveys and forms
-
Creating interviews
-
Creating personas
-
Ideation
This interface was created together with another colleague during my study at ,,Școala informală de IT". As part of the team I came up with the problem and the solution, I organized meetings and I kept our work on track with the users needs.
For this part I tried to create an entire map of the app. I included parts for log in/sign up, store browsing and payment process. To understand better how the app should be organized I studied similar apps and websites such as Glovo, Bolt, and multiple online shopping websites. As a result of the research and interviews, me and my team got the insight that many people (especially the elder users) prefer to visit independent stores/businesses/boutiques, and therefore we agreed to split the product/shopping section into two branches, namely "Mall" and "Independent businesses".
-1.jpg)
For a better resolution click on
Sketches and Early Designs
In this part of the project I got inspired by other UX designers form Dribble, and also I studied different similar apps like the one I'm creating such as Glovo, Bolt, the mobile Sinsay website, H&M app and even Whatsapp.
.jpeg)
.jpeg)
Style Guide
The style guide went through numerous adjustments as the I was building the interfaces. At first I chose as primary colors a range of different shades from yellow to red, but then I narrowed down to the once you can see in the image below. I built the secondary color palette as I was doing changes on the primary ones, and I added the gradients to create lighter frames. Also in this part of the project I created the text styles (I used the fonts Roboto-medium and regular and Rowdies-regular), I chose the icons and I designed the main and secondary buttons.
The biggest challenge was to create the like button, and by doing this I got more comfortable with the smart animate option from Figma and also I learnt some new tricks.
Designing the interface
I have to say that I designed the entire app on my own in Figma based on the sketches and getting inspired from other apps. While adding the images I took into account the copyright aspects and I downloaded them from Pexel, a free content page where artists and content creators give full consent to the public to use their work. Also, I created components and layouts to work faster, easier and more organised.
Flows and final product
I created screens for most of the sections of the wireframe, but since many of them look alike I decided to present in the videos below only two flows (one main flow and one secondary flow) which I believe represent a good overview of the entire app.
Flow 1
This is one of the main flows and presents the journey of an user who is interested in checking out the products available at the mall in the fashion section. You can see each step from opening the app and logging in to ordering and receiving the item.
Flow 2
This is the secondary flow and presents the journey of an user who wants to check out the settings, the profile and adjust the location.