Revamping Websites

Overview:

I was given the following problem: find a poorly constructed website and create a mid fidelity prototype of how I would improve it. I chose Georgetown Cupcakes’ website.

Problem:

Georgetown Cupcakes' website is not user friendly. It is hard to navigate, many links do not work, and users are frustrated when ordering online. The process of buying something off the website is not intuitive to the consumer and there is too much toggling from one page to another, making the user experience so incredibly frustrating that people leave the sight midway. Additionally, the menu items are not listed out neatly.

Solution:

I created an easy to use, highly efficient and intuitive mid-fidelity prototype for Georgetown Cupcakes. The prototype makes the site easier to navigate and easier to order online.  I added an “Add to cart” button.  I added “Social Media” pages.  I put “Shop Now” buttons on every page.  I created a “Home” button, so that users could revert to the home page whenever they wanted.  And I added ratings for each product.

QA Testing Original Site

The first thing I did in this sprint was QA the entire Georgetown Cupcakes website. When looking at Georgetown Cupcakes' website from a glance, it seems fine. However, after taking a further look, I found many issues:

  • Multiple links did not work

  • Many items were hard to find,  other than the bakery's staple cupcakes

  • The checkout process was extremely confusing

  • There was no cart icon anywhere on the page

  • There was no easy way to return to the home page

Competitive Analysis

I created a competitive analysis to compare Georgetown Cupcakes’ website with competitors’ websites.

Heuristic Evaluation

I created a heuristic evaluation of Georgetown Cupcakes' website to understand how many issues I would have to work around when creating my prototype. I wanted to assess the severity of each issue in order to prioritize my adjustments.

Personas

I wanted to form a deeper understanding of the users' goals, needs, experiences, and behaviors. So, I created two personas. They were based on user interviews and surveys.  I was continuously updating them throughout the project as I gathered more data. I used these personas to assess the customer experience based on the behavior and background of the customer.

Card Sorting

To make sure that the site’s information architecture is aligned with user expectations, I conducted 5 open card sorting sessions using Optimal Workshop. My goal was to find smaller groups for the existing 30 product categories. After the open card sort, I conducted a closed card sort with 4 people. In the closed sort, 75% of the cards were sorted the same way when given categories to sort them into.  My goal with the card sorting exercise, was to analyze how customers approached decision making. 

I performed both closed and open card sorting, using Optimal Workshop (an online tool for card sorting).  The closed card sorting required customers to organize the concepts under different headings such as logistical information, order items, navigation bar, social, and flavors.

The open card sort used the same concepts, but it didn’t offer categories, so the consumers have to categorize the information themselves.

By comparing the two sorting processes, I was able to assess the differences of how consumers would sort the information themselves, versus how they would identify issues when given direct categories.  This helped me correct previous misconceptions I had about how to deliver information, and how consumers searched for content.  This was a uniquely interesting exercise because multiple areas needed to be changed.  25% of the cards were sorted differently, and I made changes to reflect the consumer assumptions. 

The final structure had a clear homepage, a menu page with flavors and the ability the buy on every page.  This was a massive improvement that would enable ecommerce activity and, while obvious to me, it was not offered on the original site. 

Wireframes

Using Figma, I translated my first sketches into low-fidelity wireframes. At this stage, the wireframes were defined
for user testing. Based on 4 tests, I made a few alterations and moved on to create mid-fidelity prototypes.

Next Steps + Learnings

The next steps for this project would be to conduct more user testing, add more products to the Figma prototype, and eventually create a high-fidelity prototype with images. I learned about QA Testing, Card Sorting, and Figma. I thought the differences between the open card sorting and closed card sorting exercise were fascinating. This process reconfirmed that no one should presume to know what consumers want, and it reaffirmed the value of testing. My skills as a QA tester were improved, and my assumptions about consumer behavior were challenged.