I’ve been curious about the world of user experience and interaction design for quite some time. Not-so-recently I decided to explore my interest to see if it would be a viable career option by enrolling in the Coursera Interaction Design Specialization. Since May I’ve been taking course after course to learn about everything from running experiments to designing high fidelity mock-ups. Over the last ten weeks I’ve been working on my capstone project which I’ll be talking about in this post.
The Problem
I had a few ideas in mind when I was looking for a problem to solve with my application. In the end I decided to solve the problem of finding a brick and mortar store that had something the user was looking for. In the scope of this exercise the back-end and data acquisition were not explored, only the user-facing interface was designed and implemented.
I started off by conducting research by observing shoppers in the real-world. I set off in one of the shopping capitals of the World, New York City, and interviewed a variety of people who were out shopping. I learned the importance of being able to capture the consumer’s attention at a glance because of the copious advertisements and products competing for their business.
My solution to this problem was an application that lets users know about brick and mortar stores that have what they want in stock. In the storyboard below you can see a use case in which two friends are going shopping together. They want to buy different things and our user needs to find a store for them to meet to go shopping.
Drawing up a Plan
I wanted to create a simple and easy-to-use interface for users of all technical abilities. The main page was a simple page that had two text input boxes that were inserted in a plain English sentence to make it clear to the user what the application would help them with. I played with the idea of adding suggestions at the bottom of the page, but eventually dropped the idea because it would distract the user from their purpose and made the page looked cluttered. The first design iteration can be found here in the form of an interactive set of mock-ups.
Once the user creates a search query they are directed to the results page. The user is able to update their search parameters and add additional filters at the top of the page. Below the search section the user is presented with a list of stores that meet their criteria listed by proximity to the location they specified.
For the store detail page I had two different designs. The first was focused on letting the user know how to contact the store and information about going there such as directions and hours of operation. The second design had an emphasis on showing the users what they could find in the store. For the prototype I ended up combining these two ideas into one page.
Prototype Iteration
I’m a software engineer by day so I decided to create a website with mocked data and functionality for my prototypes. The first iteration can be found here. I created a bare-bones version of my application and tested it with a couple willing guinea pigs (my friends). They provided me with valuable feedback about confusing interactions and a few software bugs. I even threw in a “How to Use” page on the application for good measure.
Using what I learned I created a second iteration. A few changes were made such as adding text to the “Current location” button, individual filters per searched item, as well as additional information on the store details page about price range and any ongoing sales.
Finale
I ran an A/B test on these two designs to see if any of the changes I made were effective. I found that many of the users were able to understand what the “current location” button meant without having text. I also discovered that users found the individualized filters per item very useful. Many of the testers noted that Stockr’s interface was boring and bland and that I should add some color. Using what I found I created a final prototype with a brand new name: “Brick ’n’ Mortar” (because Stockr sounds too much like stalker and apparently that’s not a name that inspires a shopping mood in users).
