Mobile app UI review

Splash

1. The style is left-aligned on page 4, but an unsaved center-aligned variation appears here. I created separate styles.
2. Just as the UI uses #111111 or #222222 for black, pure white (#FFFFFF) can result in "jarring" too-high contrast. I've opted for a muted white at #F0F0F0.
3. Sentence case is easier to read and more inviting than title case, especially when "Let's get started" isn't a title at all.
4. The subdued text "Welcome" doesn't add much to the context. It's redundant and can be removed. Now we can increase the size of "Let's get started."
5. I added a subtle text shadow on heading styles to help contrast with yellow.
6. I often used semibold so that I could preserve bold for emphasis, rather than just reinforce style hierarchy.
7. An accelerator to skip a bloated onboarding process should be available for advanced users.

Color

Poor color contrast

In Sketch and on my device, white text against a yellow background is horribly illegible. I knew this combination was going to fail contrast tests for accessibility.

The Web Content Accessibility Guidelines (WCAG) recommend a minimum 3:1 ratio for the relative luminance of foreground vs. background color for large text and 4.5:1 for smaller body copy. I tried changing the background to the other approved brand colors provided in the project brief. Blue (#0074CD) gave the highest contrast rating of 4.21, but still short of the 4.5 needed.

Earlier, I had arbitrarily set my toned "white" to #F0F0F0. By slowly raising its luminance, I found that #F8F8F8 provides a contrast ratio of 4.51 against brand blue. I changed my color variable in Sketch for white to this new value.

Saturated colors clashing

1. Of the four provided brand colors, yellow and red work well together. However, changing the background to blue creates a visual clash with the red location icon.
2. To start, the white shadow is strange. Shadows are dark. The shape should be changed to a shade of black.
3. Departing from flat design, adding depth to the icon may help it settle more naturally into the new blue background. I added a drop shadow to the icon.
4. I added a 50% transparent white ellipse behind the icon with a radial gradient to help reinforce contrast between red and blue. This gives the illusion of a light source and depth.
5. With the x-offset on the drop shadow implying the position of the light source, I elongated and offset the icon shadow to further reinforce the illusion of depth.

Destination article

1. To match the change from the Welcome page for better contrast, the yellow background has been changed to blue.
2. I had already added a subtle text shadow to the h1 style and increased its size. This looks excellent against blue on my phone screen.
3. The lede style is left-aligned here, but a center-aligned variation appears on page 1. I created separate styles.
4. I added a drop-shadow to the floating button as an affordance that it is an interactive element.
5. With the background changed to blue, the subdued icons are not clearly discernable as a shade of black. I changed these to white.
6. I used semibold for h3 ("Related articles") and h5 ("New Maison Margiela...") because bold was distracting. I felt that the related articles were of lower importance.
7. Sentence case is easier to read and more inviting than title case.
8. The numbered bullets are different colors for no clear reason. Although green is approved for use, there seems little sense in introducing a new color, especially when green could be better reserved for utility alerts. I opt to stick with blue.
9. The comments look too similar to the article content. They should be formatted in a way that more obviously sets them apart from the content. I reduced the font size and created a frame shaded in gray.
10. Since blue is prevalent, I changed the bookmark color to a bold red. Red functions as an accent color in this UI.

Open menu

1. When the time comes to design micro-interactions, there is an opportunity to animate the "plus" rotating into an "X," which is a cute trick commonly seen in today's UI trends.
2. To reduce opportunity for error, I increased the vertical space between these menu options.
3. When localizing the UI for use on an Android device, change the Share icon to the "three connected dots" image standard on those devices.