Key Concepts

User Research, Sketches, Hi-Fi Mockups, & Presentation Session

Group Members

Lisa Koss
Jordan Kussmann
Rebecca Ta

Date

Jan. 2018

Event

WINFO Hackathon

Tools

Adobe XD

Role

UX Designer

Overview

I worked as a UX designer on a mobile application called IMPAKt during the Women in Informatics (WINFO) hackathon. IMPACKt aims to make an influence in a reach for equality, which was the topic of the hackathon. Our idea centered around an application that would allow users to browse companies that they shop at to see the kind of values that they have to see if those values match their own. A user might wonder does this company support organizations that matter to me? With this knowledge at hand, the user would be able to make informed choices on whether or not they should continue to shop there or if they should spend their money elsewhere.

Over the course of nine hours, my team brainstormed ideas and thought about user interaction flows in order to design a high-fidelity prototype of IMPACKt.

IDEATION

What could we create that could make an impact in the area of equality?

With limited time, my team had to quickly get together to decide how we wanted to approach the task at hand. We knew our idea had to center around equality, but how? My team brainstormed for approximately two hours, trying to think of anything and everything we could solve with some sort of design. Our ultimate goal was to create an application that would promote equality for our target audience in an easy to use application that would be beneficial to the user.

My team discussed many different types of problems that we noticed in our lives that would fall under the category of equality. We initially discussed how we could help reduce the stigma that those with mental health conditions face or even how we could connect young women with female mentors who are already in the technology field. We even questioned how we could help increase the trust between the surrounding community and police with a mobile application.

However, most of these ideas were difficult to think up designs for because we couldn't conduct any formal user research so we were only guessing at potential user needs and wants without any validation. This is when we shifted our focus to include an audience of young college students, such as our ourselves. We then started thinking: what if users could be informed about the values of the companies that they buy from? Sometimes we don't realize that the companies that we buy from may not support the same ideals that we do as individuals. We often see the publicized good of a certain company that we care about, but what about the companies that aren't in the news? This topic is what we aimed to spend the rest of our time focusing on.

User Research

With time constraints and limitations, how did we identify our target audience?

Without the ability to conduct any formal user research, we ultimately decided to target users who would be similar to ourselves: young college students who use technology on a daily basis. With no one available to interview, we had to ask questions to each one of ourselves while trying to think of what features and design choices would benefit other potential users outside of ourselves. Some of the questions we asked included:

• How important are your own values in deciding on where you shop and spend your money?

• Would you find it influential to scan an item's logo with a phone camera to see if the CEO/organization has the same ideals as me?

• What kind of features would you find useful?

• Could you see yourself using this application on a regular occasion?

We all thought deeply about the questions that we brainstormed for ourselves and each other so we could get a better insight into what we could design with the seven hours that we had left.

Design

What did our design process look like?

Brainstorming & Sketching

We realized at the start of our design process that our proposed application would cater to many different kinds of users in our target audience mentioned above. We identified those as:

• Users who are very strict on the companies who they will support.

• Users who may be interested in learning more about where their money goes, but may not be willing to drastically changing their spending habits.

• Users who are wanting to make a change, but don't know how to.

With these users in mind, we started quickly sketching out ideas that we eventually mocked up into high-fidelity screens. We didn't spend too much time on sketching out our ideas because we had less than seven hours left by this point. My team heavily discussed our ideas out loud with quick sketches on napkins before moving on to the high-fidelity mockups to ensure that we would have a working prototype of IMPAKt to present at the end of the hackathon.

Color Scheme & Mood board

At the start of our high-fidelity design process, we discussed the types of colors that we thought IMPAKt should be designed with. We were leaning towards blue, because it's a stable, reassuring color, but thought that it didn't have enough of an influence by itself. Because we wanted IMPAKt to get users feeling like they could make a change themselves, we wanted to also incorporate another color that would give them that power: purple. Purple is a color associated with royalty and ambition, immediately influencing users to create an association that IMPAKt is a tool that can give them the power to make changes in their own lives and for others.

The mood board below is a collection of blue and purple gradients, influencing our own color design choices as we created our high-fidelity mockups.

High-Fidelity Mockups

Sign Up Process

Upon sign up, one of the ideas that we had in order to meet the needs of the wide variety of users in our audience was to allow users to choose what values are most important to them. This way, IMPAKt can identify what companies align with a user's values. By putting each type of value in fairly big circles, users can quickly tap the ones that they want the app to keep track of while scrolling through the values available to them.

Search

When a user clicks the search icon in the upper right-hand corner of any navigation header, they are taken to the search feature that allows users to search a company by their name or take a picture of their logo. This additional camera feature allows users to look up companies that they may not even know the names of, increasing the user's awareness about their shopping habits. While taking a photo, the user can focus on the logo by tapping twice to get a more accurate reading.

Company Profiles

After searching a company or reading a news article on them, users can visit that company's profile to learn more about them. Immediately, a user's attention is drawn to a donut chart that represents how well that company's values matches a user's values that they inputted into the app. This quickly tells a user if this is a company they should continue supporting when they buy their products (first screen below) as indicated by the green or if the user should take a closer look at a company that is falling short of their expectations (second screen below).

Users can see a breakdown of a company's score, indicated by how well they uphold the values that they stand by. These percentages would be calculated based off of positive and negative media attention as well as any efforts they are making with the donations and causes that they support. They can even see the types of commitments and partnerships that these companies have, along with recent news about them, so users can decide for themselves how well their own values align with a company. Support and oppose buttons give users the organizations that they can support or platforms on how they can voice their opinions.

VALUES

Users can also read further into particular values by clicking on any value or related topics listed on a company's profile. Here, they can educate themselves on the effects of a particular topic, such as racial inequality, and what organizations that user can support in that area. This way, users can find out more about topics that they may not be familiar with and can even see what opportunities that there are where they can show their support, in terms of attending events or donating for example.

Organizing this information in short, bulleted lists with large, tappable images and buttons allows users to quickly read about the topic and then be encouraged to check out related organizations and events. Encouraging users to make an impact, whether it's by educating themselves or donating time or money to the cause, fulfills one of IMPAKt's goals.

Forum

One of the last features that my team decided to add was a forum. We analyzed the three different user groups that we identified and decided that a platform, such as a forum, would be an ideal way to get all users interacting with each other.

Users can post topics about anything that comes to their mind in order to hear others' opinions on a specific subject. Education through discussion is a powerful way to allow our users to make an impact in the world around them by realizing their mistakes or even educating others, such as their friends.

Formatting the fourm in a list view, with quick summaries of the topic along with it's title, gives users the ability to see if the topic interests them before tapping it. Including a green dot next to a topic shows users whether new replies have been made since they last checked, encouraging them to check back again if they want to still follow the topic's discussion.

Reflection

The WINFO hackathon was the first hackathon that I ever participated in and was definitely an amazing experience in my UX experience so far. Being under a time crunch of nine hours put it into perspective how important rapid, iterative design is in fleshing out initial ideas without focusing too much on any one part of the ideation, user research, and design processes. This allowed us to pick one idea, shift our entire focus onto it, and design something that we think our target audience will find useful.

I am very proud of my team for what we accomplished in such a short time. With that time constraint hanging above us during the entire process, we knew that we had to communicate with each other at every step of the process without holding back. To facilitate open communication, we promoted psychological safety so none of our team members would feel unsafe for sharing ideas or problems that they had with their tasks. This sharing made sure that we were only working on valuable pieces of our project in order to meet our deadline, scrapping any idea that was too broad to be implemented on time.

Overall, I think my team created a product that makes an impact in the area of equality by educating users on the positives and negatives that companies may be doing, which can affect the fundamental rights of a group of people. Being able to create a prototype of an application for a topic as important as this one was definitely a challenge, but also very rewarding when it all came together. By the end of the hackathon, I realized just how important it is to not get hung up trying to objectively figure out which idea is the best — sometimes it's best just to pick the idea that your entire team is enthusiastic about to create an end product that is well executed and meets the needs of its users.