Context
ShapesXR is a VR design tool, often referred to as the Figma for VR apps. As a part of its workflow, ShapesXR allows users to manage their projects on the web. This web application, or Dashboard, also enables users to import 3D models or images into their projects for use in the VR app. Additionally, it provides features for organizing projects, setting roles and permissions, and managing both organizational and personal accounts.
For this project, I was assigned the task of redesigning the Dashboard. The original Dashboard exhibited several UX and UI issues, including a complex flow for updating files, core sections like Projects hidden in the main menu, the absence of a UI design system, and a subpar mobile experience.
This redesign initiative aimed to address these concerns and enhance the overall usability of the platform.
Design Solution
We had an existing UI framework in place and, in collaboration with the front-end team, opted not to replace it but to address and fix its issues. This approach allowed us to narrow down the project scope while still achieving optimal results. The UI strategy involved a complete overhaul of the compoenents while rectifying inconsistencies. I accomplished this by crafting new foundations and subsequently developing new components, enabling us to achieve a modern and pixel-perfect UI.
In terms of UX, I established solid navigation patterns and implemented a notification system. On the other hand I created a new information architecture so the core functionalities were easily discoverable.
Recent spaces page
Share Space Modal
Space Viewer
Projects List
Project detail page
Files page with folders
Members of a project list
Moving a file between folders
Detail of actions displayed when selecting a file
Draging and droping a file directly to the page
A file uploading at the bottom right
Organization Settings page
Results
After the release, the Dashboard became usable on both desktop and mobile devices. The number of imported assets increased by 30%, and there was a 10% weekly increase in retention for mobile users.
On the other hand, as a team, we experienced increased efficiency. The design system, in alignment with the code, enabled us to work faster by utilizing existing components rather than creating them from scratch every time a new feature needed implementation
Design Process
I addressed the problem by creating an inventory of all the pages, accompanied by a new information architecture. Following that, I conducted a heuristic evaluation to identify and prioritize issues in collaboration with the team.
Concerning the UI, I compiled an inventory of all existing components. Aligned with the front-end team, we opted not to change the UI framework but instead improve the current one.
Once the design system was established, I began designing all the new screens and conducted user testing on features such as the file uploading system. Simultaneously, I worked on designing the mobile version of the entire app.
Finally, I prepared the handoff for developers, encompassing all user flows and UI specifications.
Layout representation with the types of content by colors
Design System
Mobile layouts
UI specs
Dashboard before re design: Imported Files page
Dashboard before re design: Exported Files page
Dashboard before re design: Recent Spaces page
Dashboard before re design: Project page
Dashboard before re design: Space page
Dashboard before re design: Space viewer
Thank you for reading! 💙
