Wingbuddy

Take off to the Buddy Universe

Wingbuddy

The Beginning

In November 2020, I participated in the first inclusive online hackathon, where developers and designers developed prototypes for digital aids in order to break down existing barriers to access cultural events – organized by KuDiBa (Kultur Digital in Berlin). I developed the winning WingBuddy idea as UX Designer with a cross functional team. The briefing originally referred only to events, but was expanded to include all kinds of activities due to the pandemic situation. I also designed the presentation which was featured internationally:

The Occasion

After completing my UX design course at Career Foundry, I decided to take the follow-up „UI Design for UX Designer“ course. Instead of choosing one of the given projects, I wanted to use the occasion to start with the UI and the further development of the low-fidelity wireframes I created as a result of the UX research during the hackathon.

My Role

Skills

  • User Personas
  • User Stories
  • User Flow
  • Sketching
  • Wireframing
  • Prototyping
  • Visual Design/UI

Tools

  • Pen & paper
  • Figma
  • Adobe Photoshop
  • Adobe Illustrator
  • UnDraw.co
Wingbuddy Overview

The Process

People that face different physical or cognitive challenges often need an escort to attend cultural events. „Inklusion muss laut sein“ already has a database of over 3500 people who would be happy to accompany someone to a concert or a visit to the theater. However, they still have to search the entire list for each request to find suitable „match“ to make an accompaniment possible.

Problem Statement

Until now, there is no tool that allows people with disabilities to independently search for a companion who shares similar interests.

We need a tool that allows people to post an event and receive suggestions for volunteers that meet their own defined criteria.

User Persona

Based on the available information from the briefing regarding target group and user research, I further developed Sylvia as persona.

Persona Sylvia

User Stories

To better capture the perspective of my user, I have developed user stories based on the user research.

User Stories

User Flow Diagram

Based on the given brief of user needs, I devised a user flow diagram to include relevant user flows.

User Flow

Mood Board

The starting point for the creation of the mood board was the color #7f086e, which has already been used by „IMLS“ before to promote the „Buddy Universe“ on their channels. I decided to use a darker purple as my primary color which combines perfectly the warm indoor and the fresh outdoor feeling I want to transport.

User Flow

The Result

Because of the subject matter, our users will cover a range of possible dissabilities that may make it difficult for them to use digital applications. For this reason, explicit attention must be paid to making everything as easy to use as possible. Large areas, descriptions of individual actions and an obvious help option, which is otherwise often hard to find.

Style Guide

Typography Colors Logo & Icons Icons & Buttons Icons & Buttons

Wireframes

Since our users need to be able to access the application at events or otherwise on the go, I assumed a mobile first approach.

Dashboard

Wireframes Steps Dashboard

Main User Profile

Wireframes Steps Profile

Final Screens Examples

Final Screens

Progressive Enhancement

After developing the High-Fidelity Wireframes, I worked on further breakpoints for different viewports to provide users with more options and convenience on larger screens. I kept my 12-column layout, based on 8px grid and only changed the margins from 24px (mobile 360px x 640px), (iPad 760px x 1024px) and 240px (Desktop 1440px x 1024px).

Dashboard

Breakpoints Dashboard

Buddy Matching & Profile

Breakpoints Buddy

The Future

Since this project focused on the UI, the extended user research and especially the testing of the prototype have not received enough attention so far. Having previously taken the UX Course and approached the UI task from a UX designer's point of view, the lack of my own extended research and limited capabilities and resources kept bothering me as I lacked the user's perspective during the development.

Next Steps

The next, necessary steps to move forward with WingBuddy development:

  • Test with exiting users of the „Inklusion muss laut sein" buddy service.
  • Extension and specification of the necessary icons for Categories, Needs & Restrictions.
  • Creation of further screens, especially the onboarding and sign up process with personalization.
  • Adding of necessary texts, which result from legal point of view.
  • Take the actual goverment rules and Covid-19 Circumstancen in account.

Thanks for Reading!