Styling for a no-code platform with an excel-like user interface connected to a cloud database capable of handling millions of records
Year
2023
Duration
1 month
Role
Product Designer
Platform
Web
Team
VP - Product Design and UX, Director UX, 2 Front End Engineers
Tool stack
Figma, Jira
My Role
To skin the excel like user interface, accounting for users in older age group and data heavy tables.
Challenge
LiveCube needed to provide an experience that is not overwhelming for the user when working with a lot of data.
The UI also needed to consider the aging users of the product and be clean.
Status Quo
LiveCube used spread.js to power it’s excel-like UI.
This obviously lacked the Highradius brand personality and the user experience offered in it’s remaining product suite.
Old LiveCUbe UI from spread.js
Solution & Impact
The styling theme that was implemented had the following:
Simplified menus and accent highlights in Highradius palette refelecting brand personality.
Adaptive font sizes to cater to different screen width.
Alternate colored rows and cells with no borders to increase readability and legibility.
Smart Color coding to reflect the type of column.
Revamped LiveCube UI
Process
step 1 of 5
Market Research
Exploring and curating other products with excel-like interfaces helped in understanding how brands bring their personality to excel-like sheets and tables.
Understand how new age excel-like products look and feel like
step 2 of 5
Create UI style concepts based on the Highradius brand
Explored UI styling themes for LiveCube listing down advantages of every theme.
step 3 of 5
Get feedback and buy-in from the CEO
After presenting to the CEO, generating consensus with all stake holders, we now had a final styling direction that I could iterate on.
Refine concepts based on stakeholder feedback and branding
step 4 of 5
Quickly Iterate and handoff to engineering team
With a quick iteration and another round of feedback, I then made the update ready for handoff to the engineering teams. This followed a detailed walkthrough with the engineers where in doubts from their side were clarified by me.
step 5 of 5
Test and do one final UX audit
Once the update was ready for review, I worked with QA to test from a design point of view and provide sign-off.
Learnings
This project turned out to be a great exercise in working with C-suite and understanding brand perception from the CEO point of view.
This body is identified as Neelank Sachan, the mind is ignited with curiosity to always learn and the soul is searching for meaning through the growth of ecosystem it exists in.
