Sneak Peak

Process Workflow

Design Systems

A design system is a set of tools, components, patterns, and best practices that serve as a foundation for all software products within a company.

A design system holds all the visuals styles and components documented and then released into reusable code for developers and designers. This enables companies to manage design at scale while adhering to consistency across all our products.

A design system is not some side project, its a product serving other products.

design system guidelines design system guidelines

A design system built in storybook and controled in Invision DSM.

Whiteboarding Sessions

Having these type of sessions early on, eliminates alot of product debt along the way and is a great way to create shared understanding between teams, while it creates a safe space to propose new ideas. This cost-effective method is effortless in terms of additional resources, are quick to iterate and are collaborative by nature.

When working on a new feature or an existing one that is unclear, I love to spend a few hours doing whiteboarding sessions with the team to bring all the knowledge on the table and focus on the problems. The more a team collectively understands what its doing and why, the less it has to depend on cross email communications and detailed documents to continue it.

These sessions can easily be done remotely through the invision freehand tool as seen in the following screenshot.

whiteboarding session

Whiteboarding session for a crypto app project done remotely through invision freehand.

Lean Canvas

The Lean Canvas technique captures a business model in a lean one page diagram. It is the perfect format for brainstorming possible business models, prioritizing where to start, and tracking ongoing learnings.

lean canvas

A lean canvas board exploring Voice UI as a concept.

Usability Testing

Its important to test and validate your ideas as early as possible, without starting any development. Usability testing helps us uncover problems, discover opportunities, and learn about users behaviour.

Within the first week of an idea, I produce a quick clickable prototype in Figma, create a script for a usability session and hire 5 users to get their feedback, learn about their current behaviours, find their painpoints through the process. Learning and iterating as quickly as possible will avoid alot of risks in the future.

usability testing

Facilitating a usability test for a roadside assistance app.

Responsive Type Scales

Different sites, require different types. Modular type scale is a series of type sizes that relate to each other because they increase by the same ratio.

Different Typescales are required depending on the website archetype. A blog website requires a totally different typescale than a product dashboard app. One requires higher ratio typescales than the other. Typography is the base of all design and its important to follow solid foundations.

modular type scale

A modular type scale documentation that works across a range of digital devices.