Emily Nguyen
Visual — Product — Front-End

ERGO

Our work environments can work against us. ERGO is a web app that combats the discomfort and injury that results from a sedentary lifestyle by periodically alerting users to stretch. Designed to work across many different spaces, ERGO is unique in that it introduces exercises that use the everyday objects around us, inspiring users to rethink their interactions with their spatial environments.

Roles

Led the brand + UI design and development of the HTML prototype. Interaction design was done as a team.

Key Skills

Needfinding, storyboarding, wireframing, rapid prototyping, visual design, web development

Teammates

Lauren Choy, Lindy Hernandez

Date

Jan – Mar 2018

Resources

Github repo

Design Brief

When the spaces we regularly navigate become a part of our routines, we fail to recognize how we interact with them. Our team's goal was to reassess the interactions between users and their environments to discover how these interactions could be used to fulfill unmet user needs. In particular, we were interested in human behavior within work settings and how the use of computers could contribute to successes and breakdowns.

Needfinding

We observed 3 participants in their respective work environments and discovered that wellness was a common concern between them. Using the data we collected, we constructed personas that encapsulated our target audience: people who regularly experience long periods of physical inactivity.

Personas

Ideation

To guide us towards a solution, we reframed the insights and pain points above into opportunities:

  • How might we remind users to take breaks and stretch after long intervals of inactivity?
  • How might we accommodate users in different spaces or users with different tools at their disposal?
  • How might we make being active enticing to users?
  • Additionally, how might we accommodate users with disabilities or injuries?

Solution

Our solution was an ergonomics app that periodically notifies users to perform a stretch or exercise. It would be unique in that it takes into account the user's setting and suggests stretches that are applicable to the devices they're using. These suggestions could then be customized for accessibility and further flexibility. This approach sets the app apart from its competitors by providing users a more fun, personalized stretching experience.

To encourage users to actually perform the stretches provided by the app, we decided to include a social feature. Once a user is done setting up a routine, they could share their settings with their friends or coworkers so that they all receive the same notifications. By turning stretching into a group activity, the app takes advantage of the power of social influence to get users to be more active.

Storyboarding

Storyboard: Natalie and Robb successfully use ERGO to reduce their respective pains

Rapid Prototyping

We then created two prototypes and had participants walk through several use cases on each one. Our first prototype (left) starts by asking users what device they're working on, while the second prototype (right) asks users where they are working.

2 paper prototypes

An issue we discovered while testing was that a user's device does not tell us much about their environment (e.g. a laptop can be used anywhere). So, we decided to move forward with our second prototype. View paper prototypes.

Revisiting the Brief + Redesign

Upon revisiting the design brief, we realized we had strayed. While our solution provided users with exercises that were relevant for their location and setup, this was not an environmental interaction in itself. So, how might various work spaces be used to help their respective occupants reach their end goals?

Our revised solution was to have our application suggest stretches that use surrounding objects. Environments would be grouped with other environments based on the objects that are common to them. We redefined our categories as follows:

  1. Office — possibly a cubicle or small space; stretches can utilize desks and chairs
  2. Home — wide array of furniture at user's disposal, disruptive exercises are not a concern
  3. Indoor (public) — libraries, coffee shops; stretches are seated and more discreet
  4. Outdoor — open space; stretches can utilize larger objects such as trees or poles, exercises can be more extensive (e.g. running)

Wireframing

Next, we created wireframes to visualize the flow of our app.

App flow when logged in and logged out

Brand + UI Design

Our decision to go with a light UI was made carefully after considering that working and studying often take place during the day and in well-lit spaces. We incorporated pops of a vibrant blue-green gradient to set an energizing and refreshing mood that reflects ERGO's main goal: to encourage wellness.

High fidelity mockups

HTML Prototype

With our app flow and branding established, we were able to start developing our live prototype. With the help of tools such as

  • Node.js (Express + Handlebars)
  • Sass

we built a responsive HTML prototype. Over the next 6 weeks, we implemented core functionalities and refined our app using feedback from users. Check out our live prototype and our Github repository.

User Testing

One of the biggest problems we discovered while user testing is that ERGO had poor visibility of system status. To resolve this issue, we made labels more informative and added more descriptions throughout our app.

Left: New home page with how to get started tips and environment descriptions; Right: New setup page with environment name in the title

Another problem we had was that users did not find our icons intuitive, namely our Log In and Favorites buttons. We replaced our Log In icon with the universal icon for Profile, a person, and decided to rename our Favorites page to Bookmarks. Stretch routines are saved using URL parameters, so we decided this new title would be more fitting.

New person icon and bookmark icon

After implementing these changes, we continued user testing and received positive feedback.

Final Design

View our live prototype to check out our final design!