Reyaz Streetwear
As part of my User Experience and Interface Design course at UMGC, I was required to create a working prototype of a website of my choosing, by completing the entire UX design process, starting with user research and working through to the final prototype. My process is shown below.
01
Introduction
Reyaz Streetwear is a streetwear clothing business that sells clothing targeted towards adults between the ages of 18-35. I created personas based on user analysis, analyze potential tasks users may complete on the website, and incrementally create sketches, a storyboard, and wireframes.
02
User Personas
Utilizing the user research, I created user personas to illustrate the potential users and understand their motivations and frustrations. Shown is one of the multiple user personas created.
.png)
03
Task Analysis
In order to understand what to include in the sketches and wireframes, I listed out the main tasks a user would engage in and divided them into individual actions that I could design the experience around.
.png)
04
Sketches & Storyboard
Using the task analysis and problem-scenario analysis, I sketched out some potential designs by hand. The sketch shown to the right is the one I decided to move forward with. Using the basic design and one of the problem scenarios, I created a simple storyboard to illustrate a user's experience through the site.
Prototype
Using Figma, I created a functional prototype based on the wireframes. The prototype includes all pages and connections needed to complete the tasks determined during the research phase.
.png)
05
Wireframes
Before beginning my prototype, I created low-fidelity wireframes for all pages, using just simple shapes and icons.
.png)
06
07
Usability Testing
After completing the prototype, I asked two peers who fall in the initial target group to test based on learnability and usability. I compiled a post-questionnaire to record the results. I was able to find three key usability issues of varying degrees of severity, that could be fixed in the next iteration.
.png)