taponyourglass

Design

Introducing the upgraded design – it's now more breathable, cleaner, and functional than before. The most crucial information is right there at the forefront, ensuring a streamlined user experience!

Designed to reduce cognitive load, the improved hierarchy empowers users to effortlessly focus on what truly matters. The bottom navigation panel is responsible for streamlined functionality. This also has enhanced scalability which not only caters to the company’s current needs but also has room for future requirements.

The Health Pass feature receives a refined treatment, prominently displayed with color-coded icons for quick health status identification.

Smarter Homescreen

Latest bookings showcased at the top for convenient access to Desk Pass.

Bookings card designed with a hierarchical structure for easy information skimming.

Introduction of a new feature facilitating users in navigating to their booked desk, accompanied by quick-access buttons for editing or deleting bookings directly from the homepage.

Interactive widgets implemented to prompt users for time-critical actions or notify them of relevant updates.

These widgets are strategically positioned at the top of the list to ensure utmost priority, disappearing once the time-sensitive moment has passed.

Hassle-Free Booking

Entering location details are no longer a hassle! Users can skip the tedious process of inputting location details for each booking. Upon selecting dates, the system automatically populates location and floor information based on the user's location mapping and previous choices.

Stay connected with colleagues! Users can now view the desks booked by their peers and frenemies directly on the floor maps. This allows them to book a desk close to or far away from their colleagues.

Introducing the "Auto Select Desk" feature—ideal for users who prefer a hassle-free experience. By clicking this button, the app effortlessly chooses an available desk on the selected floor, leveraging availability data and learning from the user's past preferences.

The map view is now open by default, making it effortless for users to choose their preferred desk.

Introducing the new Filter feature! Users can now filter desks, generating a heat map based on proximity to amenities such as toilets, windows, etc.

Details at a Glance

Easily access desk features with a simple tap, revealing a floating window showcasing all details. Users can conveniently bookmark desks for swift, one-click booking directly from the home page.

The new review booking section for the users to thoroughly examine and correct details before confirming their booking.

The recurring booking option for effortless scheduling, allowing the users to automate the process based on their predefined office schedule.

Enhance overall experience with the DeskPass feature, which contains a skimmable hierarchy of confirmed booking details. Users can share their DeskPass with others, add bookings to calendar and make it easy to navigate to their desk which is particularly beneficial for newcomers or those unfamiliar with the campus layout.

Hot-Desking

Now, users can instantly secure any desk by scanning the QR code located on the desk. Confirming the booking is now easy, directly determined by its real-time availability.

Overview

The aim of this project was to improve the existing desk booking system. The previous system was quickly made without much consideration for user experience, features, or adaptability for the future. It wasn't very user-friendly, had very few features and couldn't handle potential future needs well. To address these issues, we needed to undergo a thorough redesign.

Problem

Lack of Intuitiveness: The existing system did not provide an intuitive user experience, leading to user confusion and reducing efficiency.

Minimal Functionality: That system offered limited functionality, hindering the seamless management of desk reservations and related activities.

Scalability Concerns: The current design had difficulty adding new features or meeting future needs, which makes it not very scalable.

Scope

User Experience (UX) Enhancement: Improve the overall user interface for a more intuitive and user-friendly experience.

Functionality Expansion: Identify and implement additional features to enhance the system's functionality, catering to the diverse needs of user personas.

Scalability and Future-Proofing: Redesign the architecture to accommodate future enhancements and requirements.

Timeline

May 2022 - July 2022

Design Process

The design process for this project essentially comprises five key steps: Study and research, Direct, Define and Ideate, UI Design, and Testing.

Old Look

These are the screenshots of the old version of the JioDesk app.

Website Audit

From what I gathered about the existing implementation, its main purpose was to help users plan their office work in advance. When the user reserved a desk, the system ensured that the necessary security measures and floor management were ready for their arrival. The system also allowed HR (Admin) to keep track of employees and assets, facilitating contact tracing if needed. The Organisation Admin (Super Admin) could set up and organise the entire organisation, mapping assets and users for smooth operation.

User Flow

This is what users had to do when they wanted to book a desk through the app. Although there were only two screens, the process was unnecessarily lengthy. There was ample opportunity to streamline it, making the same task much easier to accomplish.

PRODUCT

JioDesk

A desk booking solution

Jio Desk is a product developed by Reliance Jio, which functions as a desk booking and management system developed to enhance the efficiency of workspace reservation and organization. It was made in 2020 due to the imperative need to address the challenges posed by the COVID-19

pandemic and the transition to remote work practices.

This system caters to three stakeholders:

Employee: It is used to book a workstation when they want to work from office.

Admin (eg. HR): For HR, it is used to monitor employee activities and statistics and assist them with desk bookings.

Super Admin (eg. Org Admin): The admin requires this to map the organization and all its assets while also provide user entitlement for HR and other stakeholders.

To keep things simple and clear, we'll focus only on the employee app in this case study. Including all three stakeholders would make it too complex and lengthy.

User Research

We wanted to know how users feel about Jio Desk, so we paid attention to how they use the app and what feedback they gave. After that, we created personas to gather all the research. Here's a summary of what they told us:

Problem Statement & Design Statement

Based on all the research, I arrived at the following problem (how might we?) statements and a design statement:

How might we help the employee to book a desk in a way which is very simple, efficient, quick and keeps the user well informed about the the booking made?

How can we help the employee to check in to an available desk on site

(Hot-Desking)?

How can the user navigate to its booking?

How can a user find the booking of another user/group?

How can a user make a booking on behalf of another user (employee or visitor)?

How can we help the user to extend/release the resource after their usage time extends/remains?

How can a user raise complaints about booking and assets?

How

Brainstorming &

Feature Listing

Now, it was time for one of my favourite parts—thinking of all the cool features this new solution should have. This brainstorming process was informed by the extensive research, design considerations, problem statements and both product and business requirements.

Here are some of the features:

The manager or HR can put in the schedule data on the app. This way, the system will notify employees to book their seats, and users can easily choose options like book or let it auto-book.

Desks and conference rooms can be labeled with features like proximity to AC, window view, near the washroom, close to the entry, and other characteristics based on their location.

The user can see the people attending a conference in any conference room.

Navigation to desk/Conference room.

Hot-Desking

and many more!

Information Architecture

Now that I had gathered all the insights, it was time to define and ideate. Making the information architecture was the first step to do that, this involved things:

Site Mapping

User Flow

Sitemap

This sitemap shows how users will move through the platform, where information is located and how different elements relate to each other. It also plays a key role in planning and improving the user experience by making sure the navigation structure is logical and easy to follow.

Competitor Analysis

It's crucial to understand the competition! In my analysis, I researched OfficeSpace, Tactick, DeskBird, and Kadence, collecting the following sticky-notes insights about them:

Heuristic Analysis

Next I did a Heuristic Analysis of the current implementation and these are the insights:

Cognitive Load: Simplicity is key. Too many options can overwhelm users, making the experience less efficient and enjoyable. Clear guidance or a simplified interface can alleviate this.

Lack of Visuals: Providing visual representations or detailed floor plans of desks and conference rooms can help users visualize the space before making a booking.

Time-Consuming Form Filling: Lengthy form filling can deter users if it consumes too much time and mental effort. Streamlining the form, breaking it into sections, or offering clear instructions can improve the user experience.

Poor UI design: Looks too dull and boring to look at and work on.

Redundancy and Reduced Breathing Space: There is too much info and crowding on the screen. Optimizing content and layout by cutting redundancies for a cleaner, user-friendly interface is required.

Lack of Hierarchy: No hierarchy in elements making the dashboard look overwhelming. It is required to emphasize critical or frequent options with visual hierarchy for a clearer user experience.

PRODUCT

JioDesk

A desk booking solution

Jio Desk is a product developed by Reliance Jio, which functions as a desk booking and management system developed to enhance the efficiency of workspace reservation and organisation. It was made in 2020 due to the imperative need to address the challenges posed by the COVID-19

pandemic and the transition to remote work practices.

This system caters to three stakeholders:

Employee: It is used to book a workstation when they want to work

from office.

Admin (eg. HR): For HR, it is used to monitor employee activities

and statistics and assist them with desk bookings.

Super Admin (eg. Org Admin): The admin requires this to map the organisation and all its assets while also provide user entitlement for HR and other stakeholders.

To keep things simple and clear, we'll focus only on the employee app in this case study. Including all three stakeholders would make it

too complex and lengthy.

Insights

After all this, it was time to gather my thoughts and research, then turn them into clear insights.

Lack of Hierarchy: If options from "All booking" to "Automation rules" have the same visual priority, it can make the dashboard look visually heavy and overwhelming. Applying visual hierarchy by emphasizing more critical or frequently used options can help users quickly navigate and prioritize their actions.

Redundancy in Information and Reduced Breathing Space: If there is redundancy in the information presented, taking up extra space and reducing breathing space, it indicates a need for optimizing content and layout. Streamlining information and eliminating unnecessary redundancies can create a cleaner and more user-friendly interface.

Poor Ul design: Looks too dull and boring to look at and work on.

Time-Consuming Form Filling: If the process to fill out a form is time-consuming and demands high cognitive load, it may discourage users. Streamlining the form, breaking it into manageable sections, or providing clear instructions can enhance the user experience

Cognitive Load: Too many options presented simultaneously can overwhelm users, leading to increased cognitive load.

This may result in a less efficient and enjoyable user experience. Simplifying the interface or providing clear guidance can help alleviate this issue

Lack of Visuals: Not having an idea of how the desk looks can create uncertainty for users. Providing visual representations or floor plans of desks and conference rooms can help users visualize the space before making a booking.

All of them has basic and a little extra features, but seems to be made w.r.t. the organisation and not the employees.

Tactic and Office space is not scalable.

We need to be scalable

Everyone has interactive floor maps, health checkins, qr scanning and data analytics.

Based on my research via youtube videos and user reviews, All of them seems easy to use but lacks some of the features and scalability required by employees and organization. Also some of them have some problems like unable to work off-site, difficult to modify floor plan, minimal admin controls, etc.

Multi Device Compatibility is a plus

None of them does recommendation and filtering

User Flow

I created a user flow map that explains how employees will book a desk using the new app. This new process is designed to be more efficient, cutting down on unnecessary steps, making it easier for users, and allowing them to book a desk faster compared to the old way.

Wireframing

In my wireframing process, I began with rough sketches to bring the ideas in my mind to paper for thoughtful consideration. This was followed by creating both low-fidelity and high-fidelity wireframes to refine and visualise the design.

Mood Boarding

In essence, the app requires a modular approach, organised feel with ample breathing space and a clear hierarchy. Adhering to Jio's established Design System, the mood board and UI design will be needed to align seamlessly with its visual language. This approach guarantees a consistent visual experience across platforms, minimises the user's learning curve by maintaining familiarity, and upholds the integrity of the brand identity.

The Design Language consists of :

Visual Style

Icons

Fonts and Text Styles

Colours

Layout and Spacing

User Testing

With the implementation of the new design, me and my manager proceeded to evaluat the app's usability through user testing, focusing on users' task completion abilities and measuring completion rates. Furthermore, we aimed to gather feedback on overall user satisfaction and assess the impact of the redesign on user’s experiences. We gathered a pool of 10 employee from different designations for the test.

Strengths:

7/10 users swiftly booked a desk in a matter of seconds, without requiring any assistance.

8/10 users chose to tap on the active booking card and then proceed to edit the booking, rather than using the quick edit icons on the card.

4/10 users favoured creating a quick booking directly from the homepage, choosing one of the bookmarked or recommended desks. This approach was preferred for its speed and avoidance of unnecessary choices.

3/10 users appreciated the ability to filter desks based on proximity to amenities and to see the seating locations of their friends.

All users found the interactive widgets and the option for recurring bookings very helpful.

All users appreciated the integration of the green pass within this platform, eliminating the need to switch between apps.

Weaknesses:

8/10 users chose to tap on the active booking card and then proceed to edit the booking, rather than using the quick edit icons on the card.

9/10 users expressed a preference for the desk to be auto-selected on the map without having to click the "Auto Select" button.

4/10 users suggested that the delete booking button should be displayed when they edit a booking, rather than being upfront.

1/10 users expressed a preference for not having others see when they are working from the office and where they are sitting.

Action-oriented Assesment

Based on the behavioural tasks, we learned the following:

How can we improve?

Desks should be automatically selected by default, allowing users to book them effortlessly without having to overthink the process.

Although placing the delete button in the edit booking section might add an extra step to the process, having that option there can also be distracting and unnecessary in a important area of the interface.

A toggle in the settings page to hide a user's booked desk from others on the map would be a valuable addition.

Implementing a feature that allows users to request a desk transfer can be valuable, but careful consideration should be given to prevent misuse or inconvenience to users.

Quick glance assessment

To see how users react right away to a screen or design, we showed them a glimpse of the homepage. They had only a few seconds to start looking for information.

This is what we found out:

The first version is presented as HiFi wireframes, and my design manager reviewed them to enhance the user experience. He provided specific points for improvement, particularly focusing on the homescreen.

In response to his feedback, I incorporated his suggestions, resulting in a notable improvement in the overall app experience, particularly from the home screen.

50%

Users understood the basic function of the app.

60%

Users took a glance at the first card in the active booking section and picked up their desk number and the allocated time.

80%

People discovered the new booking button within few seconds.When we showed them the screen again.

Previous project

Home

Reflecting on this project has been an incredible journey where I got to make decisions, shape designs, and work with a diverse group of colleagues, including product managers, my design manager, HRs, developers, and business teams. It wasn't just about coming up with ideas; we took our designs to users, saw their reactions, and learned valuable lessons along the way.

One big takeaway for me was the importance of being versatile in the process, considering both the user's and business's perspectives. Exploring user stories and scenarios became crucial, revealing insights that helped meet stakeholders' needs. Despite facing challenges like tight deadlines, remote user testing, and the difficulty of studying competitors without free trials, the journey was incredibly satisfying.

Dealing with time, business and tech. constraints required commitment, but the final result surpassed expectations. The experiences gained not only pushed me forward professionally but also filled me with gratitude for the support and trust from my manager. Their encouragement empowered me to take charge of the project, bring it to completion, and leaves me hopeful and confident for future endeavours.

Key Takeaways

taponyourglass

PRODUCT

JioDesk

A desk booking solution

pandemic and the transition to remote work practices.

This system caters to three stakeholders:

Employee: It is used to book a workstation when they want to work from office.

Admin (eg. HR): For HR, it is used to monitor employee activities and statistics and assist them with desk bookings.

Super Admin (eg. Org Admin): The admin requires this to map the organization and all its assets while also provide user entitlement for HR and other stakeholders.

To keep things simple and clear, we'll focus only on the employee app in this case study. Including all three stakeholders would make it

too complex and lengthy.

Design

The Health Pass feature receives a refined treatment, prominently displayed with color-coded icons for quick health status identification.

Smarter Homescreen

Latest bookings showcased at the top for convenient access to Desk Pass.

Bookings card designed with a hierarchical structure for easy information skimming.

Introduction of a new feature facilitating users in navigating to their booked desk, accompanied by quick-access buttons for editing or deleting bookings directly from the homepage.

Interactive widgets implemented to prompt users for time-critical actions or notify them of relevant updates. These widgets are strategically positioned at the top of the list to ensure utmost priority, disappearing once the time-sensitive moment has passed.

Hassle-Free Booking

Details at a Glance

Easily access desk features with a simple tap, revealing a floating window showcasing all details. Users can conveniently bookmark desks for swift, one-click booking directly from the home page.

Hot-Desking

Now, users can instantly secure any desk by scanning the QR code located on the desk. Confirming the booking is now easy, directly determined by its real-time availability.

The map view is now open by default, making it effortless for users to choose their preferred desk.

Introducing the new Filter feature! Users can now filter desks, generating a heat map based on proximity to amenities such as toilets, windows, etc.

The new review booking section for the users to thoroughly examine and correct details before confirming their booking.

The recurring booking option for effortless scheduling, allowing the users to automate the process based on their predefined office schedule.

Overview

Timeline

May 2022 - July 2022

Design Process

The design process for this project essentially comprises five key steps: Study and research, Direct, Define and Ideate, UI Design, and Testing.

Old Look

These are the screenshots of the old version of the JioDesk app.

Website Audit

User Flow

Problem

Lack of Intuitiveness: The existing system did not provide an intuitive user experience, leading to user confusion and reducing efficiency.

Minimal Functionality: That system offered limited functionality, hindering the seamless management of desk reservations and related activities.

Scalability Concerns: The current design had difficulty adding new features or meeting future needs, which makes it not very scalable.

Scope

User Experience (UX) Enhancement: Improve the overall user interface for a more intuitive and user-friendly experience.

Functionality Expansion: Identify and implement additional features to enhance the system's functionality, catering to the diverse needs of user personas.

Scalability and Future-Proofing: Redesign the architecture to accommodate future enhancements and requirements.

Heuristic Analysis

Next I did a Heuristic Analysis of the current implementation and these are the insights:

Cognitive Load: Simplicity is key. Too many options can overwhelm users, making the experience less efficient and enjoyable. Clear guidance or a simplified interface can alleviate this.

Lack of Visuals: Providing visual representations or detailed floor plans of desks and conference rooms can help users visualize the space before making a booking.

Poor UI design: Looks too dull and boring to look at and work on.

Redundancy and Reduced Breathing Space: There is too much info and crowding on the screen. Optimizing content and layout by cutting redundancies for a cleaner, user-friendly interface is required.

Lack of Hierarchy: No hierarchy in elements making the dashboard look overwhelming. It is required to emphasize critical or frequent options with visual hierarchy for a clearer user experience.

User Research

Brainstorming &

Feature Listing

Here are some of the features:

The manager or HR can put in the schedule data on the app. This way, the system will notify employees to book their seats, and users can easily choose options like book or let it auto-book.

Desks and conference rooms can be labeled with features like proximity to AC, window view, near the washroom, close to the entry, and other characteristics based on their location.

The user can see the people attending a conference in any conference room.

Navigation to desk/Conference room.

Hot-Desking

and many more!

Competitor Analysis

It's crucial to understand the competition! In my analysis, I researched OfficeSpace, Tactick, DeskBird, and Kadence, collecting the following sticky-notes insights about them:

Information Architecture

Now that I had gathered all the insights, it was time to define and ideate. Making the information architecture was the first step to do that, this involved things:

Site Mapping

User Flow

Sitemap

Problem Statement & Design Statement

Based on all the research, I arrived at the following problem (how might we?) statements and a design statement:

How might we help the employee to book a desk in a way which is very simple, efficient, quick and keeps the user well informed about the the booking made?

How can we help the employee to check in to an available desk on site

(Hot-Desking)?

How can the user navigate to its booking?

How can a user find the booking of another user/group?

How can a user make a booking on behalf of another user (employee or visitor)?

How can we help the user to extend/release the resource after their usage time extends/remains?

How can a user raise complaints about booking and assets?

How