[Stealth]
A custodian is a bank that holds assets for its customers to minimize the risk of loss and theft. Custodians traditionally hold assets such as stocks, bonds, and currency. [Stealth], being a crypto custodian, focusses on crypto assets such as Bitcoin and Ether.
The process
1 Requirement gathering
At the start of the project there was limited information to work with. Requirements were defined on story-title level but lacked further specification.
To uncover the product and design requirements I organized a series of workshops involving key project stakeholders. Since the participants were distributed globally I used Miro, a digital whiteboarding tool, to conduct the workshop remotely.
The high-level requirements hinted at the need for both flows and stand-alone screens. Therefore I divided the workshops into user flow and user storyboarding sessions based on the jobs-to-be-done framework. The result of these sessions provided me with the information I needed to start designing wireframes. It also ensured that the stakeholders were aligned on the desired outcome.
Stakeholders
aligned and ready
2 Wireframe design
Wireframes are low-fidelity representations of what a final design will look like. Their main purpose is to show the layout of pages and make clear how different components within said pages relate to one another. Because of their focus on functionality and user flow they disregard styling elements such as colors and fonts.
Following the workshops I started translating the requirements into wireframes using Figma – a digital design tool. After completing the first iteration I created a low-fidelity clickable prototype that allowed stakeholders to click through the screens.
Prototypes enable stakeholders to test designs early on without having to write code, making them a low-cost way to find out if a design “makes sense”. Following a demo to the broader team I received some feedback and made another iteration of the design.
You feel it when you see it
3 Mockup design
Mockups are high-fidelity designs that resemble the end product and include styling elements such as colors, fonts, and rich icons. Mockups are used by engineers to implement the front-end of an app. Therefore they need to be precise and meticuously made.
After the second iteration of wireframes was signed-off I translated the designs into mockups. This meant adding the previously mentioned branding elements and creating robust, high-grade components. Because there were no brand guidelines to start with I created a color palette and font library that worked well for the result we were aiming for.
From pixel to perfect
4 Design system setup
A digital product is made up of UI components. These can be simple components like buttons and inputs or more complex ones like table rows. Standardized components enable designers to work fast without breaking things, create more consistent designs, and reduce technical debt. An integrated setup also allows them to make changes to components only once and have these changes propagate throughout all component instances.
After completing the mockups I extracted the core components from the designs and created a light-weight design system, or UI kit, around them. I made sure the components are responsive and robust by using advanced design techniques such as auto layout and variants. Anytime a new significant component emerged it would be added to the UI kit.
Design debt? Never heard of it.
5 Accessibility review
A good user interface entails more than just pretty pixels. The primary purpose of an interface is to enable users to interact with its underlying system. Although aesthetics are an important element that should not be overlooked, a UI should primarily be clear and accessible to its users, and enable them to achieve their goals. This is achieved through appropriate use of colors and fonts, contrast, and spacing.
After setting up the UI kit I did an accessibility review to ensure that fonts are easily readable to the user. It was particularly important for this design since it uses a dark theme.
During the review I aimed for an AA-AAA WCAG conformance level. This required adjusting both font sizes and theme colors without compromising aesthetics.
6 Delivery
Strong product teams are able to communicate effectively. This requires members to have at least some level of cross-domain understanding.
During the final demo I took the opportunity to explain to the team how the design file was architected. I also walked them through the Figma interface and explained some important design concepts.
Although the meeting was attended by stakeholders not directly involved in the design process (e.g. the CEO) I received the feedback that the walkthrough was insightful and useful to everyone. The team was also satisfied with the final result.
CTO [Stealth]