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

Application's Value
Application's Value

Course Project: HCI 430- Prototyping and Implementation

Storyboard
Storyboard

Define the Problem
Define the Problem

Course Project: HCI 430- Prototyping and Implementation

1/6

RESEARCH

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

Inspiration Board
Inspiration Board

Inspiration Board Cont'd
Inspiration Board Cont'd

Competitors
Competitors

1/3

ANALYZE

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

requirements
requirements

User Scenario
User Scenario

conceptualizing
conceptualizing

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

Brand Identity
Brand Identity

Interactive Prototype
Interactive Prototype

Low-Fidelity Wireframe
Low-Fidelity Wireframe

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

Usability Test Participants
Usability Test Participants

Usability Test Tasks
Usability Test Tasks

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

Design Updates from Usability Test
Design Updates from Usability Test

Usability Test Findings
Usability Test Findings

1/2

Other Work