Balsamiq files, InVision prototype
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
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 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.
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
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.
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
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.
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
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.
Now that I knew what features I wanted to include and how to organize the products, I started sketching ideas for the website.
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
After all of the screens were in Balsamiq, I imported them into InVision to create a clickable prototype for 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
Next iteration based on usability testing feedback
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?