Digital Design Library:
Components and Patterns
Roles and responsibilities
My role:
Skillset:
Time line:
Work nature:
UX Designer- Individual Contributor
Research + Synthesis
9 months
Agency- Critical Mass
Context
Our client wanted to set up a Digital Design Library for their iOS, Android and Web applications while aligning it to the bank's* brand. We didn't have access to actual users or how the web team of this bank was set up.
By the time I onboarded the project mid-way, the Andriod portion of the work was already done. So we needed to make sure that there is interoperability between the two platforms. If someone switched from Android to iOS, they didn't have to relearn to work the app.
*Due to non disclosure agreement, the project is stripped off the bank's brand. It is one of the largest top 5 banks in the U.S.
My Process
Research
-
My work started with a lot of research and trying to understand the ins and outs of the iOS mobile platform. I started on the Messaging components- Cell, Banner, View, Alert Action Sheets, Alert, and Alert Take Over.
-
Research on WCAG 2.0 AA requirements for messaging needs.
Challenge Encountered
-
How is the priority of different messaging components determined?
-
What type of message should go in which type of messaging component?
Solution to address challenge
-
Reverse Maslow's Hierarchy of Information needs
-
Mapping Components to Scenario Matrix
Final Delivery
-
Detailed documentation of Messaging needs
Lessons Learnt
Research
What is native to the iOS platform?
Human Interface Guideline- Apple Design System
Spent 8 hours x 5 days x 9 months = dreaming about iOS at night.
A huge portion of my working days researching the Human Interface Guidelines on Apple's website in detail.
Understanding Accessibility guidelines
Competitive research
To understand user exceptions and behaviour, I researched competitor and trendy apps that use iOS components.
Research Synthesis
Understanding the existing messaging needs
I documented the trends observed in the competitive research to align the end user behaviour and expectations with how iOS wants you to follow the messaging components.
Flow diagram to understand messaging needs of the bank
To help establish a relationship between the component and messaging needs of the bank, I mapped a flow chart. The overlap of messaging components with types of information being delivered to the user became more obvious.
For example, iOS would never greet it's user 'Welcome back!' in an Alert format.
Challenge encountered!
Going above and beyond the ask
To understand which type of message should get what type of messaging pattern (Alert vs Banner vs Action sheet). This was needed for the users of this design library to determine when to use which type of messaging pattern. I decided to dig deeper to get to the root of the problem, which is, determining the type of messaging components to use for the message that appears on screen.
I reached out to my counterpart on Android to look for insights but they didn't have much there to draw from. I also reached out to my manager to challenge my understanding. They encouraged me to look into it.
I continued my research and, came up with a (reverse) Maslow's hierarchy of (messaging) needs.
Solution to Address Challenge
Types of messages
I came up with (Reverse) Maslow's hierarchy of (messaging) needs
Messaging Scenarios
Mapping components to scenarios matrix ©
Messaging component priority established
Outcome
Messaging needs based on information priority
Final delivery
Messaging pattern
Also Delivered
Alert
component
Loader component
Button component
Tabs
component
We delivered 27 components and 16 patterns for iOS and a similar amount for Android. Android had a few extras.
Lessons learnt
-
In an industry that is ever-evolving and changing every minute; the value of research from credible sources is the key to deriving a creditable hypothesis that will stand the test of time.
-
To synthesize results from extensive research and reach a conclusion that will stand the test of time, one has to break the problem into its nuts and bolts, the first basis from which a thing is known a.k.a First Principle.
-
The user experience on Android vs iOS should not differ drastically yet feel native to its natural environment. To deliver on a huge ask, a lot of collaboration and coordination was required.