P2 — Define, Design, Test
The Project.
This is a personal re-design, user experience design project spanning two weeks. The original goal of this project was to select a local business and re-design its mobile website. This is a continuation of my P1 project, in which I evolve the hand-sketched wireframes to mid and high fidelity prototypes. The local business that I selected was Brave New World Surf and Snow — a local beach shop that carries surf, snow, and skate equipment, gear, and apparel.
With the consumer data and research I gathered in P1 in mind, I began my design process with re-visiting my hand-sketched wireframes and thinking about my four main features — Brand Sorting Filter, Price Sorting Filter, Customer Reviews, and Rent Gear Option:
Then, I created a mood board to begin my brainstorming for colors, themes, and imagery I wanted to include in my re-design of the business’s website:
Also, prior to designing, I took a look at competitor’s websites such as Zumiez, Quicksilver, Billabong, and Boardcave to get a better idea on layout and organization of the website. I also viewed some websites on Dribbble for inspiration.
The next step was to create my Style Guide, which includes what colors and fonts I used on my high-fidelity prototype. I kept the business’s original logo and used colors based off the logo:
Next, I went to Figma and evolved my hand-sketch wireframes to a mid-fidelity prototype:
I performed two usability tests on my mid-fidelity prototype and two usability tests on my high-fidelity prototype, testing the following criteria:
From these tests, the main takeaways were to add some “back” buttons to make navigation more efficient, change the wording on certain buttons to make the action items more clear, and to include error messages when a user skipped a step.
After the numerous usability tests, I had reached my final, high-fidelity prototype:
