back2.dev

Background

OVERVIEW
back2dev is a digital consulting agency specialising in providing software as a service (SaaS). Their mission is to enhance work efficiency by implementing the right software platform for businesses and ensure a smooth transition to a new digital environment.

ROLE
UI Design Intern
Wireframes
Interactive Prototypes

DURATION
MAY – JULY 2022

Problem

Problem Statement

Challenges

Main Feature 1 - Data Filter System

Current System

Current filter system is hidden on the right hand side where users will need two steps to start filtering data

Solutions

New proposed filter system is intuitive and stays on left hand side of the screen to reduce the number of steps.

Lo-fi Wireframes

Desktop version

Interactive Prototypes here

Mobile version

Interactive Prototypes here

Hi-fi Prototypes

Desktop version

Interactive Prototypes here

Main Feature 2 - Data organisation (list/grid view)

Sketches

Lo-fi Wireframes

Mobile version

Hi-fi Prototypes

Mobile version

Interactive Prototypes here

Case Study Details

The redesign of this B2B software application initiated with the vision of developing a more user-centric, intuitive interface and better functionality than the current database centric system.

DESIGN GOAL

To update an Open Source for users to ease their process of creating and organising customisable data list, forms and workflows.

DELIVERABLES

User Experience/User Interface for desktop and mobile app

Computer systems contain heaps of data in the database. To organise the data, the standard approach includes listing, searching, sorting and filtering functions or utilising a remote SQL server. However, different users need specific labels, lists and tables to display data in a meaningful way.

Problem Statement

How to incorporate user-friendly, automated, customisable forms and workflows more efficiently for data collection and organisation that caters for different users needs and preferences?

1. Provides IT support for health and safety management through a drag-and-drop interface

2. Workflow management system to ease conveyancing process

TARGET AUDIENCES

1. Health and safety workflow process management
2. Businesses to ease conveyancing process

As the sole UI Designer on the team alongside 1 Web Designer and 5 Engineers, I was in charge of translating wireframes to create hi-fi prototypes to pitch to the clients.

We work closely with Mike, the founder of back2dev and the tech team of four who focused on building the system from scratch. We managed to produce all deliverables and present these to the clients between June 2022 and July 2022.

Focusing on features for users.

Stephen Anderson’s UX Hierarchy of Needs heavily influenced how we strategise and structure our product. 

https://www.slideshare.net/stephenpa/the-conversation-gets-interesting-creating-the-adaptive-interface

We opted for an agile UX approach and guided by the Framework of Innovations (2021).

We were thrilled by the opportunity to create something more meaningful to help improve work efficiency.

Based on the problems identified, we worked towards addressing these pain points by brainstorming possible solutions to minimise total task completion time and improve user satisfaction.

  1. Mapped out the current user flow and worked towards reducing the complexity of choices and number of steps required (Hick’s Law). This guides users in completing tasks with lesser cognitive load
  2. Established a clear visual hierarchy by grouping relevant content and prioritising important functions to assist with scannability (Gestalt Law of Proximity). For example, we used kebab menu to hideaway secondary functions such as deleting, archiving, exporting and importing data
  3. Utilised input fields with editable text fields to indicate customisable labelling system (Jakob’s Law)
  4. Incorporated familiar icons to indicate certain actions (Jakob’s Law). For example, 6 dots and a hand tool to indicate draggability.

All tools/functions to include:

  • Users can display data in a list/table, edit and save own view and preferences
  • Users can add new list, filter and sort data list
  • Users can select current records, delete, build modify, archive or export to csv