The Comparison model
Many of the current UIs had the right functionality, but with a misleading UI approach in terms of layout, structure, interaction, …
Redesigning the layouts to fit with the most common established patterns for search, filtering, privoding input etc. really helped users understand the screens and its interaction better than before.
Redesigning the layouts to fit with the most common established patterns for search, filtering, privoding input etc. really helped users understand the screens and its interaction better than before.
Back to standards and established patterns
Design - the solution
We like to expose the design to some stress before the development starts.
For this project we built a classic usability task test using Maze. We set up the tasks to complete with Maze (which uses the Invision project we built with the designs), and shared the link to stakeholders, customers, and other users within the considered roles and profiles.
For this project we built a classic usability task test using Maze. We set up the tasks to complete with Maze (which uses the Invision project we built with the designs), and shared the link to stakeholders, customers, and other users within the considered roles and profiles.
The Hot topics section
Results were quite good, but we needed some fine tuning for the navigation and action model (making some things more explicit than they were).
It’s a pity that microinteractions cannot be tested within Invision projects… can’t wait to build things with Studio to cover also this part :)
It’s a pity that microinteractions cannot be tested within Invision projects… can’t wait to build things with Studio to cover also this part :)
Let’s test it!
QuickFan is probably the first project we’ve sketched completely with Invision Freehand. Every functionality, every behavior, every interaction was sketched in Freehand prior to design.
We scheduled different workinsg sessions to address all of the functionalities and content areas within QuickFan. Everything was reviewed, redesigned (in Freeehand) and debated collaboratively in Freehand.
We scheduled different workinsg sessions to address all of the functionalities and content areas within QuickFan. Everything was reviewed, redesigned (in Freeehand) and debated collaboratively in Freehand.
QuickFan as a Full Sketch in Freehand
Building the concept
What a different navigation model? Let’s debate
Initial animation illustrating interaction and navigation
One of the things that made the experience complex was the navigation model. There were 6 defined workspaces (catalog, selection, comparison, projects, search and tools), and a tab panel inside each one of them. That was leading to confusiion, because things got open in a workspace or another depending on what they were and the workspace the user was in when opening it.
From a classical point of view, using windows instead of tabs and using a window manager would work better. Consistent, clean, and solves that confusion problem. So we built a sketch with Invision Freehand and shared visions with the stakeholders.
From a classical point of view, using windows instead of tabs and using a window manager would work better. Consistent, clean, and solves that confusion problem. So we built a sketch with Invision Freehand and shared visions with the stakeholders.
We even built a sample design to illustrate some of the navigations interactions.
But damn… the current system works really well in some situations. It’s quick, agile and lightweight when you’re navigating the catalog and need to check different fans (mostly like when you’re trying to buy something in Amazon and need to see the main caracteristics and compare).
So we arranged a Freehand co-designing session with Sodeca stakeholders, and found a new navigation model: a hybrid system that combined tabs and windows in certain situations, and that we felt would fit the different roles needs.
So we arranged a Freehand co-designing session with Sodeca stakeholders, and found a new navigation model: a hybrid system that combined tabs and windows in certain situations, and that we felt would fit the different roles needs.
The break off
There were 3 causes of people getting lost in the portal and not finding the content they’re looking for:
“We definetely need a better experience, but we need, at least, to keep the same productivity and performance levels we currently have”
The challenge
The session included Design Thinking, Innovation Games, and Manual thinking activities, like a Speedboat, Buy a feature, 4x4x4 and a “I like - I’d like to have - I don’t like” activity.
I like - I’d like to have - I don’t like
• Who is our target? In equal proportion?
• Get qualitative insights about positive and negative aspects
• Which are the main usage scenarios for each role/profile
• Reveal ideas about interaction and features that may apply
• Get qualitative insights about positive and negative aspects
• Which are the main usage scenarios for each role/profile
• Reveal ideas about interaction and features that may apply
A group design thinking session was set up to understand:
Research & insights
Sodeca is an industrial fans manufacturer. QuickFan is both a product catalogue and a software to build up ventilation projects, like ventilating a building, a kitchen, parkings, tunnels, and so on.
For the last 8 years the dev team and Sodeca stakeholders have been building funcionality over functionality as they needed. The overall product isn’t a mess (it works pretty well, though), but it lacks a consistent approach and user experience vision.
In the end, it’s its main selling asset.
For the last 8 years the dev team and Sodeca stakeholders have been building funcionality over functionality as they needed. The overall product isn’t a mess (it works pretty well, though), but it lacks a consistent approach and user experience vision.
In the end, it’s its main selling asset.
“We’ve always been thinking about adding functionality, but never really focused on the Quickfan user experience”.
The kickoff