C & C Laundry and Cleaner

OVERVIEW

C & C Laundry and Cleaner is a laundromat cleaning service with several locations throughout Brooklyn, NY. Their desired app would allow users to place cleaning service orders and supply information to their customers. C & C was a client of iOS engineer Brian Green, who designed the initial app UI with running code.

MY ROLE

As Brian initially tackled this project by himself, he eventually sought my help in the latter half to increase the overall appeal of the app. He recognized there were areas for improvement in the overall interface. This was when my role came into action.

APPROACH

With limited ability to design for major updates due to the code being already setup/structured and time constraints, I worked to create smaller but impactful changes. My deliverables included UI elements such as color scheme, button design, text/font styles, etc. Additionally, I made suggestions in restructuring various flows, element placement, microcopy and more to optimize user experience.

SELECTED ORIGINAL SCREENS

Old-Screens.png

Initial Comments/Observations

  • There were inconsistent button styles and text styles, along with two competing colors used throughout.

  • The empty state screen for Orders was extremely busy with a background color, overlay image and large text. The CTA to begin user’s first order was also blending into the background color.

  • The CTAs to begin an order were placed in numerous locations, including the Home, Orders, and Prices tabs.

  • The Orders tab was missing a begin order CTA after empty state is gone- it was functioning only as a history or event log. This meant orders would have to be placed through Home or Prices.

  • After completing the order form, users were landed in the segmented control “In Progress”. “In Progress” section was meant to show any incomplete orders in the scenario where users exit out of the order flow at any point, while “Order History” showed completed orders. For a first order especially, landing back into an empty “In Progress” screen can cause confusion.

SELECTED REDESIGNED SCREENS

New-Screens.png

Notable changes to UX

  • In the Orders tab:

    • In the empty state screen, it was necessary to bring priority to the CTA to encourage order submissions. I removed the distracting background color and image, and retained only a simplified message.

    • I restructured the flow for “Start Order” to be prioritized as the main function in Orders instead of the other locations. This was also done to establish purpose and functionality in each tab. Orders was already displaying order history details, so it was the most logical location for the order flow to exist. I removed the CTA in Prices, as this tab’s purpose was purely informational. However, I kept it in Home, so returning users could access it immediately on landing if desired.

    • I rerouted user to land in “Order History” instead of “In Progress” after placing an order. By doing so, user would immediately see where their order was upon submitting.

  • Reducing visual elements/text and defining CTA states in Home tab:

    • Bring focus to “Start Order” button. This is the app’s main function but it is surrounded by text and an animated background (shifting bubbles). I isolated the button to be placed under company information.

    • Reducing “View” to a secondary CTA design, instead of putting it in a sized down copy of the existing button. Having button/CTA states are key to establish hierarchy.

    • Restructuring important information to be more prevalent. Welcome text and date were moved to be background elements. Necessary company information such as locations, offered services, as well as “Start Order” are easily viewable.

    • Deleting unnecessary text such as app name in header.


Notable changes to UI

  • Identified single color for main components.

  • Identified single font with limited variations in weight, size, and color.

  • Created single button design.

  • Adding color label to cards to differentiate between in progress and completed.

  • Shifting arrow icon in card to the color label to provide more obvious visual that card is clickable for more details.

  • Simplified home icon to bring familiarity and bolded text for selected tab state for emphasis.

  • Overall shift to flat design in elements to provide popularized styling.