The Wallpapers App Design

The Wallpapers is a fictional ( but somehow) world famous rock band. I have created the design of their merchandise app.

The main intention is understand the users needs and pain points when purchasing rock merchandise and give them an easy, clean and friendly user experience overall. The product itself offers a wide variety of clothes and complements, besides band news, concert tickets and a membership with outstanding benefits.

By designing the app keeping it user centered, I aim to give a great user experience blended with a clear interface that allows the user to navigate safetly and feel confidence.

 Project overview

The main problem that I want to solve designing this app, is to offer the users a wide variety of products, designed for all audience, and, according to this premise, a digital product that everybody may enjoy and be able to use, no matter who they are or they are used to.

Accesibility is the key to follow in this design and the user the pillar that will make it come alive.

As the main UX designer, and even though is my first case study, I had to learn and develop all the steps in the designing process.

First by thinking about the problem that I want to solve and the goals that I want to achive. Then conduct users interviews and competitive audit and establish the starting point and the users that may be potential users of my app.

As part of the creative process, I also created the wireframes and mockups and their lo-fi and hi-fi prototypes to perform the usability studies needed to improve the app features, as well as some valuable feedback from real users.

 User research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. The group identified was working adults rock fans that use to go to concerts and likes to wear rock clothes and buy merchandise.

The initial assumptions about our users was confirmed, they wanted an easy app, with variety and to buy quickly, but the research revealed that not all of them was used to buy in apps so they need an user friendly product, reliable that offers more than just clothes.

The main pain points found are:

-Time: users want to buy quickly, don´t have time to explore or learn how the app works.

-Variety: users want something that offers more than what they are used to.

-Accesibility: not all users are used to buy by app and sometimes the lack of assistive technologies or user centered development make them give up.

Defining personas made easier to understand the users that I am designing for. As it shows, the main user for the app is not necessarily a young rock fan that always wears black clothes. That is a bias to avoid that will allow the design to be more inclusive and extensive to the whole potential audience.

Also I created a user journey with Enrique that shows all the improvements needed if I want to reach the goal.

 Starting the design

By drawing the paper wireframes I understood the importance of hierarchy and containers while designing to make the space clear and focus user´s attention on the product. I also gave them all the information needed to follow the user flow quickly. With all in mind I designed the digital wireframes, providing a user friendly navigation and clear labels.

I designed the digital wireframes of the main user flow that I wanted to test in the usability study and designed the low fidelity prototype for that purpose. I included the main page, both Sign up and Log in screens, Home page as starting point of the user flow, across the Hot Sales section where the user has to select an item that will take him to its own information screen and then add the item to the cart. Finally, review the cart and select the payment method to the confirmation screen.

https://www.figma.com/file/43yRszj4WXFchtEYPUHRWX/Untitled?node-id=0%3A1

 Refining the design

I conducted and unmoderated usability study with 5 participants testing the lo-fi prototype in Figma. Even though most of them found the navigation easy to follow, I found out a few crucial improvements.

Findings:

-Unable to choose the items wanted. Users asked for clearer labels to follow up the path, so I decided to give the user more intuitive labels and a help button to give them confidence when buying.

-No reliable payment method. Users asked for some information below the payment methods, as not all of them are used to them. I decided to add an info icon where all the information will display when clicking, giving them confidence to choose a reliable payment method.

-Lack of functions. During the study users were expecting to find some common functions and icons that they already know. To avoid the confusion I incorporated familiar icons, such as filters, to make the experience easier and faster.

1mockups.PNG

The mockups were designed following the findings of the usability study an the interface that I had in mind, according to the style imply in the users.

But still I wanted to conduct another usability study to avoid biases and lack of accessibility. That is where I found that the color scheme wasn´t clear enough to every user and may seem confusing to read, and the buttons didn´t look familiar to some participants. In order to avoid future issues, I changed the background color and the strokes, so the UI looks sharper and more accessible. Now the buttons seem more common to the user by applying border radius.

2mockups.PNG

 Conclusions

I would love to conduct a new usability study with the last Hi-Fi prototype to learn if the changes works and if I have to improve the accessibility of the app overall. Also I would like to make a new user research including different kind of participants to explore unique users and concrete situations.

I enjoyed the time learning and working on the design of The Wallpapers app. Even though is fictional, I have learnt a lot about IA, empathy, conducting research and studies, the designing tools and accessibility. Of course I know that I have to keep working and practice in my own projects, but now I have a starting point and I´m willing to work on my designing skills and my creativity.

Thank you for your time and…Let´s Rock!

lets rock.PNG
Siguiente
Siguiente

TechArs / Case Study