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
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
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.
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.
⬆️ 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.
⬇️ 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.
⬇️ Updated and refined the table design to make it more legible and create more space for the data.
⬇️ Refining the chart design. Along with creating custom chart colour palette to ensure that the colours don’t crash and can be easily understood.
⬇️ Updated invite to team modal. Building in some personality into the product using secondary modals.
⬇️ Updated home screen design. Setting the tone for the whole product.
⬇️ Refining and simplifying context menus, to make them easier to use.
⬇️ Updating dashboard tabs design to help see selected tab at a glance.
⬇️ Initial tour UI.
⬇️ Design style for onboarding and marketing emails, building out the visual touch points for the product.
⬇️ Filter and sort components. Building out the flow to reveal actions when required.
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.
⬇️ Updating the product website. Designed within 2 days within the constraints of the Hubspot website template language.
⬇️ 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.
⬇️ 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.
⬇️ Refining dashboard drag and drop functionality. Adding feedback loops, adding clear indicators to guide users on how to create dashboard layouts.
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.
⬇️ Redesigning formula styling and flow. Exploring new user flows and styles to increase user feedback and understanding. Then reducing scope to support development resource.
⬇️ Working out an new and returning user onboarding flow. Using user testing, then adjusting and refining content and flow based on feedback.
⬇️ Building out the table pivot functionality. To create UI similarity with spreadsheet products.
⬇️ Starting to build out and add help in product to support the PLG product model.
⬇️ 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.
Highlighting some of the things that I think worked really well in the product, and am proud off.
💚 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. ⭐