Shoe Shopping App
Skor.
For my cource in "Graphic Design and Accessability" we were tasked with creating an app or website with a simple "check-out" option.
My goal beacame to create an accessable and user friendly Shoe Shopping App called "Skor." (or "Shoes." in English).
Scroll down to see how
I designed the app 🔽
The design process
Lo-Fi Wireframes
After creating very simple sketches I moved on to creating wireframes in Figma.
I wanted the user flow to be simple and recognizable. This meant that the user didn't have to think about how to use the app and they could instead focus on what they were there to do - buy shoes!
Allowing the user to see the different steps of the checkout process also meant the knew how far along they were and got a sence of progression. With a clear mark to confirm the order it becomes a satisfying user exeperience.
A/B
User testing
Testing a simple version of the app meant I could create different deigns fairly quickly and easily change what needs to be changed, saving even more time.
I tested the entire user flow to determine if the user flow made sence and the app was easy to use.
More specifically I wanted to test different ways to do the same thing and see what the users prefered (also called A/B-testing).
Test 1
How should different colors be displayed?
In order to determine what way of displaying different colors people prefered I tested two options:
1. Flat color in circles (left)
2. Small images of different colored items (right)
Test 1
Result
The users couldn't agree what version they prefered. One person even suggested doing both - so I created a design that combined them.
The result is a fairly unique design that is clear to more people.
Test 2
How should personal information be filled in?
To see how people wanted their personal information to be filled in I tested two different options:
1. The user has to fill in all information by theirselves (left)
2. The user only has to fill in their email adress and the information will be added automatically (right)
Test 2
Result
The users weren't sure which one the prefered at first. However, by the end most users settled on the second solution but liked the first way when they had to write all their information/edit it.
This also meant a kind of combination between the different. This is not something that I have experienced before, but it might have been a reason why I had such a hard time choosing between them.
The Graphic profile
For the graphic profile I wanted something modern and minimalistic, yet accessable and user friendly (as per my goal). The choices are very simple, but carefully choosen to achive a professional feel with a clear hiearchy.
Fonts
The fonts are simple sans serif fonts. The fonts fit the modern and minimalist feel of the company while being very readable.
I used webAIM's contrast checker to make sure the text was readable on the backround.
Colors
The pink accent color helps guide the user thought the app.
The black and gray colors were a great way to add hiearchy in the text.
The design process
Hi-Fi Wireframes
After considering the feedback from the user testing and creating the graphic profile it was time to create the more polished High Fidelity Wireframe.
