Some mockups have been abstracted to protect proprietary information
One day, a sales manager at Gryphon.ai had a few free minutes and thought, "I wish I could use my phone to quickly scroll through the important parts of my agents' recent calls." Our CEO liked the idea of a "TikTok style" mobile app, so I was tasked with distilling the post-call analysis player I had already designed into a more portable solution.
After several meetings with executive leadership, the VP of Product and I created a roadmap to prioritize must-have features and broke them into four main categories - clip playback, bookmarks, search, and profile. These became our menu items and allowed me to start designing user flows and wireframes. We used existing user personas to customize the experience based on roles and interests.
Once we had buy-in from leadership, I created hi-fi mockups in Figma. I applied a flavor of our design system that would be easy to implement with the limited styling capabilities of React Native. I worked with the newly-hired developer to familiarize him with the basic functions of our desktop products that he would be reproducing in mobile form.
Figma mockups to show initial user onboarding.
.
Dark mode mockups
Interactive light mode Figma prototype