________________.Role:
_________________Tool:
_____________Duration:
_UX designer
_UX researcher
_Pen and paper
_Figma
_June 2024
- Shopping in an online store is fun, especially when the app is easy to navigate -
A few days ago during my free time I was looking at clothes online and there was a store that caught my attention because I really liked their products. Since I was browsing from my cell phone I decided to download the mobile app to see the store better. When I downloaded the App everything seemed great, but when I clicked on some products, unfortunately there was no return button, which frustrated me because I wanted to see more products in the same category without always having to return to the home page.
It was here where I decided to start this project for the dedicated mobile app of the RIHOAS brand, where as a ux/ui designer I would like to add some changes to improve the user experience.
I must mention that your website is good and that the colors and designs seem very nice to me, and this project is only a suggestion of what I consider could improve its performance on many mobile phones.
My goal:
Contribute new elements to the original design of the RIHOAS mobile app, which improve the user experience.
My responsabiities:
User research, conduct interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iteration on designs and responsive designs.
- Understanding the user -
Being the user myself, I realized that many people would have the same problem as me: “not having a button to go back to the previous page”. To check it, I opened the application from different mobile devices, Android and iPhone.
I also asked a few people to download the app and see how it worked on their mobile phones, then conducted a short interview about what they thought of the navigation. Based on this interview I obtained the following results.
User Research: Pain Points
01.
Difficulty returning to the previous page.
02.
The currency type button is always present on every page, which is annoying and unnecessary.
03.
Always going to the top item bar and hamburger menu to find what users need seems a bit uncomfortable.
- Starting the Design -
I really think the Riohas app is good, so I didn't want to make big changes to the user flow, just improvements based on the data I got from the previous phase. So I started the creativity process by always observing the original design.
User Flow
I designed the following user flow adding the dotted lines to mark that it is always possible to return to the home page and also to previous pages, this is a key point that I took into account for the prototypes, since it is one of the main pain points.
Sitemap
Once I finished the user flow, I went on to create the sitemap, which basically I already had a clear idea of how to organize it thanks to the original App, I simply wanted to replace some elements such as the hamburger menu, to make user navigation easier .
Paper Wireframes
At this stage of the process I was mainly guided by the main points of the application; I had some ideas on how to adjust the icons, so I drew a navigation bar at the bottom of the wireframes, completely removing the hamburger menu found in the original app.
Refined paper wireframe
I used most of the paper wireframes I drew to make the digital ones.
Digital Wireframes
Once the paper wireframes were ready with the elements and changes I would make, I started using the Figma tool and created the digital wireframes in it, adding the brand's pink color as it is part of their identity.
Low-fidelity Prototype
When I finished all the sections of the digital wireframe, I made the corresponding connections for the operation of the low-fidelity prototype that you can try below by clicking here.
Low-fi prototype
- Refining the Design -
At this point I have not carried out a usability study since, being a different project from developing an App from scratch, I decided to add the color and images at once and move forward with suggestions for improvement. As I mentioned before, this is a project in which I suggest changes that can improve the Rihoas App, based on my own experience as a user of the App. Below I present what those modifications are.
Changes I Would Recommend Making To The Original App
Original App
Improvement suggestion
01.
On the main screen, the first change I would make to the original application is to replace the hamburger menu with a lower navigation bar, this way it would be possible to navigate more comfortably throughout the prototype. The second change to this section would be to add other buttons at the top to easily find items. And the last modification here is the color of the middle button, to improve readability.
Original App
Improvement suggestion
02.
In the secondary section "clothes" the first change I would make is to remove the currency type from the rest of the prototype, except the main page (since it appears in all sections in the original App).
The next change is to highlight the text on the buttons, for this I added a white box to each element to improve readability. And the last suggested modification is that the images have slightly rounded corners because it is more pleasant to look at.
Original App
Improvement suggestion
.jpeg)
03.
In the next section I would make three changes, the first and most important is to add a button to return to the previous page, because in the original App it is not possible. The next change is to relocate the filters button to the top right since this location is easier because many applications present it here and it is familiar to the user. And the third change is the sales announcement, which appears in each section, to keep the prototype cleaner I would leave this section on the previous page as shown in the previous image.
Original App
.jpeg)
Improvement suggestion
04.
By clicking on an item, it is possible to view it in a larger size. The modifications I would make is to add a button to put the product in the shopping bag without having to slide further down. I would also add a "like" button, so that the article is saved to my favorites.
Another button that cannot be missed is the return to the previous page and finally I added tracking circles on the main image to show that there are more images to see.
Broadly speaking, these are the changes that I think are important to modify within the App, this would improve the experience of many users.
Hi-fidelity Prototype
I am currently still working on the high fidelity prototype, as I want to improve the small details even more. However, you can see the progress of the prototype in the following video.
Usability Study
The next step once the prototype is finished with the suggestions made by me as a user of the App, the next step is the time to test what other users think, for this the necessary tests will be carried out through a study of usability that I previously planned in writing, defining objectives, KPIs and research. and questions.
To obtain the results of the usability study I will take into account the following parameters.
Parameters
Study type:
Unmoderated
usability study
Location:
Munich, Remote
Participants:
5 people
Length:
20-30 min
If you are interested in participating in this usability study, I invite you to contact me, I would also like to know what you think about the suggestions and changes that I would make to this App.
- Takeaways -
Reflexion:
Observing how other Apps work is enriching for generating ideas, I personally have learned a lot about how to improve my designs based on apps that I use frequently. I would not have been able to make my first prototypes if I had not tried different Apps, this means getting familiar with the technology we use every day. This project is an experience that I am proud to share with you because this way we can see different points of view of how a suggestion within the UX/UI teamwork can positively change the user experience.
Next steps:
Continue learning to improve my work, supporting the user so that their experience is more enjoyable, simple and fun when using the different devices they work with daily.
Continue with the usability study and make iterations and improvements with the results obtained.