Revamping the website of a Workspace Rental Platform

Disclaimer: I’m not affiliated with Qdesq in any capacity, and the views for this case study are strictly my own. Since I don’t have full access to all the user data that influenced their current design, this case study is not fully comprehensive. This project was done to enhance my learning experience and challenge myself to redesign it to serve a specific purpose.

What is Qdesq?

Qdesq.com is a premier destination and nation’s largest tech-enabled platform for today’s workforce to search, sort and book a flexible and serviced workspace, without the hassle of a lease or brokerage and moreover completely Free of Charge (without any brokerage).

At present, Qdesq is the largest and fastest growing flexible workspace rental platform providing office seekers with ready move in serviced offices, as per their budget, location and terms. These workspaces are branded coworking and serviced offices, unbranded shared offices and built to suit — bespoke private managed offices (with services and investments from an established operators)

Goals & motivation for the redesign🎯

• To deliver a personalized experience and intuitive user interface
• Propose a more engaging and seamless experience
• Enhancing my learning experience by challenging some design decisions and addressing their solutions.

Here are few things that I considered while revamping the website🤔

A website is an interface, a space where different things — in this case, a person and a company’s or individual’s web presence — meet, communicate, and affect each other. That interaction creates an experience for the visitor, and as a web designer, it’s my job to ensure that experience is as good as it can possibly be.

• Everything we build should be as inclusive, legible and readable as possible. We’re building for needs, not audiences.
• Set expectations: let users know what will happen after they click that button before they do it.
• Give feedback — fast
• Think carefully about element placement and size
• Easy navigation and uncomplicated operability to users

Alright, let’s get started!😎

I wanted to understand the functionalities, overall architecture, and navigation.

1. I started off by doing a heuristic analysis of the page that the user has to go through. This was done to uncover the problems and find out potential usability issues.
2. I did some competitive analysis to understand the common trends (WeWork, Innov8, 91springboard).

Through the analysis, I was able to identify some clear usability issues and pain points.

Keeping in mind the design principles & practices I have tried my best to improve the existing design. Let’s look at my page by page design decisions.

1. The more options a user has on the website, the more difficult it is to use (if it’s used at all). We need to eliminate choices. To make a better web design, I decided to eliminate distracting options throughout the design process.
2. Problem with the CTA

• Once the user starts typing, enter button should change color to let users know where to look for. (it should command the user’s attention).
  A highlighting micro interaction lets the user know that there is something that deserves their attention.
• Also the icon doesn’t define its function properly. The user may not know what it does.
• Icon can be removed to avoid confusion.

Solution for the CTA

• Primary Button: Replaced the icon with “Find your office” CTA.
• Secondary Button: Replaced the word “international” with a clear & descriptive text to let users know about the function of the CTA.
• In order to show that the business is trustworthy and thinking of the customer we can use personal pronouns like “you” and “me”.
  I have used “your” in this case; possessive form of the pronoun “you”.
• Used action-oriented language that focuses on results. The basic approach is to use action verbs (like “get,” “download,” “start,” “reserve,” and “grab”) to build momentum.
  I have used “Find” in both the CTA.

3. Visual hierarchy: You should rank elements on your website based on your business objective. If you don’t have a specific goal, you won’t know what to prioritize.

Most important (The biggest eye-catcher) : The image on the right
2nd most important: “Find your Office Space” card with the CTA’s

1. The image should give a visual feedback on hover. Therefore I have provided a hover effect to inform users.
2. The workspace image needed a bit of adjustment as only the upper lamps were visible instead of the whole workplace. Also I adjusted the cards a little bit so that the arrow doesn’t overlap with the image.
3. From business perspective we are selling workspaces therefore the instead of displaying various city images we can show them relevant workspace images of every city. Also, changed the name “Gurgaon” to “Gurugram”.
4. Provided buttons on every section so that they might push users to click/check/explore. Also, the bigger the size of an element the more visual weight it creates and in turn more attention it gets.

In the absence of sufficient white space, the UI will look too cluttered, and it will affect the readability, findability and likeability of the product.

1. Removed the Runt: A lonely single word at the end of a paragraph creates a visual interruption in the flow that breaks the reader’s focus. This also creates unintended white space that calls more attention than necessary to the single word.
2. I increased the spacing between the paragraph & the logos as there wasn't much breathing space. Also the logo “Allmed” looked a odd so I fixed that too.
3. “Meet our Office Alchemists” section needed a makeover. Column spacing was unequal. There was no proper hierarchy & the information could have been displayed better with the use of images. Therefore I provided some relevant pictures to connect better with the users. A picture can speak a thousand words, and choosing the right images for the website can help with brand positioning and connecting with the target audience.

If you don’t have a specific goal, you won’t know what to prioritize.

In the old design the text covered the whole picture which makes it difficult to view the image. Also there is no proper visual hierarchy.

Therefore I ranked the elements on the website based on the business objective.

Most important (The biggest eye-catcher) : The image on the right
2nd most important: The message “Get customized office space”.
3rd most important: The button

Without micro interactions, websites would be a static and boring collection of text and images, and users would feel like mere observers instead of active participants.

In order to encourage users to click & make sure that the experience is tempting for them, I provided a feedback on hover.

Additionally, micro interactions can make the experience of using a website feel easier and more seamless. That’s also great for branding.

1. They communicate information about certain elements, like whether or not it’s interactive
2. They make the user experience much more rewarding

1. The “View less” button was oddly placed in between therefore I decided to remove the button & display the contents permanently in the footer.
2. I provided the links with a fade animation to let users know that its clickable.
3. Rearranged the 2-column format into rows to display the links in a much cleaner way.
4. The back Back to top button should appear during scrolling too. It becomes too tedious to scroll back up through screens and screens of content. Place a persistent Back to Top button in the lower right side of the page. This is where people expect to see it. This position is out of the way, but noticeable.

Last but not the least, I added a sticky header so that it is accessible from anywhere on the website without having to scroll.

If we choose to have a menu bar to be in the user’s permanent view, this allows them to move around the site quicker. In fact, an early study found that implementing sticky navigation increases conversion by close to 3% . That’s a great boost, even before optimizing the page.

Next steps for the project / Scope of improvement

There are some sections which can still be further improved but given the time constraints I couldn’t manage to work on them.

1. The QPro section can be emphasized as it is an important feature.
2. The navigation bar icons can be improved to match the current standards.

Reflection🤠

This project was fun to do and also a lot challenging. I learned about figuring out what works and what doesn’t and implementing them, and the best part is it doesn’t end. The learning process is continuous.

And that’s a wrap. Thank you for reading!

You can give 50 claps at once, click and hold on the clap button😁. Be sure to leave your comments, suggestions & do let me know where did I go wrong & how can I further improve.

You can connect with me on LinkedIn, Behance or drop me a message at sinhaanurat@gmail.com

Check out my other case studies:

Case study: Create your own recipes

Case study: Reimagining the OTT experience