Designing My First UX Prototype
As part of the Interaction Design specialization on Coursera, I had the opportunity to work through a UX design project from the design brief through an online prototype. We had a choice of three different design briefs to choose from and I selected the Glance design brief. As in, what you can see at a glance, which in my case was related to how people use shopping lists.
After observing some people using shopping lists at my local store, I came up with a list of user needs that changed how I look at a shopping as a simple list on paper. Some of the ones I hadn’t expected were:
- Have a way to share a shopping list easily.
- For a shared shopping list, have a way to provide detailed information about any item, so if the main entry is just Milk, the detailed information will state the type of milk and how much to buy, e.g. 1 gallon of 2% milk.
- Have some way of finding a rarely bought item in the store, including not just the aisle number, but also where in the aisle an item can be found, and preferably even which shelf the item is on. Some home improvement stores have that ability already, so why not grocery stores.
From my user needs list, I then developed a couple of storyboards to help me think through how a user would use my app successfully.
The storyboard then helped me developed the first paper prototype:
From that first prototype, I went on to develop a more ‘interactive’ prototype that I used for the first round of user testing. This paper prototype used bits of paper to try out the various ways to use the app.
By sharing my screen, I was able to get feedback from other students of the course, and to do a heuristics evaluation of my paper prototype. This gave my more ideas on what I needed to change/include in my prototype:
- Have the ability for more than one list (I started out with just one list, with a history of lists, but no way to have different lists for different stores).
- Make the list items editable
- Combine the functionality of creating a list with using a list (which I had as two separate screens).
- Have the ability to Undo the crossing off of an item on the list
From all these changes, I developed the first interactive wireframe of my prototype using InVision, which went through two rounds of user testing, before I ended up with my final prototype for a Go Shopping! app.
This prototype allows a user to experience how to use the app while shopping, including:
- adding an item to the list
- crossing items off
- finding items in store
- getting more information about an item
- adding a store
- sharing a list
All using preset data, so users can’t actually enter their own data.
Overall, this was an interesting experience in making a prototype from scratch and following the user experience (UX) process, at least as far as a prototype. I enjoyed learning about the process and getting to use, or see other students use, tools that I hadn’t used before that I have now added to my UX tool-belt.