WonderWoof
- #Figma
- #Useberry
- #UI/UX Design
![Wonderwoof Website Homepage design](images/work.4.png)
Overview
WonderWoof is a fictitious start-up e-commerce business that sells pet supplies to Greater Vancouver area. The goal of this project is to create an interactive prototype using Figma. The complete website design included shopping, check out and payment processes. The usability testing tools for this project was conducted by Useberry.
Process
First, I did some data geathering and inspiration search on different local pet stores. Based on my research, I created my user scenario and their primary goals. Then I started on creating a User Flow (Flowchart) for the shop->purchase->checkout processes for the website.
![wonderwoof User Flowchart](images/work4.2.png)
![WonderWoof User Scneario](images/work4us.png)
![WonderWoof Website Design Moodboard](images/work4mb.png)
![wonderwoof low-fi wireframes](images/work.4.low.png)
![wonderwoof shop page](images/work4.2r.png)
![wonderwoof product page](images/work4.3r.png)
![wonderwoof cart page](images/work4.4r.png)
![wonderwoof checkout page](images/work4.5r.png)
Final Creation
From the high-fi wireframes, the prototypes were created and tested by six users. I used Useberry to conduct these usability tests, in total there were 5 tasks with a 100% completion rate. Based the test result, I have applied design changes and revisions to the original prototype. The revisions include the button length, menu size, and icon positions. You can view the final live Figma site down below.