Live Speed Networking Events - I had no idea what I was doing

You will notice that I was pretty much a full-stack designer on this one. There is a ton of mistakes and here is my case study on the process which I wrote ages and ages ago. I thought It would be funny to reflect on this and to see how much I grew since then.

A startup in San Carlos, CA, contacted me to help them create an app for virtual events and networking.

The initial scope was only to design the app, but the client expanded it with branding, marketing, and video editing, so in the end my responsibilities were UX/UI design, UI interactions and animations, interaction design, product branding, and video editing

During the research phase, I did a market analysis which helped me to understand what kind of app do we need, I continued with user surveys, personas, defined user journeys, flowcharts, and wireframes. I also validated the design with usability testing sessions and storyboards. Since the concept of the app was rather new to the market (at least in the business context) it was important for me to go through all these steps so I can get a better understanding of the nature and usage of the app. Afterward, I focused on the visuals, branding, and video editing

The biggest UX challenge I faced was the active call process. There were many interactions we needed to have so there was a problem of overcrowding the screen with too many information that would put a lot of cognitive pressure on the user. I had to keep everything simple enough because the purpose of the app was to make connections quickly. Another challenge was how to promote live speed networking events and the only reasonable choice was to use Eventbrite.

Discover

Competitor Analysis

The client didn't actually know what kind of app he wants to be designed. He had many different ideas about the app but was not sure what would work or not. I wanted to clarify his indecisiveness and started researching the market and events industry to see what kind of app do we need. Analysis showed us that we need an app that will allow users to do speed networking, similar to speed dating, in order to gain new professional opportunities and connections.

Our indirect competitors were Bumble and Tinder and features we identifies as useful to us were:

• matching feature

• swiping

• chat functionality

• interactive profile with swipe gestures

• business model

User Surveys

We couldn't decide on the direction of the app by doing only market analysis so I sent a survey to several groups of people. The purpose of the survey was to validate our market analysis and determine if the users would actually use an app for speed networking and if they would find that usable and reliable as live networking. This approach helped us to avoid guesswork and we were able to focus our efforts and define a strong direction for the app.

Personas

We recognized several types of users, each type had its own point of view on networking.

User journey map

After I figured out what our potential users want I created a user journey to see how they would actually use our app and how would they discover all these events. I also needed to define what would be the user’s motivation for using this app. Through user journeys, we brainstormed several reasons for that. We mapped all of the potential reasons that could make our users use it and it helped us to account for all possible cases, and in the end, creating the best possible experience.

User flows

After getting a rough idea of what are goals I wanted to figure out how would every step of our user look like, and what would interactions be.

Wireframes

After setting up the flowchart it was time for wireframes which were mainly focused on functionalities. Wireframes were composed with UI examples from different dating app UIs, it was quicker and more productive this way because we could think about the possibilities and interactions at the same time. After the wireframes were done we tested the idea with the real users, so I created a quick prototype in Invision.

Moodboard

I gathered inspiration from similar social apps so I could learn about the colors and mood that is being used

Trying out the colors on real design

This phase was done in iterations so I could see what fits best and maybe discover something new.

Color palette

I wanted a similar look and feel to other social apps but it needed to stand out, so I went with not so common color palette which in the end turned out really distinctive.

Typography

The font used was Open Sans. Open Sans is a humanist sans serif typeface designed by Steve Matteson. The font is not too narrow or too wide which was important since this is a mobile app. Open Sans was designed with an upright stress, open forms, and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

Icons and illustrations

Icons are by definition elements that communicate meaning in a graphical user interface. Icons are also a visual representation of an object, action, or idea. I wanted to keep visual consistency throughout the app by defining a custom set of icons and illustrations which would tell a unique story. All icons are outlined so it gives us a clean and lightweight overall feeling.

Naming and logo

The reason why the app was named "apphour" was simplicity and it sounded "catchy". We had a lot of different variations such as: appy hour, happy hour, appy phone, event phone, etc, but "apphour" stood out the most. The logo is a representation of what the app really does. It creates a virtual event badge for you and you to attend events.

Interactions and animations

One of the last things I did was to explore interactions and will they impact the experience of the app.

Sound and haptics

I didn't want the app to interact with the real world only visually I wanted physical and audio interactions which would impact the user experience and bring it to a higher level. I mapped out every action on which I'd like to implement vibrations and sounds.

Onboarding

With onboarding flow, I wanted for the user to easily and without a hassle start using the app. I started with Facebook login, but later on, I would also implement login by email, main reason for making it FB only at the moment is technical limitations. Onboarding also encapsulated device permissions with which we introduced the user to the purpose of the app.

Scanning and obtaining a badge

Scanning and obtaining a badge allows the user to scan the events QR code and to create his own event badge. At the moment app only works with Eventbrite events which means it could only scan Eventbrite QR codes.

Configuring a badge

The badge is a user’s profile that can be configured. Each badge separately represents a different event. The user is able to customize its profile for each event individually. That allows the user the ability to represent himself however he wants for each event he attends.

The badge is scrollable so there is enough space for information like interests, profile photos, and a short bio.

This behavior was influenced by popular dating apps like Bumble and Tinder. I figured out that users will be able to adapt even more to this app if they can interact with something familiar.

Active call and attending the event

This screen was a big challenge, we had a lot of elements that needed to be here. Attending the event puts the user on a video/audio call with other users attending the same online event as him.

If the user recognizes the other user in a call as a potential lead he can tag him with one of 3 buttons displayed at the bottom of the badge. Tagging the user saves him in messaging section.

Since the main purpose of the app is networking and our target audience based on user surveys would love to network quickly from the comfort of their home, each call lasts for 90 seconds. If the user is dissatisfied with the other users he can end the call and proceed to have another call.

Usability Testing

I conducted the testing session on a group of friends. Sessions were live and I was the moderator. Each person was commenting on their interactions and concerns while I was recording and documenting everything.

Promo material design

After the app was designed we needed to push it to the market. We started with event covers for Eventbrite, app store promo screens and assets for video promotions. I wanted to represent the app in a quirky but professional way, I wanted to give the users the idea that networking can be a fun way of making connections.

I also needed to create app preview screens for Apple app store, they had a strict set of rules for creating preview screens such as max of 6 screens on the app store, so I had to carefully extract the most important information and lay it out across the 6 screens. I managed to do it in only 5 screens.

Video editing

For each event we wanted to create a video that will be uploaded to Youtube, and published on the eventbrite event page. Video needed to have a promotional explanation about the apps purpose, and what is event about. Here is an example of the promo video. Videos were made with iMovie in combination with Principle.

What did I learn

I learned a lot about app development and UX process for mobile apps. This helped me to realise how importan proper planning and research is. Project also gave me a great opportunity to experience working with a US based client which really pushed my boundaries and made me learn and grow even more.

Explanation for specific design solutions

I chose this elaborate process of app definition because it was needed to define clear scope and business goals for the app. We also ensured the success of the app in the long run by defining personas and creating a pool of users that we certainly know will use the app.