To understand potential users, I conducted preliminary interviews to designate a primary user group. As this was an independent project, I relied on my friends and family to provide their feedback. I identified busy working adults who like to read as potential users of the site. These interviews concluded users want to make informed decisions when purchasing books online and would like both delivery and pickup options to receive their books. Additionally, many users expressed negative emotion toward difficult to use websites. Using this information, I identified three pain points users face when visiting online bookstores.

A persona and problem statement were also formed. Using a user journey map, I was able to walk through the persona’s experience to pinpoint key aspects and features to implement into a sitemap.

Using the crazy eights method, I quickly drew up some base designs for the home page of the bookstore’s website. After consolidating features that align with user needs, I had finalized paper wireframes for web and mobile home pages. For this project, I used Adobe XD as my design tool. I created low-fidelity screens for both home pages and all necessary screens required to complete the user flow.

Once I had low-fidelity screens and a working prototype complete, I began the first round of user testing. Like MerchPerch, the first project for the Google UX Design certificate program, many of my participants were recruited from my friends and family. While their biases may have affected the feedback I received, I had access to limited resources for this project. Nonetheless, I believe participants gave me valuable insight on my low-fidelity prototype. The findings from the first round can be seen below.

After the usability study, I revised my design to include solutions to the recently discovered user pain points. I added a check box for users to use the same shipping address for their billing address. Additionally, I added a review section for the item detail screen on both mobile and web designs. Finally, I added the option to change the quantity of the item in the user’s cart. The updated screens can be seen below.

After updating the low-fidelity design, I began working on high fidelity-mockups. Part of this process was creating a color palette which accurately represents the brand of Sunshine Bookstore (fictional). With a neutral cream color as a background color, I chose a mellow yellow and soft green to use as my primary colors. I attempted to use the 60/30/10 rule of color usage when designing my mockups. Additionally, I created a brand logo using Photoshop. Selected screens of these hi-fi screens can be seen below.

Although not mandatory for the course, I decided to undergo a second round of user testing with my new high-fidelity prototype. Once again, due to lack of resources, I relied on friends and family for their insights. From their input, I was able to gain two opportunities for improvement.

With these findings, I implemented price indicators on any screen with books so users would have quick access to the price of a book. Additionally, I added a row of recommended books on the order confirmed screen to fill in empty space.

After updating my design to include the recommendations from the second round of usability studies, I arrived at a final product. At this moment, the Sunshine Bookstore website allows users to quickly find the book they want and successfully complete the user flow without major roadblocks. I was able to design a website that succinctly focuses on relieving user pain points. When designing, I took accessibility concerns into consideration. I used large and clear text with hierarchy and landmarks to help users navigate the site easily. Additionally, I was able to create a website with responsive web design, allowing users to access the site on multiple devices. You can see my final designs in the slideshow below or the final prototype can be accessed here: https://xd.adobe.com/view/d05bec76-10bc-4f62-a9ed-7e2b31984b3e-8508/

This project was my second endeavor into UX Design. Although I learned a lot and enjoyed my time working on this project, it was challenging. I found it difficult to scale up to a web design and had some trouble using appropriate proportions for some of the components. I believe by spending more time designing for screens of all sizes, I can become more familiar with how things should look at a quick glance. Having said that, I am happy with the direction of my design progress and my growing knowledge of UX.

If you'd like to learn more about my design process for this project, please contact me below!