Vama Design Specification

Creating a detailed master flow documentation for Vama, an iOS messaging app.

My Role

UIUX Designer

Responsibilities

Hi-fi mocks, screen descriptions and annotations, navigation structure, define interactions, compiling design assets and documentation

Date

Jul 2024 - ongoing

Tools

Figma

Aiming for consistency, collaboration and scalability

As we developed Vama, our iOS chat application, we recognised the need of creating a comprehensive design specification file to ensure consistency across the app and give developers clear and detailed guidelines. This file would also act as a reference document for future updates and facilitate the addition of new features and screens. Ultimately, this file would be a blueprint for the development team and other stakeholders to understand the user journey and the functionality of our app.

Here are some of the key elements we wanted to include in this file:

  • Mockups: High-fidelity designs showing the final visual style and elements.
  • Annotations: Notes explaining design decisions, user interactions, and any other important details.
  • Navigation Structure: How screens are interconnected, including primary and secondary navigation.
  • Interaction Details: Descriptions of gestures, animations, and transitions.
  • Edge Cases and Error States: How the app handles unusual situations and errors.

#1 Onboarding

The onboarding function guides users through the initial setup of their Vama account. We will know this feature is acceptable if there is a high percentage of users who complete the onboarding process.

The Onboarding flow consisted of four parts:

  • The Splash Screen
  • The Onboarding Screens
  • Setting Up Access to Contacts
  • Edge Cases