Verii

UX/UI Design Case Study
App designed to help students pair up and enjoy coffee chats
Keywords: connection, communication, match, scheduling, coffee chats, UX/UI case study
UX/UI Design for an NGO
The App is under development and is going to launch in mid-2021. (present with permission)
Project Brief
The purpose is to design a mobile application and a website for the client to encourage students and faculties to pair up and have coffee chats. How to help students smoothly sign up for a coffee chat? How to match students with similar interests? How to distinguish it from traditional dating apps? How to facilitate the scheduling process? How to help administrators monitor all the process and communicate with students? To solve all these problems, I conducted user behavioral research and synthesized results through interviews. With user-centered design methodology, I designed and tested user experiences that include information architecture, wire frames, graphics, animations, and clickable prototypes/mock-ups. I also conducted usability testing and iterated the design details. I worked all the time with the development team to realize my concept with consideration of our users’ needs.
Research

User Interviews

To better understand our users and find out their needs, concerns, and problems, I started with interviewing potential users. The questions focused on two aspects: experience attending Verita’s events and experience using dating and/or matching apps. Sample questions are as below.
After preparing the questions, 3 students helped me interviewed 9 users, each for 15-20 minutes. 6 of them have joined Verita’s events before, and 3 of them have used dating apps.
The interview had generated very fruitful results. I synthesized the main points into 3 categories decided by the process of a coffee chat: before, during, and after. For each of the categories, I analyzed users’ feelings and problems, and thought of possible solutions for the concept development.

Quotes

Here are some representative quotes by the users that helped me to define the pain points.

Persona

A persona was created to showcase the problems and concerns.

Pain Points & Solutions

The pain points were synthesized as below and I started to think of possible solutions.

Problem Statement

I came to a conclusion of the major problem statement as below with Amy’s scenario.
Design Development

Information Architecture_Version 1.0

Based on the synthesis of research and interviews, I crafted this first version of information architecture as a start point to do sketches and configure wire frames. It was iterated later as the design went deeper and together with the feedback from user testings.

Information Architecture_Version 2.0

After discussion and further design development, the iterated information architecture was revised as below.

Sketches

I started to draw sketches of the workflow and discussed with team members. After deciding a first version, I made paper prototypes and tested with the users.

Wire frames

After testing with users, I iterated the design and came up with following wire frames.

High-fidelity Mock-up

A high-fidelity mock-up and a clickable prototype was created. I am communicating with the development team to make this app come to life.
UX Design Features

A. Security Concerns

This app was designed in great consideration of the user’s safety and privacy. Below are the features designed to make sure that users enjoy a healthy coffee chat environment.

B. Help to facilitate the process

Features were created to help the users get a seamless coffee chat experience before and during the events that includes: sign-up, get-paired, meeting, and feedback.

C. Coffee Chat Timeline

This is the biggest feature of this app: an interactive timeline that helps users to monitor and take actions for each phase of the coffee chats. Before each coffee chat, an interactive selection tool helps them to easily choose rough available times. After getting paired, an optimized algorithm helps them to quickly schedule a meeting time and choose a location with their partners. During each meeting, an interactive conversation facilitator helps them to check the points and control the time.

Scheduling logic

Takeaways & Next Steps
The app is under development and will launch in mid-2021. Part of the development tasks became some students’ capstone project. I am so proud that I take the lead to design this app and work closely with all the developers. I have learned a lot from this project. Good developers also can also contribute a lot to the UX development part — they are also  the users. Never assume that they don’t understand design. I also learned how to work remotely and to collaborate with team members from different backgrounds.

If I had more time, I would like to do more user testing and iterate the design. I also would like to make animations to demonstrate the concept of some widgets. I strongly believe that the thinking process, user testing, and the optimization of the logic underneath UI component is the key to a successful UX design project.