Platform: Web
Overview
An efficient, user friendly rebrand of an existing office space booking system. Part of a larger redesign initiative for a desktop workflow application.
Roles: UI Design, Branding
Industry: SaaS
Tools: Figma
I was tasked with redesigning a client’s desk booking flow as part of a large scale redesign. I restructured their site map to improve navigation hierarchy and highlight the improved booking flow. I also created an updated style guide.
Problem
My clients’ workplace was shifting back to a hybrid work environment after several years of remote work. They sought an efficient, user-friendly update to their old office reservation system which would include hot-desking and long term reservation options.
How might we capture evolving user needs as offices shift to hybrid environments?
Challenges
This project was conceived as the initial segment for a site-wide rebrand and UI update. Prior to developer handoff and officially implementing the updated UI and booking flow, this project was put on indefinite hold. I have listed my recommendations for future iterations of the project at the end of this case study.
Information Architecture
Site Map
The existing office request system was hidden within the “Facility Management” category, so I was tasked with restructuring the reservation request section of the site. I conducted a card sort to determine how to define specific request categories.
Based on the results of the card sort, I decided to treat the requests category as a separate entity, and give the desk reservations their own subcategory.
Visual Design
Low Fidelity Wireframes
I started with two potential layouts for the booking flow, one vertical and one horizontal, to allow space for the office floorplan later in the flow.
While both options had their drawbacks in regards to space, I advocated for the vertical alignment to give the floorplan some breathing room, and to utilize a popout option if users wished to zoom in.
Style Tile
I took inspiration from Midcentury Modern office designs for this rebrand. The teal and orange color palette and the bold minimalist graphics call back to this era of postwar innovation.
High Fidelity Wireframes
The high fidelity wireframes use a popout window of the relevant floor plan to allow for more detailed maps. The use of ample negative space and minimalist graphics enhances this concise task flow.
Conclusion
Next Steps
Present designs to stakeholders to gain approval and make necessary edits.
Integrate updated SketchUp floor model for prototyping and user testing.
Hand off to developer to assess functionality and make appropriate modifications.
Madeleine Buck
© 2024
