Carrie Huot - UX Designer
Designed for Google's Course: Create a High-Fidelity Prototype for a Website
Designed with Adobe XD
May 2023
Florist Reponsive Website
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.
Starting the Project
Personas, Problem Statement, Pain Points, User Journey & Sitemap
Creating the Designs:
Paper Wireframes
Digital Wireframes
Digital Wireframes
Cell Phone Wireframes
Low Fidelity Prototypes
Click here for the interactive desktop low fidelity prototype.
Click here for the interactive cell phone low fidelity prototype.
Usability Study
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.
Refining 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.
Mockups
Cell Website Mockup
High Fidelity Prototypes
Click here for the interactive desktop high fidelity prototype.
Click here for the interactive cell phone high fidelity prototype.
Accessibility Considerations
What I Learned
This was my first project using Adobe XD. Already being familiar with Figma, I did not find it too difficult to learn. I really loved that Adobe XD allows you to cut and paste things to another screen, keeping the same coordinates for each screen. I also liked that you could easily repeat things on the screen, making it much faster to create pages.
Next Steps
