T-Mobile finance system UI design

Summary

 
 

My Role: project lead designer

 
Goal: Create a new finance system UI for new sales plans on desktop and tablets
 
Deliverable: Wireframes and illustrations
 

What I did:

 
    • Held design meetings with stakeholders and developers
    • Designed interaction and flow to meet finance system requirements
    • Incorporate user research results for quick iteration
    • Delivered wireframes for desktop and iPad software
    • QA-ed and redlined test software UI
    • The finance system was deployed in T-Mobile stores and call centers in late 2017
 
 
 
 

 
 

The Story

 

Held design meetings with stakeholders

 

Design Diagram
The diagram to illustrate the complicated system page flows.
As the lead designer for this new finance system project, I talked to stakeholders everyday to understand their needs and design requirements. During these meetings, I also check with developers for development limitations. My goal is to keep stakeholders updated with my design progress but always have users in mind when designing while meeting stakeholder requirements. I identified users were T-Mobile finance department, store and call center representatives.
Initial research for design ideas
 
 

Since users are different from stakeholders, I sent researchers to T-Mobile stores for initial ideas. I gathered info and understood what users expected this new finance system should work.

 

 

This image has an empty alt attribute; its file name is nfs2.png
An example of one popup design document delivered with documentation.
 
After gaining the initial understanding about users behavior for the old system, I incorporate the old system design pattern with the new finance system. My goal is to reduce learning curve and make it intuitive to use for users.
 
 
 

Design, get Feedback from stakeholders and revise

 
 

There are 6 parts of this complicated finance system. Most of the time, I worked on wireframes right after the requirement meetings. Then the design team had a peer review, then present to stakeholders in meeting the next day. Sometimes in the design meeting, I need to design on the fly and to show how I can carry out everyone’s needs in this draft UI design. I enjoyed encountering different kinds of challenges in design meetings.

 
 

Incorporate field research feedback for fast iteration

 

The example page of the delivered design document.
 
 

It is always terrific to know what my real users think about my design. Frontline representatives from stores and call centers provided great insights through usability research and interviews. The challenge was to incorporate their feedback while satisfying stakeholders’ requirements. For example, store representatives have concerns on how customers should sign their iPad easily during this finance agreement process while stakeholders want to display a complicated document entirely which will take most part of the screen. I had to think through flows and interaction details to match the needs of these two parties. Through multiple design iterations with my peer designers suggestions, I had the pleasure to satisfy both my users and stakeholders in the end.

 
 

I delivered wireframes and QA’d with visual designers in the end of this design process. Now I am very proud to tell people that I designed the interaction and interface of the finance software representatives are using in stores and call center.