Screen Shot 2018-06-21 at 1.20.36 PM.png
 

Old Bakery and Emporium

Once a bakery built by Swedish immigrants in 1876 and functioned until 1936, Old Bakery and Emporium (OBE) is now a historical, national landmark in Austin, TX. Today, it serves as a gallery and storefront to highlight local artists and craftsmen.

 

E-commerce Research

Though this landmark carries inherent historical importance, Old Bakery and Emporium does not have its own website.  As a business that relies on sales to stay afloat, this is of immense importance. According to a study done by the U.S. Census Bureau, over the last ten years, e-commerce has grown from less than 4% of all retail purchases to over 10% in the first quarter of 2018. As the graph below indicates, this growing trend shows no sign of slowing down.

Screen Shot 2018-06-21 at 1.39.12 PM.png

According to an article in Forbes, 51% of Americans prefer making purchases online, as of 2018. In conjunction with the graph above, we are also seeing e-commerce grow by 23%, year after year. What this means for retailers is simple-- they need to have an online presence.

 

Here’s the Question

Who should I design for? It would be presumptive to think that every person would enjoy the wares sold at a local art-consignment store. So my initial questions are threefold:

  • Who is my average user?

  • What is the current mood toward online shopping?

  • What sort of expectations do they have for their e-commerce experience?

 

User Interviews

 
 
IMG_0710.jpg
 
 

The first step in my design process was to understand the average user. I interviewed four different users (age range: 27-55) that have some familiarity with online shopping and are likely to buy gifts online.

 It was quickly apparent that, regardless of feelings toward online shopping, most people felt it more convenient as compared to searching in stores. That being said, frustrations can often arise when the filtering options are inaccurate or unclear. In fact, if these controls are too confusing, many users indicated that they might leave a specific website altogether.

Using this feedback, I created a persona to serve as a focal point for my future user-centered design.

 
 
Screen Shot 2018-05-31 at 11.53.47 AM.png
 
 

Clarifying the Problem

As web pages have become overloaded with information and options, many consumers grow frustrated with the overwhelming steps necessary for a simple online purchase. This can lead to customers abandoning the process altogether, instead favoring a website that provides a more user-friendly experience.

Offering a Solution

The solution starts with a logical, organized site map that serves as the backbone for a straightforward website design. In conjunction with this organized site map, providing a fast, responsive ‘search’ option would allow the user to complete their task without the unnecessary dissonance.

 
 
Screen Shot 2018-06-21 at 4.13.48 PM.png
 
 

Using Slickplan, I created a sitemap that made navigation simple by providing few entry-points into the e-commerce pages, while designing for depth, so that he user can search and/or filter as needed.

Designing

Now that much of the initial research had been completed, it was time to take the data and apply it to paper. I sketched out some early ideas in my notebook, thinking of the different facets involved with this design, namely: user-focus, and commitment to the designed sitemap. 

 
p2 sketches.png
 


The drop menu function felt a little funky and inconsistent with the overall layout, and early user tests showed that people had trouble finding the item that they were looking for. In addition, I opted to forego a "shop" option in the navigation bar and strictly relied on the shop button that was located lower on the page. This proved unhelpful, as many people first sought the shop function in the navigation menu and could not find it.

 
 
 
Landing Page v_1.png
 
Early design that did not flow well with the rest of the project. (At the time, my justification for this design relied primarily on my novice status as a Balsamiq user.)

Early design that did not flow well with the rest of the project. (At the time, my justification for this design relied primarily on my novice status as a Balsamiq user.)

 
 

As user testing continued, I was able to make regular improvements to the design that relieved tension as users navigated through the pages. Below are a few examples.

As I mentioned earlier, the lack of a "shop" button on the navigation menu was quickly remedied, and the drop down menu got a major facelift. Common feedback that I received from early user tests had to do with ease of searching. Many users would have liked the option to search for an item right from the home screen. 

So, my next iteration also included designs for a search bar in the navigation menu.

 
 
 
Landing Page_v_3.png
 
shop menu_v3.png
 
 

Another early change I made after user tests was that concerning the "Add to Cart" button. Initially, my product pages had an option to either add an item to the cart or check out fast. Most people were not sure what to do, and hesitated. In a later iteration of this design, I removed the fast check-out option and simply offered an add to cart button, from there, a drop down appeared over the shopping cart icon at the top of the page, which allowed the user to either continue shopping or go to checkout.

 
 
 
First iteration of the product page.

First iteration of the product page.

 
Most recent iteration of the product page.

Most recent iteration of the product page.

 
 

Testing my proposed solutions, I recruited three individuals to test a prototype using mid-level wirefames. Due to the constraints of the tools, I gave the users specific tasks to complete within the prototype. During the test, I was able to observe individuals successfully navigate the prototype to complete the task.

Next Steps

In considering where I would take this project next, I would continue with usability tests to determine the importance the "about us" section offers. There were a number of users that were really interested in going to the "about" section, with one even communicating that it might determine whether or not they would purchase something from that site.