Turnout

Date: October 2016

Project: Turnout, a mobile app for a Northwestern University start-up

Role: UI / IxD designer

 

Introduction

In this project, I worked with two other UI designers to redesign the user interface for a mobile app called Turnout, an event-finding platform. The main goal of this mobile app was to encourage students, especially freshmen, to discover campus life and to develop their personal community. This three-week-long project challenged me as a UI designer to create a better solution for the app both visually and functionally.

 

Understanding the market

To gain a better understanding of the current market, and to narrow down our focus and find new ideas, we began our research with a visual competitive analysis. This process helped us see a bigger picture of the market and make the pieces fit together to define the final design.

Understanding our client

In our kickoff meeting, we started with 20 Second “Gut” Test. We prepared eleven slides in different styles, including light UI, dark UI, and minimal style, in order to discern our client’s aesthetic preferences.

 

Define

 

Design principles

Based on our research and feedback from the kick-off meeting, we created a set of design principles. We revisited and revised them throughout the whole design process in order to create the optimal design for this particular product.

 

Trustworthy
Engaging
Friendly

Be consistent in design elements

Simplify CTAs & color palette

Use familiar design patterns

 

Design Inspiration

My design was inspired by the research as well as my understanding of the client’s branding personality, which is friendly, engaging, and trustworthy. I created three divergent style tiles: Nourishing, Minimalist, and Dark UI.

Nourishing

The concept of this design was to evoke a sense of engagement, and to encourage students to open up, to explore, and to communicate with other people. Green was my first color choice, since it has many positive connotations, such as hope, growth, and relaxation.

 
 Minimalist

During the kick-off meeting, our client emphasized that they wanted the design to be simple, clean, and modern. I employed the style of minimalism to bring a sense of easy access with no or very limited learning curve.

 

 
Dark UI

In order to explore the full possibilities for the design, I tried a dark UI as well. During the domain research, we found that most of our direct competitors were using light UI. I wanted to widen the horizon by testing the dark user interface, which could make the product stand out easily.

 
Feedback from client
  • Client liked Nourishing and Minimalist themes, felt that they aligned with the brand concepts: simple, clean and modern.
  • Client appreciated the exploration of dark UI, but them felt it was more appropriate for night life and thus did not match the brand voice very well.

 

Design and user testing

Based on the research and feedback from our client, I created a hi-fi prototype for the first round of user testing. We created two basic task flows: one for users to walk through an onboarding session and customize the mobile app, the other for them to RSVP to an event and create a new activity.

 

First hi-fi prototype

Test results

  1. Users responded well to the onboarding page and liked the text-overlaid images, but they did not like the big image on the top.
  2. The information was well organized, but different colors distracted users from the main details. Also, the images were too chopped up and did not deliver enough visual information about the event.
  3. Users did not like the form for creating new events, feeling that it was plain and not very engaging. It reminded them of school forms.

 

Iteration#1

Onboarding screen

 

Home screen

 

I did not test the revision, because although this design brought back the warmth that I had been trying to convey, it did not evoke a sense of excitement. Eventually I decided to use turquoise and pinkish red as my color palette to enliven the interface’s appearance.

 

Iteration#2

Test results

Positive feedback

  • Users found the design to be exciting, fun, and engaging.
  • Users enjoyed the pairing of turquoise and pinkish red, noting that the pinkish red caught their eye right away.

Room for improvement

  • Users hoped to reduce the steps to RSVP to an event.
  • Users requested a more modern-looking overall design.

 

I now had to figure out how to make my design look modern. After further research, I drew the following conclusions:

  • Simplicity was key. I kept the design as simple as possible by grouping related features and eliminating the labels of ubiquitous icons.
  • White space played a big role. After realizing how important the negative space was, I added micro white space to create breathing room for my design.

 

Iteration#3

 

 

 

Final design

InVision Prototype Link

 

Future considerations

  • If I had more time to ideate on Turnout, I would like to add more microinteractions through which users could interact with each other and become more involved in events.
  • I would also like to modify the filter function to help users find events more easily and effectively.
  • One of the users was color-blind. He gave us very specific feedback regarding to the color palette and font size. If I had more time to reiterate my design, I would look deeper into this area to create a design that could better serve the students with disabilities.

 

What I learned

  • To design a quality product, you must use carefully formulated questions to conduct interviews, and really listen to users’ responses to gain insight.
  • It’s important to keep challenging yourself to improve your design based on feedback. The more iterations you make, the better you will understand the users and the product.

 

Final thoughts

I really enjoyed this project, because it challenged me as a UI designer to put my personal opinions aside and try to see the app through the mind of a college student. The process of analyzing and refining data from user interviews and applying these insights to my design was complex and intricate. The challenge to keep pushing myself to reiterate, as long as time permitted, was the most satisfying aspect of the design process. Reiteration not only resulted in a better final product, it also helped me as a designer gain a deeper understanding of our users.