Brief

Duration: 
2 weeks

Target Device: 
Website

Tools: 
Balsamiq, InVision

Deliverables: 
Balsamiq files, InVision prototype

My Role:
Complete a competitive/comparative analysis of similar websites
Conduct user interviews
Synthesize interview data
Create a sitemap
Sketch new ideas
Create wireframes in Balsamiq
Conduct user testing and synthesize data
Create clickable prototype in InVision

Project Overview: 
The Old Bakery and Emporium is a historic building located in downtown Austin, Texas. Their shop consists of one-of-a-kind items created by local artists from Texas, but they have never offered their products online.

The goal of the project was to design a brand new e-commerce website for The Old Bakery and Emporium, based on a sample cross-section of 100 products they would offer online.

The old bakery and emporium in austin, texas

The old bakery and emporium in austin, texas

 

Research

 

The Old Bakery and Emporium has never had an e-commerce website, so one of the first things I wanted to do was explore other websites with similar product offerings to see where they were successful and where they had shortcomings. I chose to focus on Texas Crazy, Global Gifts, and Texas Trading Post. It became obvious that in order to improve over the competition, my site would need to include user reviews, a variety of shipping options, simple and effective designs, and be based on a logical infrastructure in order to navigate product categories.

SWOT.png
 

User Interviews

 

I came up with 30 questions about online shopping to ask my participants. The questions focused on their shopping habits, what they enjoy most about shopping online, and what their frustrations were when it came to e-commerce websites.

I then interviewed 3 participants between the ages of 28 and 35 who have shopped online at a variety of sites.

I asked the participants questions about:

  • General online shopping habits

  • Shipping preferences

  • Payment preferences

  • Frustrations when shopping online

  • User reviews and ratings

After my user interviews were completed, I wrote down the findings on individual Post-Its, which were color-coded to each interviewee. I then grouped the Post-Its based on similar pain points, thoughts, or desires the users had.

post-its.JPG


Some of the trends I discovered through synthesizing my user interviews showed me that online shoppers:

  • Trust PayPal over other forms of payment

  • Really value user reviews and pictures

  • Like having the option of picking up items in-store after purchasing them online

  • Want the option of checking out without having to sign up for or sign into a user account

 

 

User Personas

Thanks to the findings of my user interviews, I felt confident in creating two user personas for the project. I would keep these personas in mind while designing the e-commerce site.

 
 
 
 

 

Features

Now that I really understood the users I was designing for, I came up with my list of features.

  • Have a clear way of locating specific products

  • Support a single page for each product which can be linked to directly

  • Steer customers toward popular products

  • Allow customers to contact the business

  • Allow customers to read and write reviews about products

 

Information Architecture

 

After being supplied a sample list of 100 products that the store sells, I sorted them into categories and labeled each item with a subcategory so I could get a sense of my information architecture. I wanted to make sure I was creating an efficient and easy experience for users by making items easy to find.

products
 

Sitemap


 

Sketches

Now that I knew what features I wanted to include and how to organize the products, I started sketching ideas for the website.

 
 
 

Wireframes

 

After feeling comfortable with my paper sketches, I then created wireframes in Balsamiq for all of the pages and features that I wanted to test.


Homepage, category landing page, subcategory page

 
 

Product page, wish list, review popup

 
 

Guest checkout flow

 
 
 
 
 
 
 
 
 

Returning customer checkout flow

 
 
 
 

Prototype

 

After all of the screens were in Balsamiq, I imported them into InVision to create a clickable prototype for user testing.

Click here for prototype.

 

User Testing

 

Using the new clickable prototype in Invision, I performed usability tests.

I had 3 participants between the ages of 28 and 68.

Some of the scenarios I used during these tests had the users:

  • Locate a specific quilt to buy

  • Go through the checkout process as a new user

  • Add a review for a product

 

User Testing Findings

 

After conducting my user tests, some of my main takeaways included:

  • My initial user account screen did not display the information in an order that felt natural

  • I did not include enough filtering options for products

  • Users appreciated being able to see items on sale, but it could be made more obvious

My user account SCREEN iteration

My user account SCREEN iteration

 

 

Next Steps

  • Next iteration based on usability testing feedback

  • Mobile-friendly version

  • Feature spotlights on product artists

  • Customer loyalty program (coupons, discounts, free shipping)

  • Advanced search functionality

  • Visual design / high fidelity prototype

 

 

Want to talk to me about this project or any of my other work?