Tandem
A brand and website redesign aimed to improve social justice.
Client

Webflow

Service

UI/UX Design Service Design Visual Design

Category

Technology

Tandem

Website redesign
Logo redesign for Tandem

www.tandemmission.org

Tandem Website Prototype

Reimagining Tandem

Facing critical challenges from, from COVID-19, climate change, economic inequality, gender issues and more, Tandem was created to harness our good intentions and passion into action and impact.

What's the Problem?

Tandem's main problem is their inability to keep users engaged to allow them to complete the main user flow (take action on social issues).

Here's the Solution

Redesign Tandem’s current website and user journey in order to get information to users quickly and efficiently and improve conversion rates.


User Research

I targeted 5 participants that would help me gain insights to their current experience with the Tandem website. I wanted to understand the pain points they faced when trying to learn about social issues and making a decision to tale action on the issue.

A research participant shares her thoughts


Competitive Analysis

First I conducted a competitive analysis to better understand my competitors strengths and weaknesses. I looked for how competitors invited users to complete intended actions in the user flow.

I analyzed aspects such as: Usability and UI components, navigation flow, and the overall app experience

Persona

The insights I gained from my interviews and competitive analysis helped inform the persona of Maya. The majority of users had not visited a “social issues” website before, often had busy schedules and therefore impacted the value of how they spent their time.

User persona of Maya

Problem Statement

Maya is a busy young professional who needs a way to take action on social issues she cares about because she wants to quickly and conveniently see her direct impact on social issues today.

Journey Map

The journey map allowed me to better understand the user’s emotions and what actions and feelings they had at each stage.

Journey map for user testing

User Flows

A user flow was created for the persona of Maya. I wanted to better understand how she might move through the website from when she first arrived at the home page, learned more about a social issues she's interested in, filled out her personal info, and ultimately take action.

User flow for Tandem's current website

Lo-Fidelity Wireframing

The initial wireframes were informed by the user flow and helped visualize the design strategy. Each click through brought the user closer to learning and taking action on the issue.

Low fidelity wireframes laid out in a user flow

Usability Testing

Research Goals

My research goals during the usability test were to identify how long it takes users to complete the "take action" user flow and observe where they might get stuck.

Research Questions

Is there any part where the user gets stuck or slows down?

Are there any changes I can make to improve the experience and achieve a higher conversion rate?

What are the reasons users do not finish taking action?

How are the users searching for issues?

Methodology

A Usability Study

Location: In person

Length: Each participant session will last 5-10 minutes

Results & Iteration

After completing the usability study, I found a few issues in the user flow. Many users were engaged once they arrived to the home page but wanted more direction on the next steps for the intended user flow. This was the area I decided to focus my redesign on.

Before and after utilizing feedback from user testing

Accessibility Considerations

There are several tools I plan to implement to allow accessibility within the app. I plan on adding alt text, to allow a screen reader to read the content aloud. I would also like to implement a multi language interface to allow users to read the content in their preferred language.

Branding & Style Guide

The branding and UI focused on creating an active, bold, and empowered feel. I wanted users to feel encouraged as they move through the process. The logo was inspired by the aspirations of the company to "work together".

Color palette for Tandem's redesigned website
Typography used for this project

Final Prototype

Final Prototype

Ready to turn your vision into reality?
Drop me a line!
Message Sent!

I'll get back to you very soon!
Oops! Something went wrong while submitting the form.