bump

context

10 weeks / course project

team

ryan stephen, daniel kim, brayan jimenez ortega, alvin jeong

role

interaction design, motion design, sound design, research

intro

the problem

How might we translate the value of physically shared experiences for a socially-distanced world?

Due to social distancing rules brought by the global pandemic, people have been struggling with boredom, loneliness, and lack of motivation as a result of limited social interactions. People needed ways to connect with one another and enjoy spontaneity to keep them going.

process

our solution

Our solution is a mobile social app that mimicks real-life interactions of bumping into each other. It explores connecting with buddies and finding new connections in spontaneous ways.

research + synthesis

questionnaire + interview + pain points

We processed 90+ questionnaire responses and 12 interviews. Below are some core responses and the synthesized painpoints that we decided to design around.

persona graph

We processed 90+ questionnaire responses and 12 interviews. Below are some core responses and the synthesized painpoints that we decided to design around.

design principles

We developed 3 design principles based on our insights and pain points as guidelines for our ideation and prototyping stages.

ideation

down-selection

Using the 8x8 (crazy eights) method, we generated a pool of ideas which we narrowed down with our design principles. Some contextual questions were asked to solidify the idea: bump.

storyboard

We drew out a storyboard that imagines the context and visualizes the concept, which was important for us as we ideated specific features and use flows.

journey map + architecture

We created a journey map to envision the mood changes of the user while using bump and the system architecture diagram helped us make decisions when designing the interfaces and the experience.

participatory workshop

We planned and facilitated sessions of 3 activities to understand the range of comfortability in context of different types person-to-person interactions and age range.

prototyping

lo-fi

We collaborated real-time on Figma to create prototypes. The first step was to set up a unified layout for the application. Then, we discussed the color, shapes, and interactions. Lots of messy iterations!

visual language

After rounds of research, critiques, and feedbacks, we settled on the overall visual guide and interaction styles for Bump which prepared us to follow up with a high fidelity prototype.

key shots

We created a journey map to envision the mood changes of the user while using bump and the system architecture diagram helped us make decisions when designing the interfaces and the experience.

interactive prototype

Press the arrow keys or click on the screens to get through. Try it for yourself!