RNNR Mobile App Design

The Challenge

Design an app that will help users develop habits and accomplish their goals.

RNNR started as a social habit app that allowed users to tailor their goals and notifications. I changed the focus to running based on user feedback.

Tools

  • Paper and Ink
  • Balsamiq
  • Sketch
  • Illustrator
  • Invision

The Design Process

RNNR Design Process

Discover: User Interviews

I conducted several user interviews regarding goal setting and achievements

Insights

  • Many different goals including weight loss, exercising, and journaling.
  • Track exercise through apps and devices.
  • Outside of exercising, no tracking of progress.
RNNR Personas

Develop: Sketching

Sketched ideas for design and functionality.

prototype

Rapid Prototyping

I made quick progress through brainstorming and sketching. This allowed me to develop a paper prototype to test with users.

Insights

  • The users found that the experience too cumbersome.
  • Too many options.
  • Too much typing.

Refocusing

  • Narrow the problem.
  • Pivot and focus on runners.
prototype

Competitive Analysis

There are many running apps and devices in the marketplace. I tested and analyzed a number of mobile apps to determine how to differentiate RNNR from the field.

Insights

  • Most apps have freemium models that only allow users to plan their goals if they pay for a membership.
  • Need to differentiate app.

Actions

  • Target the middle market (Runtastic) instead of the mass market (Fitbit, Nike+) and niche market for hard core athletes (Strava). Maintain free model.
  • Implement advertising business model (highly targeted: races, gear, and rewards).
RNNR Second Prototype

Fitbit

RNNR Second Prototype

Runtastic

RNNR Second Prototype

Strava

Usability Testing and User Feedback

Insights

  • Simplify UI. Prioritize information.
  • Remove map and icons when they're not needed.
  • Add function to change music.
  • Add A Run button needs to be more prominent.

Actions

  • Re-drafted wireframes and user flows.
  • Removed background image.
  • Increased font size and removed borders.
RNNR Second Prototype
RNNR Second Prototype
RNNR Second Prototype

Design Inspiration

I was inspired by a painting that I saw during an art walk in downtown San Jose. I was drawn the colors of the sky with blues, reds and yellows.

Also, I loved the whimsical illustrations of Chris Fernandez and Anton Fritsler. They're fun and happy. This style can differentiate the app from the other running apps that are currently available.


RNNR Design Inspiration

Painting - artist unknown

RNNR Design Inspiration

Illustration by Chris Fernandez

RNNR Design Inspiration

Illustration by Anton Fritsler

Prototype