UNIT 4 REDESIGN / iOS APP / UX DESIGN

Project

Academic, UX Diploma

Duration

2 weeks (June 2024)

My Role

1 of 2 UX Designers

Tools

Figma, FigJam, Pen, Paper

10 Usability Heuristics for User Interface Design

Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.

Landing Screen

Issue Description

  1. Excessive whitespace on the landing screen leaves users without clear direction.
  2. Typography, icons, and CTA size are too small.

New Landing Screen

Design Solution

  1. A tab bar for greater user control & clarity.
  2. A context message and graphic to direct the user.
  3. Increased typeface and button size to align with external standards.

Key Learnings & User Insights

Alerts Screen

Issue Description

  1. Navigation is quite difficult on this screen. Bike Alerts (stolen bikes) are listed chronologically. The size of each entry makes for lots of scrolling.
  2. The most crucial information has a light typography and once again the sizing is quite small and difficult for a user to read, especially if they are needing this information quickly.

New Home/Alerts Screen

Design Solution

  1. Bike alert image sizing was reduced to increase scannability.
  2. Typography hierarchy is implemented so that the most important information is the most legible and scannable.

Key Learnings & User Insights

Bike Registration

Issue Description

  1. The original bike registration process takes more than 6 screens which are near identical
  2. Many of these steps are repetitive, where flexibility and ease of use are quite low.

New Bike Registration

Design Solution

  1. Typography and sizing was increased for legibility
  2. Multiple steps were condensed into 2 pages. Above shows 1 of 2.

Key Learnings & User Insights

Registration Review Screen

Issue Description

  1. The previous design did not include an image preview of the registered bike, which could leave users uncertain about their input accuracy.
  2. The "Next" button on the confirmation page served no functional purpose, creating confusion and interrupting the flow of the registration process.
  3. The CTA button's position did not adhere to design standards, leading to potential usability issues and inconsistencies across the app.

New Review Screen

Design Solution

  1. Image added to provide user reference for their bike registration review
  2. 2 CTA's condensed into 1 for consistency with the rest of the redesign to increase predictability for the user.

Key Learnings & User Insights

Garage Screen

Issue Description

  1. This shows the original Garage page, once your bike has been registered. There is no ability to scroll images and there are some obvious aesthetic issues.
  2. The toast notification comes from the bottom, blocking the tab bar which makes its first appearance in the app.
  3. User options are limited are confusing and overall lack direction for the user.

New Garage Screen

Design Solution

  1. Horizontal scroll was added to the images.
  2. Tab bar remains to guide user to next steps.
  3. Toast notification was moved to the top as part of general external standards.
  4. CTA added to prompt the user if they are in need of another bike register.

Key Learnings & User Insights