Dollar Follower

How can we empower users to purchase goods that reflect their values?

The Project

The continued consolation of corporations makes it increasingly difficult for socially conscious consumers to know who they are supporting with their purchases. To bridge this knowledge gap I designed Dollar Follower, a mobile application that connects socially conscious consumers to information about the companies behind a product and the policies they support.

My Role

UX Research, UX Design

The Users

Our users consisted of socially conscious consumers who I divided into two user segments. The first is made up of Millennials interested in social justice topics, with previous experience using common digital platforms. The second are Middle-aged individuals with liberal ideals and the income to make elastic purchasing decisions.

Personas

Persona2.png

Age: 23

Occupation: Grad Student

Income: $22,000

Bio: Progressive issues are important to Brendan. He has a busy schedule going to school and working as a teaching assistant. He is also involved in several clubs that promote issues he is passionate about. Brendan always goes grocery shopping on student discount day to get the best bang for his buck.

Brendan McLean

Persona1.1.png

Age: 41

Occupation: Architect

Income: $102,000

Bio: Amy and her husband want to raise their two children in an inclusive and accepting environment. Her family’s health is very important so she purchases organic and environmentally friendly products. On most nights she picks up a few things at the store to fit groceries into her busy schedule.

Amy Thompson

As-Is Scenario

After defining our users I chose to relate to them through an as-is scenario describing how they would choose between two similar products based on each producer’s values.

User Goals

I created 2 user goals to summarize what our users wanted to get out of the experience I was designing for:

  • Feel like their purchases support companies alighted with their best interests.

  • Access relevant information about corporations in a way that does not disrupt their shopping experience.​​

Metaphor

To create a familiar experience I based part of the design on the user experience of a price scanner to create a metaphor for capturing invisible information from a product and communicating it to a user. 

Sketches

I started designing the interface by sketching out screens and how the user would interact with them.

Low Fidelity Wireframes

Developing the sketches further I created low fidelity wireframes.

Scan
Lists
Menu
ProductInfo
Ratings
Compare
Search

UI Patterns

While designing the low fidelity wireframes I incorporated several common user interface patterns to create a smooth experience that accomplished the user goals.

A. Overview Plus Detail

Users see an “overview” menu of options along the bottom and “detail”, or content above the menu, simultaneously to keep them oriented and allow easy navigation between pages.

Let’s users compare products by each category. 

C. Sortable Table

B. Extras On Demand

Allows the user to open and close a slide menu showing each page of the app that can be used for navigation.

A linear navigation between each screen by swiping left or right is easy to understand and facilitates one-handed use. 

D. One Window Drilldown

To-Be Scenario

Before progressing any further, I ran through the as-is scenario in the context of using Dollar Follower to assess if my rough design had relieved our users’ pain points.

Visual Identity

To define the visual identity for Dollar Follower I chose a color palette and designed a logo for the app.

Color Palette

A pallet of greens was chosen for their connection to ethical consumption and association with currency.

Logo

The logo combines a “D” and “F” creating a fluid path starting at Two points and ending at one, much like the experience of comparing products with the app.

The Result

The context-aware, user-focused process behind Dollar Follower produced a design that empowers consumers to easily purchase products that align with their values.

© 2018 by John McClelland