Rolling up my sleeves to tackle research and design process from start to finish ✊, creating a seamless 'app interface' with the Material 3 Design System.

Collaborating closely with two Flutter developers, two Product Owners, and receiving guidance from IT Lead.

WHAT I DO?

UX Research, UI Design, UX Writing, Illustration

DURATION

For Partner -> September - December 2023
For Driver -> February - April 2024

OUR USERS

For Partner -> Troben Business Partners
For Driver -> Troben Driver Partners

BACKSTORY

This is about why we work on this product,
Based on that user’s pain points, why not boost efficiency with a mobile app and give it a fresh, expansive feel using the Material 3 design system?
Main Reason:
  • To enhance app accessibility through light and dark mode,
  • Give Fresh interface with better user experience,
  • Covers a wider range of users on Android and iOS,
  • Covers a wider range of users on Android and iOS, So that Troben partners using one stop point app.

    • WHO I'M WORKING WITH

    For each project I dive into, I got the brief from the Product Owner through backlog docs and user flows.The backlog lays out what info needs to pop up on each page along the journey.
    Throughout the design process, the Product Owner and I frequently engage in discussions to pinpoint user needs and pain points within certain flows. Additionally, I conduct design reviews with our IT Lead, whose insights shed light on the technical aspects of my designs. These conversations help me to carefully consider each design decision, ensuring the best possible UI design at every turn.
    After finalizing and getting approval from the Product Owner, I typically propose my design to the Lead IT and Dev team. I ensure clear communication regarding color schemes, micro-interactions, and component functionalities. The development team also provides valuable feedback, reminding me to anticipate all possible user interactions within each flow.

    THE ✨PROCESS✨

    It all began with diving into research about 'What is Material 3?' and understanding its functionality. The dev team introduced me to Material 3 documentation via Material 3 Website. Exploring this resource, I delved into the latest features of this framework, particularly focusing on the new color system and UI components for our product.
    The design process kicks off with the creation of a color system, encompassing both Light and Dark Mode with 2 variable colors. Truth be told, this was the most challenging process. Despite the availability of a color generator for Material 3, it didn't quite align with our brand palette. Thus, I embarked on numerous rounds of trial and error to fine-tune the color system, ensuring harmony across both light and dark themes. It was crucial to execute this phase meticulously to avoid any confusion for the dev team.
    After establishing the color and font systems, I dive into UI design while concurrently developing components and variants using atomic design principles. Each page and flow is crafted in alignment with backlog priorities and existing web partners, with careful adjustment of content to fit mobile screens seamlessly and efficiently.
    Throughout this process, I document our design system, called 'TBDS' (Troben Design System). Feel free to explore it through this link.
    Months of dedicated work have gone into crafting delightful UI and UX designs for this mobile product, with the UI evolving iteratively based on research insights and feedback from the Product Owner, IT Lead, and Dev team.

    FINAL PRODUCT

    I'm thrilled to unveil my final work on the fresh faces of the 'TROBEN Partner App'! Here's a glimpse of what's in store. It'll be launch soon!

    WHAT I LEARNED?

    After diving deep into research & design, and.. umm.. adding a pinch of friendly 'debates' with the dev team 👊💢, here's what I've uncovered:
  • Brushed up on my design system skills with Material 3 Documentation
  • Dived into fresh UI components and micro-interactions via Material 3 Documentation
  • Nailed down the effective way to communicate my design with the dev team
  • Stayed open to the dev team's insights and frameworks, enriching our product perspective together
    • © 2023 NABILLA PUTRI SULAIMAN. ALL RIGHTS RESERVED