Orbit technology
YEAR
2023
ROLE
UX/UI design
PRODUCT
Admin portal/OMC
TEAM
Product manager
UX researcher
Chief Product Officer
Front-end developers
Back-end developers
Client introduction
Orbit is a Norway-based start-up, facilitating between owners of empty offices and professionals who are looking for co-working spaces. They want to change the way the office works through their app and user platform.
The Orbit Mission Control
OMC
It was clear from the beginning that this feature was going to be added to the Client portal which is called the Orbit Mission Control. Space providers already had access to this tool to keep track of the occupancy and usage levels of their spaces. Managing access from here would give the user even more control and insights into their locations and areas.
Design process
Research:
• Technical discussions
• Competitor Analysis
• Clustering insights
Analysis:
• User flows
• Task analysis
• Brainstorm sessions
Ideate:
• Explorations
• Wireframes
• Prototype
Testing:
• User testing
• Iterating
Development:
• Micro-interactions
• High fidelity UI
Problem statement
How can we help Space providers to manage user access to their facilities?
During previous conversations with various space providers, it became abundantly clear that there was a need for a tool that would help with managing user access. This was something that was scoped when setting up the whole Orbit Mission Control and it became a logical step to expand upon.
Main goals for this feature:
- Giving more control to space providers over the companies within their system.
- Relieve pressure on our customer support side
Research and analysis
The design process wasn’t straightforward as we were exploring and defining overlapping concepts between various products. The first thing we as a team needed to settle on was how we would define terms such as access, and companies vs teams.
Redefining access
We had to redefine what “access” meant and how it was given. We inherited structures that we applied to the system in which Companies were able to create teams, which in turn were directly linked to specific locations. The biggest problem occurred when users needed to have access to multiple locations, with the current set-up they needed to be placed in multiple teams which meant duplicated groups.
Creating new entities
When figuring out access we also needed to define Who gets access and How we should grant that. In the previous situation, the Space providers were in charge of inviting all the users to the app and granting access to each team. During the brainstorming sessions, we wanted to relieve pressure from the Space providers and decided upon a more practical flow. The Space provider should invite the whole company (new entity) and let the team administrator manage the rest of the invitations, that way the Space provider is able to focus more on access.
Wireframes and prototypes
The design process wasn’t straightforward as we were exploring and defining overlapping concepts between various products. The first thing we as a team needed to settle on was how we would define terms such as access, and companies vs teams.
I started to focus more on the visual structure and how we could make the user journey as smooth as possible. By creating wireframes and prototypes we (the product and dev team) were able to easily walk through the various concepts and wireframes to improve and expand upon, which let us to create the first testable prototype.
User profiles
Space provider/company level
- Can invite/remove companies
- Can give company access
- Access to other sections of the OMC
Company admin/user level
- Can invite/remove companies
- Can give company access
- Access to other sections of the OMC
Testing
User testing needed to be done to verify if the new concepts were clear and if the flow would make sense to the user. Apart from that, it was also important for us to lay our assumptions to rest and discover other challenges that we might have overseen.
Analyzing the test sessions
During the testing sessions notes were taken to be tagged and analyzed which we created into new insights that I used to improve the wireframes and flow.
Main improvements that needed to be made:
- Host admins need to see and understand the accuracy of the info
- Re-assurance before critical and/or bulk actions
- Access concepts needed to be clearer
Iterations
User testing needed to be done to verify if the new concepts were clear and if the flow would make sense to the user. Apart from that, it was also important for us to lay our assumptions to rest and discover other challenges that we might have overseen.
Access concepts
This aspect posed the greatest challenge for us, as this is the most significant change that we wanted to implement. During testing it became apparent that more information about the access packs was necessary.
Providing re-assurance
Re-assurance before critical and or bulk actions were improved by switching the flow of the screens, repeating bulk information, and making the user confirm that the data being shown is correct.
Understanding information
During testing it came to our attention that some users weren’t confident in following certain actions due to the unclarity of the information. Improvements that have been implemented were adding more tooltips, labels, changing the hierarchy, and making notes where colours in the final design can influence the structure.
Final design
After many rounds of iterations and creating various options, the wireframes could finally be turned into high-definition designs. Where the focus still remained on proper UX and UI with the goal of improving accessibility.
Expanding on the design system
A design system was already set in place to streamline the design process and ensure brand integrity. While the majority of components were already created, it was nonetheless necessary to create new items and variants for the newer sections within the portal and improve upon the existing ones.
Accessibility
As a designer, my main aim was to use the existing components and designs to create new screens and iterate on the existing items. Creating better designs with a focus on improving accessibility by ensuring sufficient colour contrast, adjusting the text scale, improving labels, proper error handling, and more.
Animations and micro-interactions
To make the platform more visually appealing I’ve made animations and micro-interactions that will help enhance the user experience by providing visual feedback and guiding users through the interface with intuitive cues, making users feel connected and in control.
Let's connect
Kimberly Kembie ©2024
