Overview

MBBSI provides business management solutions for small and medium-sized companies. It offers professional employer services, assuming responsibility for payroll, payroll taxes, workers' compensation coverage, and certain other administration functions for the client's existing workforce. MBBSI also provides staffing and recruiting services.

Visit Web App

My Role

I empathized and visualized the portal app & the techniques I used are:

  • Information Architecture
  • High Fidelity Design
  • Building Design System
  • Heuristics Evaluation
  • Collaboration with Developers
A new website and mobile app design for a dog community

The Goal

Automate payroll system and simplify hiring process

Enhance user experience to reduce physical involvement while creating payroll. Simplify the hiring process and make the application easy to navigate and mobile-friendly.

  • Create an automated payroll system to reduce interactions between MBBSI employees and client
  • Make the hiring process simple and easy
  • Easy navigation structure
  • Users are used to with the existing application and should not get confused with the new app
  • Mobile-friendly app

UX Challenges

Consistency , easy navigation & co-ordination

  • Consistency in design while working in a team environment
  • Aligning with onsite UX Designers
  • Making the application easy to navigate

Solutions:

We created a Style Guide and Sketch component library which helped us maintaining consistency throughout the application. With Sketch Component Library, making any enhancement was just a button click away and it saved us lots of time.

It was very important to be in align with the client and our onsite team. We had a regular sync up meeting.

We created a mega menu and a self customizable favorite navigation bar to make the navigation super easy for novice as well as expert users.

The Approach

What process we followed to solve the problem

Brainstorming
Brainstorming
Journey Map
Journey Map
Persona
Persona
Information Architecture
Information Architecture
Customer Interview
Customer Interview
Low Fidelity Prototype
Low Fidelity Prototype
High Fidelity Design
High Fidelity Design
Collaboration with Developers
Collaboration with Developers

The best part of this project was that the User Experience Designers worked closely with the Business Analysts team, to make sure the business goal and user needs are getting met. Onsite UX team did user research and created personas. We worked with low and high fidelity prototypes, created a style guide and sketch library for consistency in design. We also collaborated with the front-end development team to make sure the developed pages are aligning with the design.

Consistency

Uniform UI guidelines and behaviours

Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen.

Jakob Nielsen

Consistency is the key principle of UX design. It helps to reduce the learning time for a product since users get familiar with the given experience. We maintained the UI Style Guide and followed them throughout the design process. We also created a pattern library in Sketch App where the patterns could be reused to craft pages providing consistency throughout the application.

Style Guide

High Fidelity Design

Highly-functional and interactive prototyping

Once we had the business requirements and user needs frozen, we came up with a high-fidelity interactive prototype with lots of functionality and details included. We used a hi-fi prototype to discover the potential issues that may exist in the workflow, interactivity and so on.

High Fidelity Design

Responsive Website Design

Design that automatically scales its content to match the screen size

We live in a multi-screen society and the number of mobile viewers now outnumbers desktop, and this number will only continue to rise as global smartphone accessibility increases. We cannot afford a non-mobile-friendly website today.

Responsive Web Design

Learnings

Outcomes and Lessons

Component Library

Sketch Component Library helped us a lot in maintaining consistency throughout the project.

SVG Graphics

For graphics and icons, we used an SVG file format which is a vector-based file format and looks sharper and clearer in any device and resolution.

SVG Sprite Sheet

Though we used it for the mega menu only. If we had implemented it throughout the project, it would have made the load time more efficient.

Mobile-First Design Approach

We followed the Graceful Degradation concept which is nothing but designing for the bigger screen resolution first and then degrade for the lower screens. This made working for responsive design a little challenging. We should have followed the Progressive Enhancement concept to start the design for a smaller screen first and then proceed with the bigger screens. That way we could have prioritized the content and functionality for smaller screens and added more information for bigger screen resolution.

Next Project

Play Dates 4 Dogs

A new website and mobile app design for a dog community

View Case Study
Close X