Voices Mobile App
Background
In July of 2021, the Voices platform expanded their service offering from only voice over, to 4 categories; Voice Over, Audio Production, Music and Translation. During this expansion the product and technology teams worked to enable these new services on our web app platform and mobile apps. During the mobile app project we were looking to add our new service offerings, and update the app’s UI to better reflect our platform’s design standards and implement better accessibility standards.
We also took this opportunity to rebrand the mobile applications as a companion app for our talent users who are consuming Voices services on the go. This meant stripping the app of features that were used infrequently or encouraged behaviour we no longer supported.
The Team & My Role
The core team for the mobile app redesign included myself as lead designer, 1 product manager, 1 UX research, development manager and an outsourced development team. My role in this project was more involved than most other projects as it fell slightly outside our usual project structure. In this, I was able to coordinate with the various players to communicate project updates and push the project forward.
Research & Process
My initial research included reviewing the current mobile app to collect current state screenshots and create the current state information architecture. Then I began research on mobile app best practices and created a design system exclusive to the mobile apps.
Working closely with the development manager and product manager, I began creating hi-fi designs based on key decisions made by the operating committee. Once the first iteration of hi-fis were complete, we had a meeting with senior leadership including VP of Product and the CEO to present and discuss the designs. During this meeting I presented the proposed information architecture and hi-fi designs. After this meeting, we moved into usability testing. Once testing was complete the core team met to discuss the findings and create a plan to address the findings. I worked to modify the designs and reviewed the designs often with the tech team. Once the project was in development, I then pivoted my focus onto design QA’ing the app.
Tools Used: Figma, FigJam
Site map displaying the mobile app’s information architecture.
Prototype working on a mobile device
Validation & Prototyping
A new capability we implemented during this project was usability testing directly on our participants' mobile devices while testing remotely. This was a first for us, and proved invaluable when we were looking for feedback specifically on native mobile gestures such as swipe. For the prototype itself we used figma. We shared a figma link with our participants prior to our session then watched and recorded their screen interactions via Figma’s observation feature. This allowed us to see their screen and actions in real time, remotely. During the testing we gave the participants a series of scenarios and tasks to complete, along with follow up questions.
Through testing, we discovered that our main jobs to be done (Save for Later and Archive) were easy to complete with 5 of 6 participants using the feature easily with the buttons. However, we also discovered that the swipe gesture to quickly complete the same actions was not as intuitive with none of our participants discovering it on their own. We found that the swipe gestures were more intuitive on our messages feature, with 4 out of 6 participants easily using it. With recommendation from our UX researcher, we implemented onboarding for the mobile app to highlight and explain the swipe gesture feature.
Accessibility & Usability Improvements
In this project we had an opportunity to address some recurring feedback and accessibility concerns. The user interface of the app before did not comply with mobile best practices and accessibility standards. To ensure compliance I conducted research into AODA accessibility standards, mobile specific best practices, and google/apple app store requirements. Through this research I was able to create a set of rules specific to the mobile application and share them with the development team.
An example of the accessibility standards implemented
Results & Learnings
The mobile app is in the process of being rolled out into the Apple App Store and Google Play Store. Early feedback to the update has been overall positive and the talent community has been very receptive to the change.
Some of the highlights for myself from this project include implementing a new way to usability test in a realistic setting, designing for mobile specific interactions and features, and creating accessibility standards that can be used in further iterations and updates.