×

Problem Solving: | Two short case studies with quick solutions

Life of a UX designer is not always a straight forward line. From time to time we have to adopt to business objectives where a quick solution on a low budget is needed. Here are two examples:

Disclaimer: This case study is for the purpose of the portfolio presentation. Some data or events may not be entirely accurate.

Mosaic | Solving a design problem with JavaScript

Introduction

Cornerstone On Demand (CSOD) is the SAAS platform, a cloud-based people development software provider and learning technology company. The existing interface used to build welcome and custom pages are not flexible enough and clients usually ask to be redesigned to address business needs and branding.

Mosaic, a US-based life care provider, wanted to add a number of widgets to the page, which contains important information preview to an employee but were not happy to have a default, unresponsive page and widgets styling (see image). I wrote a script, which enable me to style the page and make totally different looking page that was responsive and far more effective to use, including on mobile phones.

Original nonresponsive widgets with default styling
Original nonresponsive widgets with default styling

Problem

  • Existing widgets contain an important preview of data that can be used on-page, but the application of styling of the widgets are very challenging even to the experienced developer
  • The pages were not responsive, so using the page with widgets on a smaller screen was not possible
  • Designers and developers usually avoid using widgets and recommend using links to pages where users can see the information
  • Widgets have the same ID within the HTML page as some other elements so styling would produce unexpected results

Solution

  • Develop a JS script that dynamically creates containers on a page
  • Add unique class names to each widget while is loading on the page (as mentioned, IDs can not be used)
  • Add facilities in the script to control in which container widgets will appear
  • Make containers responsive and control the elements, including widgets, using CSS grid
  • Delete unnecessary table elements inside widgets using JavaScript
Client page after applying solution
Client page after applying JavaScript solution

Beekeper | Expanding Functionality of a Task Feature

Introduction

Typically front line employees work in teams, for example, the maintenance team for a larger production company. Tasks aim to help front line teams: managers & team members keep track of work they want to do themselves or that they have opted to delegate to others. This short case styudy will try to explaing how striped down UX process can still produce good results when applied to SAAS product.

Problem

Beekeeper currently has a Tasks feature in their product, but are looking to expand its functionalities. There are three main problems they are looking to solve:

  • Based on customer feedback, managers (those that create the tasks) want to be able to break them down into a series of steps. For example, inspecting an ice machine would have several steps. Currently, those steps are added in an attachment, such as a form
  • Managers want to see photo evidence that certain tasks have been completed by their team members so they do not need to go and physically check if it has been completed
  • Frontline workers often don’t finish all tasks by the end of the shift and need to be able to reassign a task to someone else so that it gets completed

Goal

Looking at the problems mentioned, we could solve them by allowing Beekeeper users, who are performing the tasks, to:

  • See and complete all the substeps of a task
  • Add a photo to show a task is complete
  • Reassign a partially-completed task to someone else
  • Design visualy and functionaly pleasent experience without branding guidelines

Task Flow

Based on our goal, a quick user journey, or rather, a task flow was created. A manager creates service (Normaly, this step would be created once in the begining of the contract with a client) and add a task to a task list. He asigns a servicer to a task. A servicer complete a task or asign a task to someone else. Here is the flow:

A flow explaining how servicers can complete assigned tasks
A flow explaining how servicers can complete assigned tasks

Wirefrmaing

In order to organise the layout a et of wireframes were created containing each stage of the journey. The client was not keen to test the wireframes so they accepted it and I was given a green light to continue with visual designs.

Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Wireframe
Set of wireframes were created

Visual Design

Since the end client was a small business and had not developed their own branding they key was to make visual designs pleasent and interface easy to use. Here are the fully developed visual design with story explaining the complete servicer's journey.

Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design
Visual Design