Florist Responsive Website
Designed for Google's Course: Create a High-Fidelity Prototype for a Website Designed with Adobe XD May 2023
Project Overview:
My Role: Sole UX Designer conducting user research, wireframing, mockups as well as creating high & low fidelity prototypes.
Challenge: How to make a responsive website for a florist, i.e. a website that changes size based upon the users’ screen size.
Goal: Creating a high-fidelity responsive florist website.
Starting the Project: Prior to creating the design, I created personas, identified pain points and created a user journey, focusing on empathizing with the user.
Creating the Design: After identifying problems that the users might need to have solved, I created a sitemap and low fidelity paper prototype for both large and small screens, before creating a digital wireframe and low fidelity prototype with Adobe XD. In this case, I started with the cell phone wireframe first, to determine which elements were essential for the website to work. After creating both the cell and desktop sites, I created a low fidelity prototype.
Personas
Competitive Audit
Competitive Audit: Prior to starting the design, I completed a competitive audit of florists to determine how my website could stand out from competitors. You can view the full audit here.
Sitemap
Wireframes
Paper Wireframes
Digital Wireframes
Low Fidelity Prototypes
Usability Study
After creating the low fidelity prototype, I conducted a moderated usability study with five participants, with each interview taking about 5 minutes. Most the responses to the prototype were positive, with a few suggestions on improvement.
Changes to the Design
2 out of 5 of the participants of the usability study suggested adding categories to narrow down the search. Therefore, shopping categories were added to both the desktop and cell sites.
1 out of 5 participants of the usability study had trouble checking out on the mobile site because the confirm payment button was below the fold. Therefore, the confirm payment button was moved so that it appeared above the fold.
Affinity Diagram
High Fidelity Prototypes
What I Learned:
In this project I learned how to use Adobe XD. Using what I learned with the first Figma prototype, I was able to make sure that this second prototype worked fairly smoothly from the first prototype.