Sonix Mobile App

Created with SONIX APP Ltd.

Sonix is a gaming technology app that is designed to deliver a voice chat experience with latency comparable to a live, in-person conversation. When I joined the startup, the app was made exclusively for Windows systems. My research revealed a substantial need for not only a MacOS application but a Mobile Application similar to industry competitor Discord. After presenting my findings to the C-suite of the company, they agreed that it was a necessary addition to the ecosystem and appointed me UX Design Lead in charge of the project.

What follows is a breakdown of how I led the research, design, and testing process for Sonix’s new mobile app. Releasing Q1 2024.

Page header

OVERVIEW

The Team

Myself (Lead UX/UI Designer)
Grzegorz P (UX Designer)

Tools

Figma
‍Google Forms
Respondent.io

Summary

The Sonix desktop app launched in September 2023 to favorable reception, especially in the European market where the company is based. Research conducted during my internship revealed that a mobile app would increase user satisfaction, leading to more downloads and better user retention. 

Project Goals

At the core of the Sonix mobile app is an emphasis on promoting quick, casual communication between friends and teammates. This cutting-edge communication app provides easy-to-manage organizational features to access direct messages or crews and groups.

My Role

After the end of my UX research internship, my research earned me a promotion to Lead UX Designer. My existing experience with UX design and prototyping added much to the efficacy of my skills.

My design process for the project is shown below:

A diagram depicting Tyler's design process from research to ideation to prototyping to testing

RESEARCH

Foundational Research

Before becoming Lead UX Designer, I spent the summer working as UX Research Intern for Sonix. Through the course of this internship, I conducted a series of focus groups and a needfinding survey to gather user feedback on features being introduced prior to the full beta phase release. As I started concentrating my focus on the mobile app and its requirements, I conducted a general mass-market survey and a curated focus group in order to gain quantitative and qualitative data from our target audience.

The survey was conducted to determine how Discord’s current user base uses their mobile app. I designed the survey with the intention of gathering data regarding demographics, gaming history, and most importantly their use of Discord’s mobile app. As Sonix’s main competitor, Discord’s user base was the primary market we wanted to investigate. It was also the easiest method of finding participants for a 7-member focus group conducted after the survey.

The surveys and focus group revealed that the key features that needed to be included in the mobile version of SONIX were group calling, profile customization, and quick access to grouped crews. With these features in mind, I carried on with the ideation phase. When asked, every single focus group participant and survey respondent indicated that they would not consider using SONIX over Discord for any purpose if it didn’t have a mobile app.

IDEATION

Design & Usability Goals

For this project, I decided to prioritize three design goals when adapting the app for mobile:

  1. Enable users to communicate with their teammates on the go.
  2. Provide users with transparency about their profile and options for customization.
  3. Promote familiarity by translating/simplifying the most essential and relevant features of the existing desktop application so that users can make a seamless transition.

Additionally, I decided to focus on two primary usability goals for this project. While all usability principles are important to keep in mind, I find it helps to specifically prioritize two:

  1. Generalizability - The system should utilize elements of similar sites to help the user feel more comfortable exploring the system.
  2. Consistency - Not only was it important to keep interaction methods similar across the mobile app but it was just as important to maintain consistency with the existing desktop application to allow users to seamlessly switch between the desktop and mobile experiences.

Information Architecture

Using Figma, I created a sitemap to serve as both a user journey and an information architecture overview. I then presented this to SONIX leadership for review and, upon getting the green light to continue, began iterating some wireframes.

A diagram depicting the information architecture for SONIX

Wireframing

With the help of another UX designer at SONIX, I created a series of wireframes to begin experimenting with and understanding the underlying structure that the app would have. Our goal was to create an interface minimal enough to ensure easy navigation while having enough substance to allow the user to accomplish all of their goals within our app.

A screenshot of the wireframes for the SONIX app

PROTOTYPE

Existing Visual Design System

When I joined the SONIX team, there was already an established design system. This meant that I didn’t need to put in the typical work necessary to develop a UI design system. Working within this design system allowed me to focus my efforts on the structure and development of my prototype. As always, UI principles such as typography hierarchy, color theory, and whitespace management (gutters, margins, etc.) are among the top of my priority list when developing a prototype beyond wireframing. I was able to maintain these values better than usual by implementing SONIX’s existing design system.

High-Fidelity Prototype

For the mobile version of the SONIX app, I took inspiration and design artifacts from apps used by gamers around the world. Apps like Discord, Whatsapp, and iMessage. Implementing these artifacts alongside adapted versions of the SONIX desktop style design system (including atoms, molecules, and objects).

A screenshot of a Figma canvas containing various prototype screens

Chats: When the user first logs into the app, they are greeted with one of two screens: a) a blank page with options for adding a crew to their list or b) a list of their current crews with any grouped crews arranged in a horizontally-scrolling grid fixed to the top of the page. Once crews and/or friends are added, the user can also use the switch at the top of the screen to toggle between viewing their crews and their direct messages. When in a crew, they can click the list of profile pictures in the top right to view a list of the members online and offline.

A series of screens found in the chats section of the app

Messaging & Calls: After the user selects a crew (or DM) to send their message to, they are greeted with a simple, familiar message exchange with a persistent UI element at the top carrying either a start call button (no active call) a collapsible join call or collapsible active call menu. By default, the “join call” and active call tabs are collapsed to allow maximum message visibility. A handle allows the user to pull the menu out to view a set of controls (volume, deafen, and mute) as well as an enlarged view of the call participants.

A series of screens found in the messaging and calls section of the app

Notifications: An important takeaway from user’s satisfaction with Discord’s mobile app was the way in which it organizes notifications. Users who are a part of multiple communities, groups, and DM conversations need to be able to view notifications according to context. This was a sentiment shared by nearly every participant in the surveys and focus groups I conducted as part of my work with SONIX. I designed the notification page to have a three-option switch, similar to on the Chats page, allowing the user to choose between a feed of crew messages, direct messages, or all new notifications.

A series of screens found in the notifications section of the app

User Profile: A crucial part of a personal messaging application is the user having the ability to customize their own profile to present the most accurate portrayal of themselves as well as providing transparency regarding the state of their profile. I sat down with Grzegorz, the UX designer responsible for the existing desktop application, to determine which profile features needed to be transferred and which would be unnecessary or too complicated to include. We decided that the only ones necessary for the user experience our audience deserves were a general overview, a list of crews they are in, and the billing screen from desktop. 

A series of screens found in the profile settings section of the app

TESTING

Usability Testing Method

In-person testing was conducted by holding brief one-on-one interviews with eight individuals belonging to various personas created by the SONIX team and I. Since the personas which most indicated a need for a mobile app were social and casual gamers, this persona made up the majority of usability study participants.

In order to determine how easy it was for new users to understand how to navigate the app, I asked participants to complete a set of tasks:

  1. Check the crew groups on the second page of the chats list.
  2. Start a call in “Banana Crew” and mute yourself.
  3. Check the two most recent messages across all of your crews.
  4. Change the profile’s username to your first name.

Post-Task Interview

I crafted a series of interview questions designed to gain key insights into user sentiments regarding the new design. Some of these are listed below: 

  1. Describe the most attractive features of the SONIX mobile app.
  2. Were there any aspects of the prototype that were confusing? Describe them and any solutions.
  3. Would you recommend SONIX and its mobile app to your friends/teammates? Why or why not?
  4. What would you recommend to improve the application?

Participant Feedback

NEXT STEPS

With the prototype and testing completed with favorable feedback, the next step in the process is release. As of the writing of this case study, the SONIX mobile app is slated for release in the first quarter of 2024. When that is released, I plan to test the app for myself as well as conduct casual interviews with users to gauge user sentiments about the functional application. I am excited to see how the public receives the fully developed version of the prototype!

Thank you for reading about my recent professional experience at SONIX APP!

If you'd like to work together, contact me through my About page!