Skip links

Arithmix product design

Arithmix product design

Worked as the only designer for the product, working directly with the CEO, product managers, development team, marketing team and across the company of 30+ people to create an new data product.

ABOUT THE PRODUCT

MY ROLE

SKILLS

1 – 3 MONTHS

Used this period to understand the product mission and vision. Understand and evaluate the product and processes. And to laid the ground work for growth and improvements. 

⬇️  The interface when I joined

Product designer

Started by learning, researching and information gathering.

🎙️  Conducted stakeholder interviews – To understand what issues product was aiming to solve, the product vision, design considerations, any limitations, product roadmap, any the business considerations. Allowed me to have a full understand of situation. 

📊  Used the product and recorded detailed observations – Then reviewing notes with the wider product team to understand decisions made and future work considerations. 

Read More

Proceeded to work out and implicate a design strategy for the product.

🚀  Worked out a visual design approach – Researching and developing style tile options, presenting to decision makers, and developing style from feedback.

📖  Created a set UX guidelines – Based of interviews and research, to help guide decision making.

📝  Set up design system – Building the structure for the design library, and working out the initial approach.

Read More

⬆️  The UX guidelines. Shown as part of a presentation using components designed over the coming months.

4 – 6 MONTHS

Building out the design language by creating product UI components, and design system.

🧰  Stress testing if the decisions made in the first 3 months actually work or not. Implementing product UX strategy, and developer review processes.

⬇️  Defining the design tokens for the design system. Working with developers to set up storybook and implement the design approach.

Arithmix design tokens

⬇️  Creating an original icon library. Organised into groups. Could have used an existing library, however there was a lot of gaps which need unique product icons, and it offered an opportunity to add personality to the product.

Arithmix Icons design

⬇️  Updated and refined the table design to make it more legible and create more space for the data.

Arithmix table design

⬇️  Refining the chart design. Along with creating custom chart colour palette to ensure that the colours don’t crash and can be easily understood.

Arithmix chart design

⬇️  Updated invite to team modal. Building in some personality into the product using secondary modals.

Arithmix Invite modal product design

⬇️  Updated home screen design. Setting the tone for the whole product.

Arithmix home screen product design

⬇️  Refining and simplifying context menus, to make them easier to use.

Arithmix Context menus product design

⬇️  Updating dashboard tabs design to help see selected tab at a glance.

Arithmix dashboard tabs product design

⬇️  Initial tour UI.

Arithmix Initial tour

⬇️  Design style for onboarding and marketing emails, building out the visual touch points for the product.

Arithmix email templates design

⬇️  Filter and sort components. Building out the flow to reveal actions when required.

Arithmix Filter sort modal

7 – 12 MONTHS

Creating more complex components.

⚖️  Supporting new product features, with rapid prototyping and longer lead times. Locking in the design system.

⬇️  Hierarchy feature. Drag and drop feature to easily create hierarchies from data. A feature not possible in spreadsheets or other similar products. Required complex functionality to enable data to be displayed freely across 3 table axis, in either of 2 layouts,  show/hide levels, reorder on drag, collapse/expand levels, switch display order, rename, delete/remove, and pivot.

Spreadsheet hierarchy UI UX

⬇️  Updating the product website. Designed within 2 days within the constraints of the Hubspot website template language.

Arithmix website

⬇️  Simplified import flow for CSV data to as few steps as possible. Reducing complexity to allow users to get their data into Arithmix as quickly and easily as possible.

Importing CSV data

⬇️  Creating an expandable and flexible UI pattern to format and style data, and tables. Which can then be extended across the product to create a consistent user experience. As a team we used draggable modals to extend functionality as we wanted to show as much data as possible (at all times) by removing a toolbar, or using an additional right side panel as the contents was shown using a left side panel.

Arithmix UI pattern

⬇️  Refining dashboard drag and drop functionality. Adding feedback loops, adding clear indicators to guide users on how to create dashboard layouts.

Dashboard drag and drop UI UX

12+ MONTHS

Getting the product market ready.

👋  Extending usability, building out user support and product onboarding. Refining styles and design system.

⬇️  Updating style and functionality for the contents panel. Aligning to rest of product. Increasing its usability so reusing data to build models is clearly signposted and easy to find.

Arithmix data contents panel

⬇️  Redesigning formula styling and flow. Exploring new user flows and styles to increase user feedback and understanding. Then reducing scope to support development resource.

Formula bar UX UI

⬇️  Working out an new and returning user onboarding flow. Using user testing, then adjusting and refining content and flow based on feedback.

Product user onboarding

⬇️  Building out the table pivot functionality. To create UI similarity with spreadsheet products.

Table Pivot UX UI

⬇️  Starting to build out and add help in product to support the PLG product model.

Arithmix Help

⬇️  Improved keyboard and grid usability. Building out keyboard shortcuts and in-grid indicators. Helped to increase user product understanding and guidance to add/reuse data.

⬇️  Explorations for future dashboard updates. Creating a more visually distinctive brand interface, adding zoom controls, and customisable experience.

Data dashboard UI design

FAVOURITE BITS

Highlighting some of the things that I think worked really well in the product, and am proud off.

Design system

💚  Arithmix design system. 

Creating and building out the system by myself. It included 50+ design tokens, 100+ unique icons, 30+ UI elements, 30+ original illustrations, 40+ individual complex components. Each with individual interaction states and flows.

💗  Adding delight to a complex product.

Arithmix was a complex product, with a lot of interconnected user flows and flexibility. Therefore, where possible and appropriate, tried to add some delight to the user experience. Either in a UI detail or as part of a action (or flow) to increase the emotional connection and slickness for the end user.

🧡  Design newsletter. 

A bi-weekly company wide newsletter that I created and sent out. It worked to communicate upcoming features, design and product thinking to wider development team. Helping everyone get on the same page about what we were building.

💙  Collaborating with a cross functionality team. 

Working with everyone in the company to deliver a fully working, delightful, easy to use product was a real pleasure. Collaborated with everyone from the CEO, senior leadership, head of product, product managers, front-end and back-end developers, and marketing, to build the product.

⭐  Demo video from CEO showcasing product features.  ⭐

Share with others

Next project

BNY MELLON

Report Design, Data Visualisation, Infographics

bny mellon report

I’m currently available for projects

Send me a message and let’s chat about how I can help you.

© 2019, Ripetungi, Ltd