Wireframe Prototype

In this assignment, you will look at wireframe prototyping for interactive applications on the web and mobile. These low fidelity mockups are used in the early stages of the design process to concentrate on the interaction design, navigation, and basic layout. They are intended to help you evaluate a preliminary design, not a finished version. You will be restricted to black and white schematic designs, with no high fidelity graphics or typography involved.

Design

The purpose of the website is to make it easier for people who are shopping. Some of the basic functionalities of it are:

  • Importing recipes to generate an ingredients list
  • Add and update regular grocery lists

These are the primary actions in the wireframes, that were put into this prototype. Additional features like managing the user’s profile and settings were not designed due to time. However, those screens would have allowed users to managed their account and accessibility settings. Other features that were considered, but not added, was allowing multiple people to edit and add to the grocery lists. However, this would be helpful for families, roommates, or situations involving multiple people.

At the beginning of the design process, I drew out a basic sitemap taking into account the main features of the application. “Add to List” and “Add Recipe (ingredients)” are functions, where as “View List” is a page.

Grosiree sitemap

From there, I could begin ideating and brainstorming possible wireframes. Because I knew I wanted to work with Axure, I did take into account responsive and modular design so that it could easily adapt between mobile and web.

Sketches of key pages

Process

description of the intermediate steps you performed (as above) in your prototype process, to show how you analyzed and designed your solution.

My sister enjoys baking and often goes to the grocery store with ingredients in mind for the recipe she is trying to make. Often times, she notes them on her phone or on a list if someone else is picking the ingredients up for her. A lot of these recipes are also ones that she has found on the web.

Although she could have the recipe up on her phone, it doesn’t make it easy for her to pull it up later if she wants to make it again. Instead, she resorts to bookmarking the recipe for later. For people who have a lot of recipes bookmarked online, this can be tricky because they are sorting through a large list.

For this reason, I had several goals in mind during the design process:

  • Simple and easy to use
  • Allows for users to easily save recipes for later
  • Organizes recipes and grocery lists

After defining my basic user requirements, I moved on the sitemap. Since I knew I wanted the app to be simple and straightforward, navigation should be as uncomplicated as possible. Afterwards, I sketched out the ideas and then moved on to the wireframes.

Create a new grocery list (left) and import recipes through a url (right)

During the wireframe process, I used cards because they were cleaner and more organized. They also enable users to quickly glance over what they have, so that it isn’t a hassle trying to find what they are looking for. The “Add List” also became a card.

Analysis

Overall, I received positive feedback on the wireframe. People understood how to interact with the application, and how to navigate between screens. This assignment was pretty fun and I enjoyed learning how to use Axure more.

What worked well:

  • The overall design was clear (interactions made sense)

What needed improvement:

  • +/- confusing → add a single add button or edit button
  • “Just start typing!” to add items to list is vague
  • Tags aren’t helpful since there isn’t a way to actually filter by them

Conclusion About Design

The wireframe was successful since users were able to navigate through the screens and add items and import recipes. However, some of the wording was vague and some areas could use further clarification. Moving on into the HiFi version of this wireframe, I will add more detail and clarify any methods of interaction.

Show your support

Clapping shows how much you appreciated Alison Chiu’s story.