ERMI ISAIS
  • UX/UI DESIGN
    • Justbooked Website
    • Skye Mastercard
    • Woolworths Q-Tracker
  • ABOUT
  • WRITING
  • LINKEDIN
Website

CMC Onboarding

A seamless onboarding experience for new trading customers.
Prototype

Overview

CHALLENGE

Redesign and build a new online application for new trading customers wanting to open a new account.

ROLE

I was involved from an end to end experience. I led the UX/UI design of the application redesign from initial research, information architecture, conducting stakeholder walk throughs through to dev handover and testing.

Solving the Problem

Picture
The current application is out of date in how it collects data from new customers and is in need of human centred design thinking and methodologies applied to it to make it a quick and easy customer experience.

Find a Solution

Above: Desktop wireframes of the homepage – iteration 4 of 4

ANALYSE DATA

As there was limited time to create site maps and user flows, I used the wireframe walk through to show the dev team the information architecture and how the user flows would work across desktop and mobile wireframes.

Results

​Based on tech feedback that building a Start and End Time couldn't be built by launch, I removed this functionality, kept Start and End Date, then led a final walk through with senior stakeholders for final sign off to start the build of the website.

Stakeholder Feedback

To test the functionality more accurately, Woolworths was chosen as the sole focus for launch. By narrowing the focus and now building the tool within the Woolworths website meant teams could focus testing and collate customer feedback for the single site and gather more accurate data.
Above: Desktop wireframes of the homepage – iteration 4 of 4

GATHER INSIGHTS

As there was limited time to create site maps and user flows, I used the wireframe walk through to show the dev team the information architecture and how the user flows would work across desktop and mobile wireframes.

Key take aways

​Based on tech feedback that building a Start and End Time couldn't be built by launch, I removed this functionality, kept Start and End Date, then led a final walk through with senior stakeholders for final sign off to start the build of the website.

Stakeholder Feedback

To test the functionality more accurately, Woolworths was chosen as the sole focus for launch. By narrowing the focus and now building the tool within the Woolworths website meant teams could focus testing and collate customer feedback for the single site and gather more accurate data.
Above: Desktop wireframes of the homepage – iteration 4 of 4

USER INTERVIEWS

As there was limited time to create site maps and user flows, I used the wireframe walk through to show the dev team the information architecture and how the user flows would work across desktop and mobile wireframes.

Process

​Based on tech feedback that building a Start and End Time couldn't be built by launch, I removed this functionality, kept Start and End Date, then led a final walk through with senior stakeholders for final sign off to start the build of the website.
Above: Desktop wireframes of the homepage – iteration 4 of 4

AFFINITY MAP

As there was limited time to create site maps and user flows, I used the wireframe walk through to show the dev team the information architecture and how the user flows would work across desktop and mobile wireframes.

Insights

​Based on tech feedback that building a Start and End Time couldn't be built by launch, I removed this functionality, kept Start and End Date, then led a final walk through with senior stakeholders for final sign off to start the build of the website.

Themes

To test the functionality more accurately, Woolworths was chosen as the sole focus for launch. By narrowing the focus and now building the tool within the Woolworths website meant teams could focus testing and collate customer feedback for the single site and gather more accurate data.

FEATURE PRIORITISATION

The link icon conveys connecting users with the best parking deals. 'Justbooked' is straightforward and describes the service.
Vector

COMMENTS

Vector logos, shapes and illustrated scenes define the playful look and feel of the Justbooked brand.

COMPETITOR ANALYSIS

The link icon conveys connecting users with the best parking deals. 'Justbooked' is straightforward and describes the service.
Vector

CARD SORT

Vector logos, shapes and illustrated scenes define the playful look and feel of the Justbooked brand.

Insights

To test the functionality more accurately, Woolworths was chosen as the sole focus for launch. By narrowing the focus and now building the tool within the Woolworths website meant teams could focus testing and collate customer feedback for the single site and gather more accurate data.

Wireframes

Once the wireframes had been handed over to the dev team, my next step was to build out the Justbooked brand, create a new Figma Design System, develop a UI look and feel and apply it to the desktop and mobile screens.

Based on simple brand logo assets that were supplied by an agency, I had to further develop all other brand elements, including the Justbooked look and feel, tone of voice, defining the visual hierarchy of heading body copy fonts, form elements and rules, creating colour swatches, icons, vector scenes and worked closely with my UX team to roll out all UI elements across all desktop and mobile screens.

DESKTOP

The link icon conveys connecting users with the best parking deals. 'Justbooked' is straightforward and describes the service.
Vector

MOBILE

Vector logos, shapes and illustrated scenes define the playful look and feel of the Justbooked brand.

UI Concepts

Once the wireframes had been handed over to the dev team, my next step was to build out the Justbooked brand, create a new Figma Design System, develop a UI look and feel and apply it to the desktop and mobile screens.

Based on simple brand logo assets that were supplied by an agency, I had to further develop all other brand elements, including the Justbooked look and feel, tone of voice, defining the visual hierarchy of heading body copy fonts, form elements and rules, creating colour swatches, icons, vector scenes and worked closely with my UX team to roll out all UI elements across all desktop and mobile screens.

LIGHT THEME 

The link icon conveys connecting users with the best parking deals. 'Justbooked' is straightforward and describes the service.
Vector

DARK THEME

Vector logos, shapes and illustrated scenes define the playful look and feel of the Justbooked brand.

UI Design

DESIGN SYSTEM

Once I developed a new brand look and feel, I converted these to Figma master components to build out a new design system. I briefed the devs on the styling then worked closely with my UX team to apply the master components to all desktop and mobile screens. See below style examples for colours and icons in the design system.
Design System Colours
Design System Icons

Above: Justbooked homepage UI design

INTERACTIVE PROTOTYPE

Once the Start and End Time had been removed from the wireframes, I mocked the UI design as an interactive prototype and led a final stakeholder walkthrough. I did a dev handover per user flow so the devs could apply the CSS at the same time I reskinned each flow and continued this process til all UI screens were done.
Prototype
Tip: Install Figma to view prototype

Outcome + Results

RESULTS

In 3 months, our teams (UX, tech, CX, operations, sales, accounting, marketing) were able to design, build and launch a new aggregator website with booking and payment functionality, simple 'My Account' section with a newly developed brand that has cut through amongst competitors.

INSIGHTS

Although time was limited for early research and testing to validate features, it allowed the project team to build quickly, soft launch, then test – making it a live, iterative process. Post launch feedback confirmed that users were confused by the combined Start and End Date calendar picker, so I reverted this to separate calendar pickers – see home.

RECOMMENDATIONS

Post launch – collate data and feedback (parkers and listers), prioritise bugs, address features that were descoped and create a feature prioritisation list based on customer feedback. Present recommendations to senior stakeholders with realistic timeframes and define clear measures of success.

Like my work?

Get in touch
CONNECT WITH ME
© COPYRIGHT 2017. ALL RIGHTS RESERVED.
  • UX/UI DESIGN
    • Justbooked Website
    • Skye Mastercard
    • Woolworths Q-Tracker
  • ABOUT
  • WRITING
  • LINKEDIN