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.

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 hiring process and make the application easy to navigation and mobile friendly.

  • Create automated payroll system to reduce interactions between MBBSI employees and client
  • Make 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 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.

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 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 style guide and sketch library for consistency in design. We also collaborated with front-end development team to make sure the developed pages are aligning with the design.

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 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 high-fidelity interactive prototype with lots of functionality and details included. We used 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 websites 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 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 Progressive Enhancement concept to start the design for smaller screen first and then proceed with the bigger screens. That way we could have prioritize the content and functionality for smaller screens and added more information for bigger screen resolution.

Close X