Putting usability ahead of expressivity in User Interface and Interaction Design

A meal-planning app from a plant-based perspective

ROLES
  • This is a solo project where I assumed the following roles:
  • Interaction Designer
  • User Experience (UX) Designer
  • User Interface (UI) Designer
DELIVERABLES
  • Interaction Design:
  • High-fidelity interactive mobile prototypes of 3 key interaction sequences
  • UX & UI Design:
  • High-fi mockups
  • Style guide & UI components
  • Low-fidelity wireframes
  • Usability test findings
  • Logo design and branding
SPECIFICATIONS
  • Duration:
  • 4 weeks
  • Tools:
  • Principle app
  • Sketch app
  • Axure RP
  • Photoshop

Overview

Ingrain is a plant-based, meal-planning app that was conceived as a response to the diabetes epidemic that is presently ravaging North America. Its purpose is to equip those who often feel as though they’re at the mercy of a chronic disease like diabetes—to reverse their diagnosis with plant-based foods.

A case study in two parts

This is Part 2 of 2 in the Ingrain case study. This second part covers the User Interface and the Interaction Design portions of the project. I will walk you through the evolution of the interface design, and the process of leveraging motion design to optimize the user experience during onboarding, meal-planning, and meal-recording.

Curious as to how I got here?

See the strategic pivots that redefine the scope of the MVP and inform the content structure of the product page in Part 1: UX Strategy and Product Page Design

Part 2—Interface & Interaction Design

This is a story of putting usability ahead of expressivity. Examining UI interaction sequences at a granular level taught me to design for the in-between moments of an object's transition.

Here are playable video previews showing snippets from the final interaction sequences:

Onboarding
Meal-planning

Structure

The beginnings of a structure

My initial user flows gave me a starting point to begin to visualize the screen app interface.

Early user flows of onboarding (left) and recipe browsing (right).

Sketching visual representations of my initial user flows opened the possiblities of simplifying the user’s navigation path—from top level content to other content that are several levels deep, and back again.

Early sketches of the ‘log-your-food’ sequence.

App navigation and structure

A flat navigation system within the app architecture that facilitates quick referencing and quick task switching is the rationale behind incorporating a set of tab bars that display five frequently-accessed locations: home, tracker, saved, shopping list, and profile.

A tight information architecture where the lowest-level content is never more than 3 levels deep from top content.

From studying the app architecture of the Kitchen Stories app, I learned that the secret to a tight user flow in a primarily content-driven app is to control the entry point of user engagement by restricting it to the lowest level content, which are the individual recipe articles.

Creating an onboarding sequence

It was important to respect the user by being transparent about why Ingrain asks the questions it does to construct a dietary profile. This is achieved by displaying titles that identify the task at hand.

A low-fidelity onboarding wireframe where instances of the user having to manually input text with a keyboard is kept to a minimum.

Showing how many steps are left, and giving users the option to skip parts of the onboarding process are just some of the ways to respect users.

Interface Design

Early iterations of the app interface

Since most food and cooking apps favor a light-UI scheme, I experimented with creating a dark UI scheme with a palette of earth-tones for the purposes of differentiating Ingrain’s branding in the meal-planning space.

The first design iteration featuring dark food photography that emphasizes the textures of foods.
The light UI clearly lends itself well to content legibility.

Responding to User Feedback

“The onboarding process is hard to follow.”

I learned that brief prompts that direct the user to take action and then see the result of their action is a much more effective and funner way to educate the user about the app interface than blocks of instructional text.

Before
After

“There’s a lot going on, I'm unsure of what to tap on to move forward.”

The presence of many controls in such a small screen made it confusing for users to find their way in the app. I clarified their path by eliminating controls that were unnecessary to the task at hand to decrease the need for decision-making.

Before
After

“Most of the time I already have 80% of the ingredients, I would like to add only some ingredients to my shopping list.”

This is an instance where user feedback uncovers key insights about the posture of a feature. In response to the user’s goals, the shopping list feature changes its posture from a record of many mealplans to a custom check-off grocery list.

Before
After

The verdict: usability was being undermined by expressivity

After testing the app interface with a predominatly dark color scheme, I concluded that much of the users’ confusion in navigating the app was due to a lack of graphic hierarchy.

Earth-tone colors appear to recede when put against a light background, and appear flat against a dark background.

By the end of user testing, it was clear that the expressivity of the style guide and color palette was undermining the usability of the app. Moreover, the dark colors make the food look less appetizing.

67% of users failed to notice the step indicator
All users are confused by what the numbers indicate.

It was clear that a style guide redesign was needed for the sake of enhancing usability. This led me to abandon the dark and tonal grey color palette in favor of a light color scheme.

Redesigning the palette

Ingrain’s newly-redesigned style guide takes a decidedly light-UI direction. It comprises of mostly neutrals with two earth tones that serve as ingrain’s primary colors.

Style Guide

I learned that when working with muted colors, it is critical to create shade variations based on the desired contrast level that one wishes the foreground content to have against the background content. The primary color shades were inspired by the fruits plum and fig. The brights color group was added for accents and attention-calling elements.

Style Guide
UI Components

Logo design process

Ingrain's logo depicts a mortar and pestle. As one of the oldest food-preparation instruments used in many cultures from around the globe, it is also used by apotecharies to crush medicinal herbs. This association wonderfully connects the idea of food with medicine—which is what Ingrain is about.

(Left) Initial logo. (Center and right) Final logo iteration and its variation

Putting the app user interface together

The most challenging portion of developing the Ingrain app interface is integrating the gorgeous food photography with the vectorized content of the meal tracker.

To lessen the jarring juxtaposition of both types of content when they grace the same screen, I opted for a simplified outline shapes over the detailed vector food shapes whose cartoony realism competed with the realism already present in the food photography.

Here are the newly-redesigned high-fidelity mockups of Ingrain's app screens:

Food photography and avatar icons are courtesy of the following sources.

Interaction Design

The granular nature of motion design

Drawing upon resources such as Issara Willenskomer’s 12 Principles of UX in Motion and Taras Skytskyi’s Ultimate guide to proper use of animation in UX, I learned the motion design principles behind the great interactions that enhance usability and content legibility with motion design.

Choose wisely and apply consistently

I learned to select the appropriate type of object movements that guide the user’s attention to the right place at the right time, and how to avoid jarring movements that look unnatural to the human eye. In applying these motion design principles, I created a set of rules concerning which movement types to utilize for specific element transitions.

Here is a break down of the movement types within the Ingrain meal-planning app and a short summary of their use cases:

Micro-interaction details

Here is a cross section of interaction details that are representative of ingrain's interactions. Each interaction is deconstructed into a series of animation curves that govern the movement of major elements during each sequence.

Real-time interactions

To borrow from Issara Willenskomer's terminologies, interactions are classified as real-time interactions when it occurs concurrently with input from users. Here are playable videos of this type of interaction within the Ingrain app:

Vertical scroll interaction
Vertical drag interaction
Horizontal swipe navigation

Swiping horizontally to browse more content coincides with a change in opacity of the location indicator on the center-top of the screen, informing users of how much content there is left to explore.

Horizontal swipe to change an element

Swiping horizontally coincides with a change in rotation of an on-screen object—letting the user draw the connection between text information and the graphic representation of it.

Non-real-time interactions

Interactions are classified as non-real-time interactions when they occur subsequently after a user's input. Here are four representative samples of this type of interaction within the Ingrain app:

On-screen object transitions
Off-screen object transitions
Tabbed carousel navigation

Information is organized in well-labeled tabs to increase discoverability of content and facilitate ease of access. On tapping a different tab, new content moves into the screen in the opposite direction as the tab selector.

Segmented control by view type

Information is organized differently to suit the task at hand. On tapping a segmented control, new content transitions to the screen almost instantaneously so as to not distract an on-the-go user.

Final Prototype

In constructing these interactive prototypes, I am grateful to Issara Willenskomer for his in-depth articles on the principles of motion design—they were instrumental in teaching me to go beyond designing from screen to screen, and visualize the in-between moments of screen objects in transition.

I walked away with a greater understanding of the motion design principles that are agnostic to design tools and leverage motion design to direct attention and communicate the relationships between objects.

Here are the playable videos of the final interaction sequences:

Onboarding Sequence

In order to establishing inter-continuity within a series of screens to sustain the user’s prolonged attention, I applied movement types that are consistently timed. I made sure to maintain a sense of continuity throughout the transition of UI components.

Meal-Planning Sequence

I sought to optimize the content browsing experience by maintaining the proportion of images to create continuity as the user drills down to deeper levels of content.

Meal-Recording Sequence

I utilized the principle of parenting to link one object’s property to another object’s property to communicate to users the nature of the relationship between them. For example, a realtime interaction where the user’s horizontal scrolling motion corresponds with the change in rotation of a different object in the screen.

Food photography and avatar icons are courtesy of the following sources.

Next

Uncovering user insights that redefine the MVP and inform the content structure of the Product Page