Onboarding web page for ML360
Role: Lead Product Designer
Team: 1 designer, 1 researcher, 3 product owners, 2 PMs, 1 engineering team, business stakeholders
Duration: 12 months
Tools: Figma, Zeplin, Confluence, Jira
Sberbank Ai
This project represents the grounding framework of the ML360 Platfrom, a multi-year, multi-teams effort at Sberbank Data Science teams to streamline software design and development efforts. I was responsible for visual design on aspects of software for internal processes, industrial applications, and B2B comms.
Challenge
Data Scientist and Analysts want an easy way store and organize Bank data information and details of the models they use, but currently struggle with:
1/ Accessing models information quickly without searching other tools
2/ Easily creating new models
3/ Sorting and filtering models based on criteria
Solution
ML360 interface would help users easily organize their models inside the internal web-portal by allowing users to:
1/ Filtering, sorting and adding new models
2/ Add new models based on business plans and link them with other part of the portal
3/ Export filtered and sorted connections to a Microsoft Excel spreadsheet
My role & contributions
Over the year of my participation, I worked on this concept project as the sole researcher and designer:
1/ I conducted user interviews regarding networking and connections management and organization.
2/ I used these findings to create a primary persona and user flows.
3/ With these insights in mind, I sketched designs, translated them to digital wireframes, and created high fidelity mockups.
4/ I validated my designs throughout the process through informal interviews with industry professionals.
Research
I conducted user interviews to identify pain points when using web-portal to network. I created a primary persona and user flows to inform my design decisions moving forward.
User interviews & persona
Over the year of my participation, I would often talk with data-scientist about pain points, needs, and goals. These findings helped me define a primary user for this feature and develop a persona.
Primary pain points
Based on the interviews, users had some common pain points when it came to networking and using web-portal:
1/ Lack of description about the service usefulness. Cannot quickly find models and
2/ Lack of hierarchy. Zero transparency of actions to get results. Doesn't have connections with other part of the portal.
3/ Lack of organization and sorting of models. Hard to search and create new, share existing, edit and view the data.
User flows
These flows focus on the decisions Mike might need to make when accomplishing two tasks within web-portal.
1/ The first flow (blue) involves Mike organizing and managing his connections.
2/ The second flow (green) focuses on his adding and editing customized details about his connections.
Process overview
Discover
Gathered business, technical, and user requirements through stakeholder meetings to develop a strategy for designs moving forward.
Define
Brainstormed and ideated with managers and engineers to define tasks, user flows, and information architecture for the web-portal by leveraging research findings and business requirements.
Brainstormed and ideated with managers and engineers to define tasks, user flows, and information architecture for the web-portal by leveraging research findings and business requirements.
Design
Created low-fidelity wireframes and translated them into interactive, high-fidelity prototypes to communicate task flows, interaction patterns, UI component behaviors, and edge case handling.
Created low-fidelity wireframes and translated them into interactive, high-fidelity prototypes to communicate task flows, interaction patterns, UI component behaviors, and edge case handling.
Deliver
Led design efforts for a legacy deal management tool to integrate new business crucial features and create new UI patterns and UI elements to replace existing ones.
Led design efforts for a legacy deal management tool to integrate new business crucial features and create new UI patterns and UI elements to replace existing ones.
Collaboration & Communication
Collaborated with 2 data-science and 1 analytic teams working on presenting results to the customers and stakeholders on quartely demos during 2 years.
Contributed to and supported design when needed — logotypes, icons, illustrations, diagrams, data visualisation, dashboards, product pages on Confluence, presentations, html email newsletters.
Collaborated with 2 data-science and 1 analytic teams working on presenting results to the customers and stakeholders on quartely demos during 2 years.
Contributed to and supported design when needed — logotypes, icons, illustrations, diagrams, data visualisation, dashboards, product pages on Confluence, presentations, html email newsletters.
Wireframe flow
Key takeaways
Next steps
Short-term
1/ Create new features for the web-portal using billing and payments for selling models
Long-term
1/ Continue exploring data science aspects as a solution. Find new way for visualizing complex data.
Reflection
My team was great at communicating and doing whatever it took to get things done. As design manager, I felt as though I successfully planned and managed to produce valuable insight for our client. Even though we were very unsure of our focus in the beginning of the project, I think we were able to adapt and complete a successful project through effective communication and collaboration.
Working with clients can be challenging. They often know they want to implement UX design into their product but they aren’t exactly sure what that entails or how to go about doing it. So communicating the value of user-centered research and design is absolutely crucial to get stakeholder buy-in and support.