Springboard’s UX Career Track program capstone project (individual effort)
The challenge of designing the UI for this app is that, since it is a rideshare app, the mobile app must be optimized for older adult accessibility. while the information on the mobile phone screens has to be made large enough to be legible, they also needed to be small enough so that sufficient content can be glanced on the screen (without ending up in a long scroll) to reduce cognitive load.
This is in addition to getting the look and feel of the app, and the whole brand experience, right.
I applied a methodical process of design that involved mood boarding, creating style guides, crafting a design system that complied with accessibility guidelines, and generating templates and screens using the atomic design logic. I also evaluated the design through user testing and made adjustments according to their feedback.
A design system that is functional, accessible, and emotive, which is crucial to excellent UX and a positive brand image.
This UI design exercise is a crucial factor of success for a larger UX capstone project, which I explain in more detail in Act II of this series.
To develop the brand and visual style of this app, I started by considering how I intend my users to feel when they are interacting with this app. I find creating mood statements to be a good way to start.
Hopeful. Reassured. At ease.
Based on these mood words, I thought of the following keywords that best describe the overall style I wish to create for this app:
Using Invision board, I collected and narrowed down potential colors and typefaces for the brand image, and inspirational photos, and stylistic references. (Click here to see the board)
Applying atomic design principles to UI design
Before moving on to the style guide, I made several foundational stylistic decisions.
- Typography: I chose Archia (for display) and Raleway (for body copy), which are both sans serifs that are very comfortable to the eyes thanks to large x-heights, wide letterforms, large counters — but with ever subtle quirks, which helps to convey an upbeat mood.
- Color: I chose blue sapphire and sunset orange using https://coolors.co/ for the following cultural and psychological connotations.
This was the beginning of my learning the principles of atomic design, which is the methodology for creating design systems that focus on the fundamental building blocks of an interface—from colors/fonts (“atoms”) to single UI components(“molecules”), then from larger groups of UI sections such as forms (“organisms”) to distinct sections and pages.
Below are the style guides that generated using this process.
Considering accessibility for older adults
One of the overarching challenges for this project is to make the user interface accessible to older adults suffering from widely different levels of physical, cognitive, and mental conditions. Due to older adults’ gradual decline of motor ability and eyesight, smartphones are by nature not the ideal device for this audience. Nonetheless, I insisted on working on the design for the smartphone screen, primarily because this is an app designed for enhancing mobility and mobile phones seem inevitable for the given purpose.
And the difficulty is this: having to render the information on the screens large enough to be comfortable to read, at the same time small enough so that enough information can be seen on the screen at any given moment to reduce cognitive load.
Since the app’s dominant users are older adults, compliance with accessibility best practices is at the front-and-center of the design approach. In many respects, the rules I applied goes above and beyond the requirements of WCAG 2.0. After designing a portion of the screens, I also evaluated the design using Material Design’s accessibility guidelines.
In the following, I detail the ways in which I strived to create an accessible experience for older adult users.
“Navigation should have clear task flows with minimum steps.” — Material Design guidelines
My usability test sessions repetitively showed that bottom tabbed menus (even if containing labeled icons in 48x48dp or whatever) are not user-friendly to the older audience.
I got rid of them and instead created an expandable/slide-out CTA panel on each screen that offers three very distinct possible immediate courses for the users to take next. The new UI pattern made a drastic improvement to the navigation experience by streamlining courses of actions and removing ambiguity for older adults.
Next, I also made sure that the important navigation pages, such as home screens, only displayed bite-sized pieces of information.
When I showed the design to the millennial generation, many suggested that the app appeared “too wordy” because all signposts were word-based. However, observing older users’ reactions to the screens, I realized that while they are indeed quickly overwhelmed by the sight of crowded text, they also feel much more reassured when instructions are explicit and unambiguous — which is much better achieved by words rather than images which have no universal definition. Hence, the key is to use 2–3 words at most to denote each CTA, and not more.
II. Clear feedback
“Your app should make it easy to navigate your UI, giving users confidence in knowing where they are in your app and what’s important. It should make it easy to understand important tasks, reinforcing information through multiple visual and textual cues like color, shape, text, and motion.” — — Material Design guidelines
The sequence for drivers to respond to booking requests from the riders while on the in-app chat system relies heavily on the clear visibility of system status for both parties. The app tells the rider what to anticipate when they send out their question, when a confirmation request is sent, when a booking is finally confirmed, and where the booked information can be reviewed. The tooltips and guidances all seemed necessary.
However, to my surprise, users demonstrated that often tooltips that are meant to help actually distracted and confused them. In other words, elements that I as a designer thought were prominent turned out to be obscure eyes of the users. The only way to know this is to test with real users.
III. Text legibility
WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). […]
Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. — Webaim.org
As mentioned earlier I used Archia as the header/display text and Raleway for their excellent readability.
To comply with accessibility guidelines, I had adjusted the H3 font to 18pts, which would offer more flexibility when working with color contrast threshold for large texts.
For the body copy, I had made the font size 14pts, which complies with accessibility guidelines. At first, I wondered if 14pts was large enough, even though it fulfilled the guidelines. Usability testing validated that the text sizes were indeed acceptable to older users.
In order to not overwhelm users, I also found that adding a lot of white space around small-sized body texts helped tremendously.
Material Design suggests the use of bold colors to support usability and legibility by conveying hierarchy and set the tone of voice. I chose two distinct colors — blue and the orange — to represent the drivers’ and riders’ app respectively. These two primary/brand colors are complementary to each other, so they each work well as accent colors for the opposite app.
That said, the blue color is better at fulfilling the WCAG 2.0 Level AA color contrast requirement than the orange. I tried to fiddle with the orange to raise the contrast ratio, but it would deepen the orange so much that it tended towards a red, which was neither an appropriate brand color for this purpose nor matched the blue very well.
So, to make it work, I carefully set the text styles so that the orange text, if ever used, would always be used in at least 14pt bold.
This app design adheres to a stringent version of the Z-pattern. I avoided the use of any tiled layouts or two-directional grids.
Older users tend to read a screen as they would a paper document, systematically line by line from top to bottom. I tried to ensure entire screens are meant to be read only linearly along the vertical axis and positioned all important CTA accordingly.
A tendency for senior users to read linearly and in one direction could be the reason why bottom tabbed menus, which contains multiple, tiny, somewhat fragmented, gridded elements that require scanning along the contrary direction, are not as comfortable for older adults to use.
V. Touch targets
“Touch targets should be at least 48 x 48 dp. A touch target of this size results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is 7–10mm. It may be appropriate to use larger touch targets to accommodate a larger spectrum of users.” — Material Design guidelines
I ensured that all icon targets have a minimal pointer target area of at least 48 x 48 dp requirement. Most do go over.
Since this app is tailored for the older adult audience, stylistically it had to be refreshing to the eye without looking juvenile. I must admit that the task to get the visual chemistry, the look and feel to feel right was challenging. On top of that, as a designer, I had to make sure that the screens were easy to use and visually comfortable for older adults that suffer from deteriorating eyesight and the wearing of motor abilities. In balancing these two requirements, my priority lied in striving for the highest degree of usability, and I was much less concerned with getting things 100% pixel perfect or creating with fancy assets.
If I had learned anything from this exercise, it would be that UI design is much more than merely a ‘colorful skin’ waiting to be applied to a bunch of monotone wireframes — the choice of colors and font sizes hugely impact the usability of a product. Without showing them to and testing them out with real, potential users, we will never know if they are successfully fulfilling their most fundamental functional purpose.