Product Development

APPETIZE

Course: HCI 430- Prototyping and Implementation

Team Members: Vicky Moreira, Andrew Hahn, Leena Ansari, Alison Bodigheimer

 

Objective

To invent, design and user test a native app or web app that people can use on any device (of all screen sizes, including desktop, tablet and phone layouts).

Axure, PowerPoint, Google Docs, Photoshop, and inDesign.

Tools

I collaborated with my team members to design and test our new appplication.

Role 

Research comperative market, interviews, and uability tests.

Methods 

PROJECT SUMMARY

IDEATE

We first defined the problem that we wanted to solve and the market for where our application would fit it. This helped us to determine the vision, value, and purpose of the application. The target audiances and th usage of the application accross different devices was also defined. To put it all together, a "happy path" storyboard was created at the end of this phase.
 
Define the Problem
Define the Problem

Course Project: HCI 430- Prototyping and Implementation

press to zoom
Application's Value
Application's Value

Course Project: HCI 430- Prototyping and Implementation

press to zoom
Storyboard
Storyboard

press to zoom
Define the Problem
Define the Problem

Course Project: HCI 430- Prototyping and Implementation

press to zoom
1/6

RESEARCH

Research on competitors and the market was conducted. Ideas from various sources including Pinterest was explored.
Competitors
Competitors

press to zoom
Inspiration Board
Inspiration Board

press to zoom
Inspiration Board Cont'd
Inspiration Board Cont'd

press to zoom
Competitors
Competitors

press to zoom
1/3

ANALYZE

The findings from the research helped us create major user stories, personas, and user flows through the application.
conceptualizing
conceptualizing

press to zoom
requirements
requirements

press to zoom
User Scenario
User Scenario

press to zoom
conceptualizing
conceptualizing

press to zoom
1/8

CREATE

Low and high-fidelity wireframes for the major user stories in the application were generated using Axure to create a responsive prototype. Next, the visual design was determined and added to the protorype. This included the application's logo, brand and utility colors, typographic styles. Once this components were finalized, an interactive fidelity was added to the prototype such as pop-ups, show/hide animations, input fields, error messages, and validations. 
Low-Fidelity Wireframe
Low-Fidelity Wireframe

press to zoom
Brand Identity
Brand Identity

press to zoom
Interactive Prototype
Interactive Prototype

press to zoom
Low-Fidelity Wireframe
Low-Fidelity Wireframe

press to zoom
1/5

TEST

As a group, we wrote a usability test, prepared the prototype for testing, and conducted 12 user tests.
Usability Test Tasks
Usability Test Tasks

press to zoom
Usability Test Participants
Usability Test Participants

press to zoom
Usability Test Tasks
Usability Test Tasks

press to zoom
1/2

ITERATE

Our final prototype can be found HERE. It incorporates the design updates below that were inspired from the problems/findings gathered from the usability test sessions.
Usability Test Findings
Usability Test Findings

press to zoom
Design Updates from Usability Test
Design Updates from Usability Test

press to zoom
Usability Test Findings
Usability Test Findings

press to zoom
1/2

Other Work