KICKOFF

PLANNING AND ANALYSIS

GATHERING DATA - BUSINESS AND USER REQUIREMENTS

We had an initial meeting with client, interviewing client and user, defining our MVP goals. Our MVP will be cross-platform, development by using Quasar with first deliverable in Android then Windows desktop web platform, and deliverables will be broken down into two main stages:

1. “Note-taking” flow
2. “Online marketplace” flow (future)

​

In this phase, we have also performed the following:

• Brand Analysis, SWOT Analysis, User personas, user stories, storyboard, content analysis (High value, Low value, Easy, Difficult), card sorting, App/Web flow, sitemap
• Visual research (colour, typography, graphic styling, web and device design), style guide

User Personas

We’re able to identify four main user personas from these activities, they are:

1. Tradie who offers the service, for example:  electrician, plumber
2. Business owner (customer) who's looking for the service, for example:  KFC Beverly Hills
3. Individual customer who's looking for the service, for example:  home owner, landlord
4. System Admin who has full access rights to the system (future)

Visual Research and Style Guide

Figma Material Baseline Design Kit (Community) Kits  are used with some customisations to fit TasksTech - not only considering that UI Quasar framework is based on Material Baseline Design, but due to time constraints and limited resources in design department. 

As for the colour theme, I use https://material.io UI Colour Palette to generate the colour themes.

Prior to that, some colour theme sets were presented to key stakeholders to choose from. Using the chosen colour theme, TasksTech colour theme is generated with minor customisation.

On the other hand, visual research (colour, typography, graphic styling, web and device design) and style guide references are taken into consideration to adjust and customise Material Design Kits to fit TasksTech's style and requirements.

DESIGN

PROTOTYPING

PAPER PROTOTYPING

As the simplest form of prototyping, I started the prototyping process with paper prototyping. It is the quick way for me to generate the digital ideas by sketching on the paper, visually and evaluate them with my team and with our target users.It allows me to see the system flow and system map easily from high level to low level. 

WIREFRAMING

The team decided to start with Android and desktop platforms at initial stage then iOS and Mac platforms at later stage:

1. Mobile Android app
2. Desktop web
3. Mobile iOS app (future)
4. Mac web (future)

Mobile Android App

I started the Android app design process with sketching the prototypes in paper, then presented it to the client for approval before building the wireframes in Figma. 
Upon the completion, I immediately conducted usability user testing then getting approval from the client. 
Once approved, I made some minor changes based on user testing's results since the client is happy with my wireframes and user testing was going really well with positive feedback from users.

Desktop Web

With the positive results from key stakeholders, I then moved to the next stage, which is building Lo-Fi prototypes and testing the prototypes.  
Finally, Hi-Fi prototypes were built based on Lo-Fi prototypes - initially, the team decided to build the Hi-Fi prototype straight into Quasar in order to speed up the process, however, considering that Mobile Hi-Fi prototypes are needed to build the Desktop prototypes, I built the Mobile Hi-Fi prototypes in Figma.

PROTOTYPING PROCESS

What are those factors that have been taken into considerations and thus shape the current prototypes?

Tradie's Dashboard

1. "Company Logo" position moved to top, appears on each screen and serves as home navigation link to dashboard page.
2. "Notification" icon changed to "Pin" icon to avoid confusion. 
3. "Create New Job" button swapped to Floating Action Button (FAB)  as it performs the primary, or most common, action on a screen.   
4. "Create New Inventory" button removed from the bottom navigation bar, as it already exists in the navigation drawer.
   Using a navigation drawer with other primary navigation components, such as a bottom navigation bar, should be avoided. 

Navigation Drawer

Following Material Design's guidelines - avoid using a navigation drawer with other primary navigation components, such as a bottom navigation bar - I removed the "Create New Job" in the navigation drawer as it already exists in the dashboard screen as FAB.

View Job Diary

"Notification On" removed from drop-down, and "Pin" icon is used instead. In addition to instant-change to yellow colour if it's activated or in an active state.

Create Job Diary

1. "Cancel" button style changed from contained button to outlined button.
   Reason: it's not the primary action in the app and represents a lower emphasis alternative to contained buttons - the "Create" button.
2. "Date & Time" are auto-generated by the system as Date & Time stamp, no input from the user is required. 

Create New Job

1. Step by step - Step 1/3, Step 2/3 and Step 3/3 - to guide users on what is required to complete the new job creation process, number of steps in total and how far the user is to the end process.
2. Background colour highlighted and "Completed" icon to indicate the Step 1 is completed and the user is currently at Step 2. Step 3 card is disabled and dialog is not provided to action on it.

Job Details

"Submit Signature" customised button is used to make it stand out from the rest of texts.

Desktop - Job Details

Breadcrumb to inform users of their location in relation to the entire sites hierarchy and easy navigation to higher-level pages. 

Create New Inventory

1. A dialog box to confirm that the Inventory entered is successfully assigned to the job as a job asset for the job. 

Below the confirmation text, there is a Create A New Inventory button. This is an option, only when the inventory is a new item that hasn't been added to the system database yet, but required to complete this job.  

2. Surface behind the dialog is scrimmed to express that the rest of the app is inaccessible, and to focus attention on the dialog by making content on the surface less prominent.

Remove Inventory

I also designed the system to allow users to remove any inventory of a job from the list.
Flexibility to remove the inventory item from the job assets list is crucial for this system, due to either the inventory item is no longer required in the job or the user could accidentally add the incorrect inventory item into the list, therefore correction to the mistake is made by removing it from the list.

ANDROID INTERACTIVE PROTOTYPING

DESKTOP INTERACTIVE PROTOTYPING

TESTING

USER TESTING

Ideally, at each wireframing and prototyping stage completion, user usability testings are conducted in order to refine and improve the system, as well as correcting any mistake/issue that is discovered during this process.
By incorporating user's feedback and data that we gathered from each user testing, it would help us to design and develop the system that is closer to what our target users are looking for and solve their problems as well as pain points.

However, due to time constraints, we decided to run user testing at completion of wireframing and internal user testing at completion of Lo-Fi prototyping.

Once Hi-Fi prototypes are built by the development team, we will run the user testing before launching the MVP to the market.

CONCLUSION

Material Design Kits and https://material.io/ provide me very helpful resources in designing UI UX. Having said that, the resources haven’t covered much in Desktop space, but mostly Android and iOS.
By applying Material Design in this project, I’ve learnt Android’s UI UX in depth and details, especially from Crane and Owl material studies that provided by https://material.io/.
They provide great UX UI Design references and guidelines designing ranging from Product architecture, Layout, Color, Typography, Iconography, Shape, Components to Motion.

While in the system design process, I learned that to capture data that form job creation details – customer details and inventory details, I need to design a system that forces our user to enter those details by guiding the user step by step until the user reaches the job creation page.

Back to Homepage Back to Top