UI/UX Design for desktop and mobile

DESKTOP UI/UX, MOBILE APP

UI/UX Design for desktop and mobile app

Tools used: Adobe Illustrator, Invision

Background

The Redbus web app—the Absence Management Module—is a tool used by managers and employees to manage their time off.

It works on the desktop and mobile, letting users have the same experience regardless of their device.

Deliverables

My role was to create the product starting from the description of the functionalities from the client. My process for this project was: research, creating the flowchart, wireframing, prototyping, UI design, testing, redesign.

Flow Chart

I started the project by creating the Flow Chart for the Absence Module- the first part from the app to be implemented. This helped define the functionalities for each user role.

Prototyping

I used Invision for communication with the client, gather feedback and iteration, which was essential in moving the project forward.

The “Absence Management Module” provides users the possibility to request an absence, see their scheduled absences, see other members of their team that have absence scheduled during the same date range.

The app works on the desktop and mobile, letting users have the same experience regardless of their device. However, on the mobile version we decided to make available only certain functionalities. Some of the removed functionalities which corresponded to “System administrator” user role would have been difficult to use on mobile.

Challenges

One of the main challenges was finding a consistent way to organize all the content accompanying each section. This required multiple rounds of prototyping and revisions.

For this project it was especially important that the content is as accessible as possible, which is why  we worked from a mobile-first design perspective to guarantee an equally  experience on both the mobile and desktop.

Desktop App

Some of the features had to be removed from the desktop version such as the calendar section which was replaced on mobile with cards showing  “My Holidays”. The purpose of this was a better usability on mobile.