Icebrekr - Design Journey

There are many events happening, personal or professional. Personal events such as parties and professional events such as conferences, meetups etc. When someone makes their presence in the event, it is always super hard to find the right people who we need. For example, I’m in a tech conference and I am in need to meet a web developer who could help me create a web application. But I don’t who is what. And this is the exact problem Icebrekr app is solving.

Ice + Breaker = Icebrekr. Breaking the ice between two people in an event and helping them network.

Icebrekr checks people ‘Nearby’ in bluetooth range, by default. While in an event, the app uses both internet and bluetooth to capture both ‘Virtual’ and ‘Nearby’ attendees. By providing relevant keywords, users get a list of people in the event they can connect with, personally or professionally.

The app runs both on Android and iOS. The app faced many usability problems in flow level and visuals, which is the main downside for the app to not earn proper revenue. Hence I proposed to conduct a UX audit for the entire app. And based on the results and suggestions, we can prioritise the next steps.

FigmaIcebrekr Mobile (Copy)Open on FigmaOpen

UX Audit (Since it is an existing app)

User feedbacks

Received through slack and video calls where the client directly asks people in the event to install and use the app

The app has received a warm welcome among people along with feature requests

Phase Planning

Process extraction & Refinement

Information architecture

Wireframe

Design System

Prototype

*Research was skipped as the app required fixing the experience first.

Process Flow is the most important artifact in my design process. This is the part where the Stake Holder, Design, Development and Testing teams align together. This artifact requires signoff from all the 4 teams in order to proceed further. Process flow is a swimlane flow chart where each lane is dedicated to a persona. The reason this artifact is gfiven such an importance is because. the stake holder exactly knows what they can expect how the app should work, developers can start working on backend structure and front end logics and testing team can start writing test cases.

Information architecture comes next, as the actions are recorded in the process flow, now it is time to convert these actions into screens, or fit in relevant screens. The information architecture is also reviewed with dev team and the stake holder so devs can start wotking on the front end heirarchy.

FigmaIcebrekr Process Flow & IA (Copy)Open on FigmaOpen

(Flow lines might be missing due to migration)

Once the information architecture is defined, the screens need to be visualised. I used a tool named ‘Balsamiq’ for wireframing. Unfortunately, I am unable to show Icebrekr’s wireframes here as they are with the client.

But I have attached a few images how a wireframe would look like

The design system was built based on the elements present in the wireframe so only required and relevant components are present for the development, thus avoiding unwanted dev cost, effort and time.

What I defined in design system:

Colors - Light and dark mode

Typography Styles

Corner radius, Spacing and padding

Icon system - Font based and Custom SVG (swappable)

Components (Based on colors, typography and icons defined so far)

Please feel free to explore the design system below - Figma Login required

FigmaIcebrekr Design System (Copy)Open on FigmaOpen

Here is one of the flows done for Icebrekr v2.5:

FigmaIcebrekr Mobile (Copy)Open on FigmaOpen

App Store Link: