Who're the Users
The Persona
Gil Tamari • 34 years old • IT guy
Technical orientation: Pro
Smart Business
B2B SaaS Dashboard
A tool for managing faults and presenting the status at each stage.
Its purpose is to inform about the connection of multiple products in real-time, serves as a data funnel from other dashboards, and allows to open service call to solve the disconnections very fast.
The main challenge
The main challenge was to integrate all the scattered data in other interfaces and show how they fit together on one dashboard.
The interface should display a wealth of data that is quickly scanned by the user, designing data in a way that allows you to receive faults with real-time alerts and allows you to resolve faults with a minimum of actions.
The solution
One interface that serves as a data funnel for a variety of products,
allows a quick scan of the status of the fault condition. After a fault alert, the user can open a fault call for technical treatment, then track every step from the moment a fault opens until the problem is solved.
My role & team
My role was as a product designer with an awesome team and collaborators:
2 business product managers
1 UX architect and researcher
2 developers
1 marketing
Started with...
Problem #1
Multiple dashboards
“The user have some dashboards for each product, each one of them has a lot of data that need to be scanned and analyzed, this whole process takes a lot of time and we actually realize the damage late”.
Problem #2
Notified late
“The products combine a variety of interfaces, some new and some outdated, most of which have no alerts and we are assisted by staff who warn of malfunctions”.
Problem #3
Tracking status
“We have another tool where we keep track of call handling or malfunction”.
This is what it looks like
After a long time of researches, inspirations, design process, code, qa & testing
How it's made
responsive Layout
Bootstrap System Grid 4.0
When I was asked to design a responsive SaaS product, it was important to use an existing and proven method without trying to reinvent the wheel. Bootstrap was the perfect solution to put the design on it's layout which gave the developers and me a smooth process, especially while working on breaking points.
pixel perfect
The 8 grid system
To make a precise division in the screens, for all the components and elements this method is simply ingenious and I apply it to all the products I work on
Brand colors & Conventions
Color Pallete
One of the challenges in building refraction and infographics is matching colors that are supposed to work together in harmony, that there will be no flicker in the eye when combined and become part of the brand DNA and be conventional.
next to the branding
Typograpgy
Made especially for bezeq’s new brand book
Actions
Botton System
Buttons inspired by Material Design when I was looking for solutions for filtering results, searching, and transitions in different states.
Transitions
Motion by Material Design
It is not possible without motion, because motion is life and when there is correct transition in the interfaces it contributes levels to the user to understand the interface. I really liked that I have a neat place from which I can take references and send them a code ready for development
Quick scan
Icons
I started designing them with Illustrator but after realizing that Sketch also does an amazing job with icons, to my delight all the graphic elements were built in one interface.
Versions & files Management
Design process and Improvements
When I design wireframes or components, after 3-7 versions at least, I know that I did my best and I have some versions to select the one that fits best.
The design process always has changes, after collecting data from the PM, the clients and marketing.
(The name of the product changed after it launched).
trade-offs with dev
Devs, do your magic and make it alive please 🙂
In my opinion, this is the critical step where all teams must collaborate to ensure the product's usability, user experience, and business vision. From the first brainstorming to the final product, the developers were an integral part of crafting the product.
The design system
