Overview

Overview

JumpStart is an early-stage biotech startup that approached us with a project: design the accompanying iOS mobile application for an intelligent modular shoe insert. Working within a single 3-week design sprint, our team focused on structure and scalability to provide our client with a foundation of an app that can grow along with their company and product.

MY ROLE

  • User Interviews
  • Low-Fidelity Prototypes
  • High-Fidelity Prototypes / Mockups

Research

User INTERVIEWs

We conducted user interviews with users that fit our criteria: a person who workouts regularly with wearable technology.  We went to the UW athletic center and interviewed student athletes to get their take on wearable technology and its relation to physical activity.

 

PERSONA DEVELOPMENT

Using the information collected, we synthesized the data to develop our persona to design for.  The persona design was a very important aspect of our process because we needed a reminder of who we were developing and designing for. 

Methods

Semi-structured interviews,"Krug style" interviews, domain and organizational research, HEART Framework, and usability testing (RITE method).

Reasoning: Interviews were conducted with early adopters of wearable technology. The data collected focused on participants' touch points, pleasures, and frustrations with wearables and fitness-related mobile applications. 

  World cloud illustrating users' descriptions of JumpStart based on their perceptions from using the application

World cloud illustrating users' descriptions of JumpStart based on their perceptions from using the application


Plan

USER FLOW

Using omnigraffle, we created a user flow to map our user journey through our application.


Design

 
 

SKETCHES

I sketched out rough wireframes to get a better idea of where the design should go.  Keeping in mind our persona, I sketched out the initial login / register screens, walkthrough and pairing screens to get an idea about how the flow logic should work.

wireframe.png

Mid-FIDELITY MOCKUPS

Using sketch, I mocked up a mid-fidelity prototype to test our navigation and structure.  The mid-fidelity was built so users wouldn't get hung up on the aesthetics of the application.

Mid-Fidelity Usability Test

We used usertesting.com to conduct our mid-fi tests and a few logic problems came to light.  The biggest problem we saw was that users couldn't figure out how to edit their home dashboard widgets.  

High Fidelity Design

Prototyping

I used xcode to quickly prototype our designs and usability test on an iPhone.  I used code to prototype the slide out menu as well as the walkthrough screens.


Test

 

USABILITY TESTING

We conducted over 20 usability tests on all of our prototypes to help find chokepoints and logic errors.


Spec Doc

Overview

Tough Mudder is an endurance event series in which participants attempt 10–16 mile-long (16–19 km) military-style obstacle courses that tests mental as well as physical strength.  I along with my teammates, Carlyn and Leo, worked to increase repeat participation, and encourage team training.

 

My role

  • Comparative/competitive analysis and heuristic evaluation
  • Tough Mudder Style Guide
  • Design and Prototyping
  • Usability Testing

Research

Stakeholder Interview

We conducted stakeholder interview to better understand and learn about Tough Mudder and its users.  By the end of the interviews, we agreed to focus on the team aspect, fundraising and accountability aspects of the training process for Tough Mudder.

jackcowan


PERSONA DEVELOPMENT

Using the information we gathered from our stakeholder interviews and our own research, we created a persona named Trina to remind us of our primary user needs and goals.


Plan

Persona Scenario

We created a persona scenario to visualize the path Trina would take to move through the application.  In this scenario, Trina logs into the application and navigates through its features.

User FLow

A detailed user flow is shown below, listing the steps Trina will take to sign in, view her team dashboard, passbook information, and personal workout goals.

Site Map


Design

 

Sketches

I sketched a variety of different interface solutions, that gave perspective to some of the information architecture issues in a low-fidelity manor.

STYLE GUIDE

I created a basic style guide for my team to help emulate the Tough Mudder palette.  The style guide includes color palette, image examples as well as font families to use.

HIGH FIDELITY MOCKUP

I created a high fidelity mockup in Adobe Photoshop that followed the style guide I created,  and best demonstrated a design based on user gathered data.


RAPID PROTOTYPING

Because of my familiarity with Xcode, I created a quick prototype in storyboard, based off the high fidelity mockups I created, and uploaded it to my iPhone 6 for usability testing.

Prototype

 

Usability testing (round 2)

During out second round of usability testing on our high fidelity mockup, some gaping holes came to light.  First, although the design looked pretty, a lot of it was unnecessary and confused users instead of helping them.  Also, we realized we had strayed pretty far from the Tough Mudder style guide and that our next iteration should more closely resemble the company and their style values. 

Deliverable coming soon...

Test & Iterate

Overview

REI Adventures is a website that allows users to find and book camping destinations, as well as purchase REI goods that fits their current camping needs.


Research

STAKEHOLDER INTERVIEW

The goal of these stakeholder interviews was to undertand the habits and interest of Camping participants as well as their buying habits (online vs. in-store).  A number of interesting points surfaced, but I found that a very simple interface that provided gear information in an organic, non-advertising way, was the most promising.

 

PERSONA DEVELOPMENT

Using the information I gathered from my stakeholder interviews I created a simple persona hypothesis.  My persona's name is Ryan and he encapsulates my targeted user for the site.  I found it crucial to clearly articulate Ryan's needs so that I was regularly reminded that I was designing for him, and not for myself.

CONTENT AUDIT

Another key aspect of my research process was auditing content that already exists in the discover (camping) marketplace.  Basically, I ran a usability test on a few competing sites to clearly define choke points and user needs.


Plan

USER FLOW

A hand drawn user flow helped me map out sections of the REI Adventures site, as well as ways that Ryan could navigate through the site itself.


Design

 
 

SKETCHES

I hand sketched (on paper by 53) mockups of what my main three screens would generally look like.  The screens i sketched were the home landing (search) page, results page, and location page.

wireframe.png

HIGH FIDELITY MOCKUPS

Adobe photoshop high fidelity mockups added a lot more detail than the initial sketches and allowed me to better visualize what the final product would look and feel like.


Test

 

USABILITY TESTING

I employed the help of a few of my friends to test out my prototype and they gave me valuable feedback that i used to iterate.

Overview

Pauli is a simple mobile task app, that allows users to color-coordinate specific tasks and incentivize them to complete and stay on task.


Research

STAKEHOLDER INTERVIEW

Interviewing Paul was probably the most important aspect of this project.  Really understanding what his needs/wants were really helped me create a product that tackled these aspects.  What I found through this interview was that Paul needed a very simple task app that could remind and prioritize different tasks he needed to get done.

PERSONA DEVELOPMENT

Creating a simple yet powerful persona (Paul) helped me remember that I'm designing for him and not myself.  Whenever I felt myself straying to the latter, I opted back to the persona to refocus my design outcomes.   

COMPETITIVE/COMPARATIVE/AUDIT

I conducted a competitive/comparative and heuristic analysis on other task apps to figure out what aspects I could replicate, and which aspects I could do away with.  At the same time I referenced my persona to align his needs with the features of these tasks apps to give myself a clear picture of a desirable deliverable for Paul.


Design

Sketches

I drew out a few sketches of a simple interface that I thought would meet Paul's task needs.  I incorporated a color coordinating feature, that allows Paul to associate tasks with colors, as well as a "now" tab and a "later" tab.

High Fidelity Mockups

Using my sketches as the blueprints of my high fidelity mockup, I decided to do away with the home screen toggle feature and redesign the "now" and "later" features as a divided list.  This way Paul doesn't have to leave a single screen.