Modeler Redesign
Designing experiences for naive users by redesigning a web based data orchestration tool.
My Role
Timeline
Output
I was responsible for brainstorming, research, ideation, information architecture, user flows, visual design, interaction design and prototype.
2 weeks
Interaction Design
The Overview
Enterprise tools are really complex and can seem really bland and too formal where it undercuts the experience of using it and creates a stereotype. Although when it comes to enterprise tools, form always follows function but that does not mean you strip away everything else to bare necessities. The Modeler under SAP Data hub is predominantly a feature driven tool. We needed to humanise the tool so that interacting with it creates delight.
What is Modeler?
The SAP Data Hub Modeler tool is based on the SAP Pipeline Engine that uses a flow - based programming paradigm to create data processing pipelines (graphs). Big Data applications require advanced data ingestion and transformation capabilities.
"In simple words"
The Modeler is essentially a manager at your restaurant. The modeler would help create pipelines or a flow of work that would help manage your tasks just the way a manager would manage the staff and tasks.
Old version of the Modeler
The Ask
All SAP Data hub applications were soon going to undergo "Fiori 3" (SAP design language) implementation. I was asked to design a concept for the Modeler, the flagship product of SAP Data hub. I was asked to simplify the navigation and create a more engaging experience for users aimed specially at new users.
Presenting : The all New Modeler
After a lot of discussions with the stakeholders, we finally came up with this version of the redesign. Here I wanted to focus more on the discovery and exploration aspect of the tool and introduce an onboarding experience for the naive users. I also focused on learning and mastering the tool where humans using this tool could experiment and explore the tool by treating it as their playground.
Look before you Leap
Change the way you interact with the Modeler. Gone are the days where you jump right into business. Introducing a welcome page which simplifies navigation into the Modeler. This does not hinder your workflow in any manner as all essential actions are still visible as before the welcome page.
The welcome page lets you choose from resuming your work to exploring the Modeler's potential. It also acts like a buffer before you jump into the application.
The idea is to encourage users to work with templates to help speed their pipeline process. This also streamlines entry points into the application, reducing the cognative load for naive users
Create New
1
Users can use existing files or import ones from their system. Since a buffer page was introduced, it should not limit or restrict existing users from performing tasks they would have done otherwise.
Open
2
Resume
3
Work faster and do more with Data hub Modeler. Discover the new experience and see how the Modeler can help you. Find wide range of tutorials to help you work smarter, not harder.
Learn
4
Tasks or items which other people have frequently used
Popular
Introduces the tool to the user and highlights tips and features
Guided Tour
Aimed to tackle basic tasks to help user get familiarised with the tool
Getting Started
Aimed to tackle advanced tasks to help user get familiarised with the tool
Tutorial
Pick up from where you left off. Introducing a cleaner - simpler version of the Modeler while follows Fiori 3 design guidelines. With creating graphs being a primary action, an emphasised button draws you attention to it.
Modeler with Operator panel
Graph panel
Graph
How did we get here?
Drawing from my experience as an industrial designer, in order to redesign a product, one need to understand the product. I had to understand the following things in before I undertook the design decisions.
What is the purpose behind the tool?
What does it allow the user to do?
WHAT
(HOVER)
How does the tool work? What all does it allow me to do? what are its capabilities?
HOW
(HOVER)
Why is there a need for a redesign? What are the pain points?
WHY
(HOVER)
I got to explore and play around with the tool to better understand how it works. As a naive user I was overwhelmed by the sheer number of actions and buttons on the landing page. If I had not received a crash course on the topic, I would have not been able to understand what it does. Apart from that there were also other issues regarding the usability from prior user testing. We also needed to align with Fiori 3 guidelines
Pain points
Looking into prior user tests which were conducted by the team, there were a few which were prominent and hence we prioritised.
-
New users found it difficult to start using this tool because the tool was too complex.
-
Choosing between Graphs and Operators was confusing because they looked the same. When a user creates a new Graph, the tool automatically switches to the Operators tab. Now Graphs and Operators have the same visual cue which confuses the user.
-
Documentation was not of much help because it only informed the users on the specific graphs and operators and not the tool itself.
Given the pain points at hand, I wanted to prioritise the why aspect, then the how and then the what following Simon Sinek's Golden Circle. This helped me steer away from a feature first approach and more towards the humans first.
WHY
We wanted to create a user friendly experience and try to reduce the learning curve of the tool.
HOW
By helping users discover and explore the Modeler's potential. We also wanted to provide strong visual cues which would help users distinguish between the elements.
WHAT
With the help of tutorials and guided tours, we could lessen the complexity of the tool.
Ideation
Early thoughts and questions
Using Matrix to identify common actions across different tabs
Understanding structure
Concept sketches
Prototype
Conclusion
This was one of the first major projects I got to work on. I also had to present this to the entire team including our Vice President of the team. I had a great time bouncing ideas off of my peers and fellow team members. It also gave me confidence to present my work in front of a crowd. I learnt the importance of prototyping as it helped me tremendously whilst showcasing the concept. The fluidity of the design really helped me sell the idea to the team. Although this particular concept did not make the development cycle due to time constraints and technical difficulties, I have satisfied that we were able to deconstruct the idea and borrow doable chunks from it.
Take Aways
ASK QUESTIONS
Ask loads of questions like you're a child. We often assume that when given a brief, everything else has been thought through and all you need to do is design. That is kind of irresponsible as a designer because turns out we are in the same boat. Nobody exactly knows what is expected and which is why asking the right questions help you create a path towards the requirements.
SELL YOUR IDEA
Treat your team mates like clients. After all, they are the stakeholders that you have to convince. Just the way you would sell your ideas to a client is how you would have to persuade your team. You may have taken the right steps as a designer but ultimately it is the stakeholders that take the final call. If they aren't convinced, your concepts may never see the light of day.
