loader-logo
  • Client

    Flatiron School
  • Role

    research, information architecture, interaction design, UI design, testing, and analysis
  • Product

    Native Mobile App & Marketing Website
  • Deliverables

    Domain Research, Visual Competitive Analysis, Logo/Brand Design, Style Explorations, Wireframe Evaluation, High Fidelity Mobile Designs, High Fidelity Responsive Marketing Website Design , UI Kit, Style Guide
  • Duration

    September – October 2019
  • Tools

    Sketch, Photoshop, Illustrator, InVision, Principle, MapBox, Miro, Google Drive
Since 1986 there has been a 5x increase in how much information Americans take in each day.

2014

1 hour and 37 minutes per day

vs

2019

2 hours and 16 minutes per day

Designing Filters for Information Overload

I was asked to create the visual design for a mobile-responsive platform that reimagines how people can search and find activities that reflect their interests. To do so, I was required to take user research conducted by a UX team and produce high-fidelity designs. At the end of 6 weeks, I submitted a high-fidelity prototype of my proposed solution.
bee quote

“Thinking about information overload isn't the problem; thinking about filter failure is”

Clay Shirky

Answering the Age-old question: What do you wanna do?

Amy Grant, City Lover
Nate Young, Event Junkie
vente check

Active

vente check

Urban

vente check

Professionals

User Personas

The UX team created two user personas that embodied the target audience. Amy Grant represented city lovers and Nate Grant represented event junkies. Their combined frustrations indicated that too much is happening and they don’t have enough time to search for local event happenings.

Problem Statement

Because of information overload, active urban professionals need a way to filter activities so that they can find the ones that best align with their interests.

Visual Competitive Analysis Affinity Diagram

First I conducted a visual competitive analysis to shape the brand design and look for competitive advantages. I used Affinity mapping to organize my research findings. Each time I organized the post-its, I found different patterns.
Since the competitors provided by Flatiron were either outdated or absorbed by other companies, I also looked to indirect competitors and non-competitors such as Facebook Local and Snapchat for inspiration based on their related content and innovative features.

Takeaways

Bright

reds and blues

Sans Serif

some handwriting display type

List Oriented UI

especially in terms of cards

Competitive Explorations

Bright

Yellows and split complementary accent

Sans Serif

Some swash lettering brand display type

Map and Calendar Oriented UI

Modal sheets/layers (See FacebookEvents/Google Maps top layer model)

I began concept design by funneling my themes through a process of brainstorming towards brand development by brainstorming and creating a mind map. I then made a list of phrases that could work as divergent themes.

Phrases

Make moving experiences

Make memories

All things to all people

People Together

Come Together

Get Together

On Schedule

Be Social 

Busy Bee

Plan of action

Pro-active

Good Times

All the time

Highly active

Magnetic moments

Activity hub

Sketching

Themes

Highlight Life

Social Bee

Come Together

highlight letter_1

Highlight Life

A highlight indicates the most interesting or memorable part of something. It is an area of lightness. The marker stroke is indicative some something worth remembering—something worthwhile. Here the handwritten style text is active and the letter V resembles a the check-mark of a to-do list­­—signifying accomplishment. ​

bee

Social Bee

A bee is a social gathering where one undertakes a communal task or competition. The bumblebee is also a social creature. Here the bee is created out of single quotation mark to symbolize communication. The head and the heart are conjoined with the letter v-like antenna. Similarly the swash-like wings create a hidden initial. The swooshes reach out to embrace one another, and even the form of the bee's quotation mark body stands in for the idea of cross-pollination (stimulating influences among diverse elements).'

star

Come Together

A star is symbolic of the human form with a head, two arms, and two legs. When someone marks something of note, they are said to star it. Here 5 simple and geometric letter V’s come together to form a single minimal star shape that stands in for the congregation as a whole.

Preference Testing

To choose between the variations I conducted 2 preference tests. The first was a logo preference test which showed Social Bee and the Star design to be the most popular amongst the 10 participants. Likewise, 3 out of 4 participants preferred the Social Bee style tile, which showed the UI elements more in context.
bee quote

"Not exactly sure. It just pops more than the others. I like the striking B&W and the antennae making an almost heart was evocative."

1 %
HIGHLIGHT LIFE
1 %
COME TOGETHER
1 %
SOCIAL BEE
Ubuntu Aa
Ubuntu type

#000000

#FED23D

#AA171D

#53B192

#E4947E

social bee

Wireframe Evaluation & High Fidelity Designs

Once I had a design direction, I evaluated the previous UX wireframes to find areas for improvement. These wireframes focused on user onboarding as well as the major screens that corresponded with the bottom navigation. The complex filtering system seemed to focus on categories/interests and meetups/groups. I began restructuring by turning my focus first towards the search event filtering functionality so that it was more intuitive and fluid for our active, urban professional personas Amy and Nate. I did this by creating a pinchable heat map for way-finding and a calendar for scheduling.

Share On
Next