allspark-builder-scaled-1

Allspark

UI/UX and Design for award-winning SaaS product - Here are a few snippets of Allspark's Dashboard design work I did. I designed a digital card-based interaction model for those tired of consuming extensive data insights on the dashboards, keeping the easy user interface in mind.

Brand
Allspark

Year
2020

Role
Lead UI/UX, Visual Designer, Branding

Site
https://getallspark.com/

card

Although it looks simple to create cards and a card-based design, there are some rules to follow to ensure a great user experience. I applied these rules to offer a groundwork for designing and a good card-based interface.

Wireframing and testing out the design aesthetics and user experience.

Drag to check the Before and After wireframe layouts 

Optically-consistent-patterns-v2-1 Optically-consistent-pattern-v2-1
allspark-pad1-1

For the builder screen to build the audience cards along with the engineers we used Mapbox. Testing out with colour various tones I came up with the dark theme to match the home page's Audience Card display.

Real-time insights can be viewed for each AudienceCard, including active audiences over a period of time, demographics and nature of these audiences. Process workflow involved till the completion of the project.

Allspark-insight-footer-1
allspark-pad2-1
Allspark-table-Screen-1

Allsaprk's tabular dashboard is where all the data are stored, statistics, dates and analytics. Thanks to the top navigation users can easily navigate the sections without being lost in under levels.

COLORCODE

The brand colors of Allspark are designed in consideration of the map design used for minimal approach.

PRIMARY - BLUE
#25A0D9

SECONDARY - GREEN
#5EB879

GROUND - GREY
#181C1F

allspark-db2-1

Landing Page

Landingpage contains various features. The card structure with all the required data and an overview of the audience data in the bottom. Easy access to build the audience card.

View