Interaction Design, Visual Design, Web Development
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.
Led the brand + UI design and development of the HTML prototype. Interaction design was done as a team.
Needfinding, storyboarding, wireframing, rapid prototyping, visual design, web development
Lauren Choy, Lindy Hernandez
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.
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.
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?
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.
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.
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:
- Office — possibly a cubicle or small space; stretches can utilize desks and chairs
- Home — wide array of furniture at user's disposal, disruptive exercises are not a concern
- Indoor (public) — libraries, coffee shops; stretches are seated and more discreet
- Outdoor — open space; stretches can utilize larger objects such as trees or poles, exercises can be more extensive (e.g. running)
Next, we created wireframes to visualize the flow of our app.
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.
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)
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.
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.
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.
After implementing these changes, we continued user testing and received positive feedback.