Overhauling the information architecture and design system of a corporate payments platform
responsive website • FinTech • neobanking • cryptocurrency
Overview
Responsibilities
​
Product Audit / Analysis
Design
​
​
Tools
​
FigJam
Figma
​
​
Team
​​
Gabriel Olivar
Introduction
​
Orbital is a financial services platform that provides neobanking and cryptopayment tools for global businesses. On top of re-designing existing screens and creating new screens for new features, I helped organize and expand their new design system, as well as spearhead the overhaul of the product’s outdated information architecture.
​
Project Type
​
Direct client work as a Varias UX/UI expert
​
​
Timeline
​
Nov 2023 - Feb 2024
Process
01
Discover
​
Research & Empathize
02
Design
​
Define & Ideate
01
Discover
Methods
Information Architecture Mapping
User Stories
User Role Mapping
​
​
Tools
​
FigJam
Summary
​
Working alongside my design team mate, Gabriel, we mapped out the product’s existing information infrastructure. We then created user stories and defined all the feature permissions for all the different user roles in order to better understand their needs and goals, ensuring the new infrastructure is user-centric.
Context
​
Upon joining the Orbital team and first experiencing their product, I immediately noticed how unintuitive it was to navigate and understand. I had the unique perspective of a completely new user and could identify pain points that could be improved. The design team had very little data and resources to validate our assumptions. We had to rely on the Chief Product Officer’s limited customer insights. The new IA initiative was conducted on top of other routine tasks, such as re-designing screens for the addition of new features.
Information Architecture Mapping (Old)
Before thinking about the new information architecture, we mapped out the current existing experience to gain a better understanding of what was working and what was not. Having concrete notes would help us figure out our next steps and specifically target the pain points moving forward.
Ideally at this stage we would also run usability tests to better understand how real customers use the platform and what their pain points are. Since we did not have the resources to do this, we had to proceed with our own educated assumptions.
User Stories​
Because the product was so feature-heavy, we took a step back and created user stories for the 2 most common personas of the platform. We dug into each user’s goals, needs, motivations, and frustrations to map existing features to their tasks, as well as imagine new potential features for tasks that did not yet have a solution. This step allowed us to remain user-centric when we eventually re-organized the features and established the flows for the new information architecture.
User Roles
One platform feature enabled certain administrators to assign users in their organization a specific role, which gave them varying levels of access to different parts of the product and its other features.
Working through the user stories brought to our attention the need to fully define the feature permissions for each user role, because this would affect how we would eventually re-organize the overall structure of the platform. It was important to be able to “hide” different features and sections of the platform in a way that made sense, according to the appropriate permissions for each role.
Information Architecture Mapping (New)​
After validating the user roles with the Chief Product Officer, we finally proceeded to map out the new information infrastructure, while ensuring we kept in mind the different user tasks and their roles. We paid extra attention to tricky areas, such as some screens that seemed redundant at first glance but were actually vital to be kept separate. We also carefully noted existing screens that needed to be updated and new screens that needed to be created, as well as their priority.
02.0
Design
Methods
​
Design System
Screen Design
​
​
Tools
​
Figma
Summary
​
My design team mate, Gabriel, and I began creating and updating high-priority screens to match the new information infrastructure, including the use of new components from the revamped design system.
Context
​
Separate from the information architecture initiative, helping update the Orbital design system was one of my main tasks upon joining the team. I used new components from the system for all screens that I worked on, whether I was creating a new screen from scratch or updating an existing one to add new features.
Design System
Variables and Tokens
​
The previous iteration of Orbital’s design system was simple (utilizing only local styles within Figma) and incomplete (missing vital elements such as a consistent grid and spacing system). Many elements also did not meet accessibility standards (such as font sizes). Gabriel overhauled much of the design system by establishing variables and primitive/semantic design tokens, which I utilized in creating new components.
Grids and Layouts
​
I established the grid and layout system for all new screens (and screen updates) moving forward. I created detailed diagrams and guidelines for the design system’s documentation, so that it can be easily replicated and used as a template. The documentation format that I created could also be used for adding future guidelines for other parts of the design system.
Components and Screens
New Navigation​
New information architecture meant we needed a new main navigation menu. We ideated this menu alongside working on the new IA, as it helped give us another visual representation of how the screens would be organized in the new version of the platform. Each item in the old navigation menu was simply added to the bottom of the list as the feature/screen was added to the platform, without any regard for the platform’s IA. The new menu contained a hierarchical system of items, organized into high-level sections of the platform that could easily be hidden from the menu depending on the user’s role and appropriate permissions.
Home Dashboard​
Finally I began to work on creating / updating screens to match the new information architecture. One of the most important screens was the new general dashboard that would serve as the new home screen.
Previously, the old “home” was the Accounts screen, which was part of the Treasury Solutions section of the platform and contained very specific information that was potentially irrelevant to certain users. The new home screen would be a dashboard with a high-level overview of information more relevant to each individual user. It would have appropriate buttons and links to other parts of the platform, so that users can quickly get to their tasks.
A new addition would also be an area for alerts and notifications, both about Orbital’s platform and about tasks specific to the user, such as pending approvals.
User Roles​
Because so much emphasis was placed on defining the user roles and permissions, it was also important to update the management screen for users with admin status who could make changes to users in their organization.
New components from the design system were used, and new functions were added to enable quick and easy changes. Expanding/collapsing rows would allow for scalability - as new features are added to the platform, these can be added to the user permissions and managed accordingly. The page’s header was also changed to minimize confusion between editing the organization vs. editing the user’s own personal information.
Final Takeaways
Working on the Orbital platform was a great lesson in organizing an established feature-heavy product. It was a challenge to have to rely on educated assumptions rather than real data from usability tests and customer interviews. This enabled me to practice collaborating with not just another designer but other important team members, such as the Chief Product Officer. I also made sure to put extra focus on the user’s goals and needs, so that they would not get lost in the re-organization of screens and features.
Overall, it was an enjoyable experience for someone who quite enjoys not just design but also order, structure, diagrams, and spreadsheets!
Next Steps
​
My role in the Orbital project ended before the new version of the platform with its updated IA and screens could be released. Such a product update is both a huge undertaking for designers and developers and a dramatic change for the end users. Therefore, extra care would be necessary to roll it out to the customer-base with as little disruption as possible.
If I returned, I would continue working towards this new product release by designing new screens and updating the existing ones in the priority order that I had established with Gabriel. Ideally, we would have the resources to conduct usability tests by releasing the update to a small number of trusted customers and make appropriate adjustments before releasing it to the wider userbase.
