T-Mobile App Asset Library

Following the redesign of T-Mobile’s mobile app, a colleague and I were tasked to dissect each flow and create a symbols library (Sketch) for their UX Design team using an atomic design methodology.

Role: UI Designer

Software: Sketch, Adobe acrobat

Skills: Atomic Design Methodology, Redlining, symbols Library, Define Text styles

Defining the Project

We started by defining the scope by: analyzing 172 screens and reducing duplicates down to 49 screens, defined when check point dates with T-Mobile team, and started to think of naming nomenclature and how to divide the workload.

The Process

After overviewing the user flows, we defined 49 unique screens that we would build the symbols library from. From that, we printed the screens and started noting sections and breaking them down into their smaller elements. We cross referencing a limited style guide that T-Mobile provided us to build the text styles. By having all the screens in front of us it allowed us to create logical naming convention (we would later have to get this approved by the client).

Client Meeting

With the short on boarding we had, we wanted to make sure we had enough to for the work. That meant understanding the ask and only having four client check-in meetings.

On boarding
Define Naming Nomenclature and one-off elements (Adobe AEM elements and so forth)
Check-in of text styles and symbols create after two days.
Final handoff with all symbols scaleable and working to create basic screens for their UX team.

Delivered

A robust symbols library that included T-Mobile’s text styles was created. This included the smallest elements such as icons and colors to more complex nested symbols such as form fields and various modals to streamline workflow for T-Mobile’s UX team.

Takeaway

This was my first time working extensively with symbols, text styles, and learning the complexities of how they interact. In the middle of creating symbols there was an update to Sketch that gave us a minor setback. However, being organized and using certain plug-ins helped with completing the task ahead of the delivery date. I had a greater understanding of how symbols can help designers mock-up visuals quickly and maintain consistency within a brand.