WeWork
1st Main was approached by WeWork India to redesign their website. The old website lacked optimal user experience and had an outdated design that did not align with the company's modern and innovative image. The goal was to create a user-friendly website that encourages engagement and attracts new customers.
As the visual designer on the project, I led the redesign of the entire website to enhance the user experience. I also created a component library using their existing design system to maintain consistency throughout the website.
2022 / Website Redesign
With
1st Main
Team
UX Designer - Kinnari Thakker, Ashritha Rao, Arushi Arora
Visual Designer - Ashritha Rao
.png)
Breakdown of the problem
🔗 Disjointed experiences
The website's disjointed experiences and isolated information created a confusing and cluttered interface that hindered users from finding what they needed.
📜 Dated user interface
The website's interface was outdated and had significant usability issues, resulting in a poor user experience.
🧐 Complex booking processes
The website's complex booking processes lacked a unified and user-friendly approach, making it difficult for users to book or find a workspace.
Process
Research
We worked with the client to understand their objectives, target audience, and constraints. These meetings provided us with valuable insights that helped us move our project forward.
We conducted a website audit to identify usability issues with the existing website. This helped us pinpoint specific areas for improvement, such as confusing navigation and disjointed design, and guided our design decisions throughout the project.
Then, we conducted user interviews, surveys, and market analysis to understand user needs and preferences. Users found the current website confusing and cluttered, and desired a cleaner and more intuitive design.
Our research helped us identify opportunities to improve the website's design and user experience while staying competitive within the market. We used this research to guide our design decisions throughout the project.
Design Goals
Simple
Cohesive
Personalized
Brief overview of the old experience
Navigation bar had too many pages listed that were not as important. The pages that were shown were linked to separate landing pages.
The contact form did not have the right fields to retrieve the exact information from the users
All the CTAs on the page linked to the same contact form even though they had different usecases
Outdated information highlighted on the homepage
Multiple primary CTAs that did not serve the right function.
Information Architecture
Homepage Revamp
Mega Menus & Footer
The first thing on our task list was to simplify the nav menu by reducing the number of pages listed and highlighting the relevant ones. To make sure all the information was easily accessible we introduced mega menu drop-downs for Locations and Workspaces. These drop-downs provided a bird's eye view that made it simple to identify and compare workspaces and locations. The rest of the informational pages were shifted to the footer.
Guided Booking Experience
We added the guided booking module above the fold to accelerate and simplify the workspace reservation process. This makes it easier for users to quickly browse through the many workplaces WeWork offers and complete the booking process without having to navigate through several pages.
What is the Guided Booking Experience anyway?
The Guided Booking module was designed to simplify the process of finding and booking a workspace at WeWork. With this, users can quickly and easily search for available workspaces based on their requirements and preferences. The module presents relevant workspaces and enables users to seamlessly complete the booking process, saving valuable time and effort. This feature offers a hassle-free booking experience and ensures users can find the perfect workspace to suit their needs.
Here is a quick walkthrough for one of the booking flows.
Cohesive Experience
The detailed pages and listing pages acted as an information hub and also provided booking CTAs at multiple touch-points. Since most of these pages already existed, our task was to improve the layout and introduce new modules in some of the pages.
Other pages
The remaining pages we needed to design focused on providing information about WeWork's services and benefits. To ensure consistency across these pages and future designs, we created templates and designed content blocks. By doing so, we were able to streamline the design process and maintain a cohesive look and feel throughout the website.
Component Library
Ray is the documentation for WeWork's design system, which includes comprehensive code and component styles. However, we found that there was no usable component library available. To address this issue, we decided to build a component library on Figma using the existing guidelines. This allowed us to adapt the user interface and visual design of our new projects while remaining consistent with the established design language. By creating a centralized library of reusable components, we were able to improve the efficiency and consistency of our design process.
📖 Challenges, compromises and next steps
WeWork came to 1st Main for the entire redesign and development of their website. We initially had 8 month timeline to complete the project. 1st Main went through an acquisition during this period and hence had to handover the remaining work to another agency. This meant that we couldn’t complete the entire redesign. A lot of the designs didn’t go through the final development. Given the small timeline for the project, we adopted an agile approach, working in parallel on design and development. This involved quick iterations, prompt feedback, and a streamlined process of finalising the design and handing over to development after each page was completed. By setting up a well-organized system, we ensured a seamless workflow and successful completion of the project within the given timeline.
📖 Challenges, compromises and next steps
Designing for accessibility - WeWork is committed to continuously improving the accessibility and usability of its website. As a result, we followed specific guidelines to ensure that our designs met accessibility standards. Through this process, I gained valuable insights into designing for inclusivity and learned how to create designs that are accessible to all.
Content first approach - With some of the informational and marketing pages, content played a big role and that’s why we went with a content first approach. This involved collaborating closely with the content strategist and marketing team to understand their goals and develop a design that would effectively showcase their messaging.
Getting creative with brand guidelines - The WeWork website design had to follow strict brand guidelines that limited the use of illustrations and required a balance between fun and simplicity. To overcome this, I creatively used colors, shapes, and images to develop a visually appealing style that aligned with the brand while making the website design unique.