SaaS
Sector
Quality Assurance / Audit
Users
Brand
Auditor
Auditee (Factory)
View Frequency
: Occasionally
: 2-3 Times a Week
: Occasionally
Platform Nature
Part of a Series
The project focuses in enabling audit scheduling and monitoring in one single digital platform.
FAMS facilitates brands to check on factories' quality by managing audit process across planning, audit note-taking, correcting and reporting.
As our Client is the Brand, let's prioritize their main task SCHEDULING AUDITS in the revamp!
Pain Point Research
Survey Result Highlight
One of the major pain points. . .
Major Pain Point
A total of 73% respondent checked 'Somehow true' or 'Totally true'.
This shows CMD product series like FAMS is NOT COMPREHENSIVELY DESIGNED in terms of function.
In specific to the platform FAMS . . .
Existing Scheduling Arrangement
About 80% of the page display record of scheduled audits, but not the function of scheduling
To make sure audit scheduled won't crash each other, users need a calendar / notebook outside FAMS
One-stop Scheduling
![AdobeStock_241794249 [Converted].png](https://static.wixstatic.com/media/cc4dbe_5381ca50dcb445fb926ff3168c7418b5~mv2.png/v1/fill/w_15,h_21,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/AdobeStock_241794249%20%5BConverted%5D.png){kind=small}
Calendar Overview
Upon interview with the audit lead in the brand, he said they seldom manage audits that the other audit lead in charge. Therefore, I have set 'me' as 'scheduler''s DEFAULT.
With symbols legend on the right, users can show and hide the info they desire. Users will not be overwhelmed by irrelevant info at any moments.
Sortings allow audit leads to perform role/audit type/location based tasks conveniently.
Bearing in mind that colour vision deficiency might hinder some of our users at work, I used SHAPES on top of colour to differentiate various symbols.
Annual calendar is defaulted as users revealed that they usually schedule regular audit HALF A YEAR to existing factories.
From the 3rd symbol, each symbol represents a status of the scheduled audits. The 'Multiple' symbol allow certain status showcase in each small dates on the annual calendar.
Still, users can switch to a monthly formatted calendar with 1 single click
The HOVER EFFECTS on a whole month (light green), as well as each date (dark green) acknowledge users that they can click them for further details.
Making use of LAYERING principles in MATERIAL DESIGN, users can distinguish multiple controls at a glance. For example, they can distinguish:
1. The platform's menu from main content on its right
2. The active 'Display Control' that plays an effect on the calendar
3. The general sorting bar from calendar's format sort
Scheduling Detail
Showing a bit more dates before and after the focused month facilitates cross-month planning.
In the detail list of audits, they are in default roughly listed based on HOW URGENT they need to addressed.
Dates not in the focus month is translucent so that the focused month and sun-to-sat indications will pops up to the eye.
Users can change sorting method to descending order of date created etc. based on their needs.
Public holidays and Saturdays are in different colour from usual weekdays to convenient user in scheduling audits corresponding to work days.
Title of each listed item is comprised of the sorting requirements in the order of:
[ (Audit type) of (Auditee) by (Auditor) in (Location) ]. In this way, they can be AUTO-GENERATED by the system
To add new audit request, users can EITHER click the text-with-icon button next to the page title 'Scheduling' or click the plus icon on top right hand corner of the detail list. Remaining the text in one of the buttons smoothened users' transition from the plain text button in the existing platform.
Make Scheduling Page Easily Accessible
Monthly Calendar is placed on Dashboard so users can check on current month once they logged in.
Hover on each symbol to see the title of each audit
Click the date / the button 'More in scheduling' to go to the scheduling detail page.
Style Adjustment
Comment from directors. . .
Right now it looks a bit pale . . .
Are there any colour themes for FAMS and other similar platforms?
! ! Hidden Concerns ! !
Commercial/ Efficient/ Professional Image
Consistent Brand Experience
Method A
Expand Existing Main Colour
Primary Variation Rules
Original
(Light Tone + Dark Green +
Orange as Highlight)
Expand Dark Green + Orange as Highlight
Tune to Lighter Green +
Light Green as Highlight
Expand Dark Green +
Light Green as Highlight
Expand Dark Green +
No Highlight Colour Added
Light Tone + Dark Green +
No Highlight Colour Added
Light Tone + Dark Green +
Orange as Highlight
Secondary Variation Rules
Background Tone
(How can background tone matches the layers with white text background fluently?)
Background Gradient Format
(Slanted from corner? shed from top to bottom like the morning light?)
Readability
(Users frequently star at this application + it is text-tensed: light or dark text background better?)
Content Priority
(Page Content >
Menu Content;
Anything so important that needs sharp highlight?)
Is Method A Good Enough?
For 1 platform...
A coherent style can be selected
Similar versions are provided to suit personal preferences/ easily conducted future tests
For a series of platforms...
Color system do not cover multiple platforms
Colour system follows the brand's logo but not related to each individual platform
Method B
Colour to Brand the Product's Pillars
CMD's 3 Pillars:
Compliance Management Database
Pillar 1
Pillar 2
Pillar 3
Platform
x several
'About Green'
Platform
x several
Included FAMS
Platform
x several
'Highlight Precision'
Steps to colour and brand:
1
Set Theme Colour for Pillars
Product
Pillar
Pillar
Pillar
2
Add Highlight Colour for Each Platform
Pillar
Platform
Platform
Platform
3
Apply Both Colours to Differentiate Pillars & Platforms
4
Offer Meaningful Theme Colours
Pillar 1
Pillar 2
Pillar 3
'About Green'
Included FAMS
'Highlight Precision'
5
User-Feedback-Based Adjustment
It is less tiring to the eye now!
Good for our daily scanning at work!
Is Method B Good Enough?
For 1 platform...
Details Inherited from Method A's Insights
Users can distinguish one platform from the other
For a series of platforms...
Color system allow users to understand which pillar of product are they using
Within the same pillar, users can distinguish each platforms so they won't mess up steps/tools to fulfil their complex tasks
The 3 colours for the pillars are stemmed from CMD's logo, in specific its 3 featured curves.
Comprehensive Revamp
Scheduling
Apart from changing colour scheme for the major scheduling function, I also look into important components like:
Table & Controls
Can delete sorting criteria altogether
Fixed Sorting and column titles enable actions while vertical scroll
Sorting criterion name will recolour and rise when selections are filled
Hover effect prevents user from messing up neighbouring items
Convenient horizontal scrolling because of a fixed slider
Control icons only appear upon hover, preventing users from messing up/overwhelmed
Dashboards for Roles
Brand's Scheduler
