Digital Experience Manager to tailor user journeys for e-commerce
Vue.ai is an AI-powered experience management suite which combines the power of product, customer, and business intelligence using Computer Vision & NLP.
Product Overview
Digital Experience Management Hub (DXM Hub) is an AI platform that helps retailers optimize shopper journeys to achieve business goals while offering personalized and relevant content matched to every individual shopperʼs style preference across channels.
Roles and Responsibilities
Worked with a team of five designers in developing a comprehensive design system featuring over 60 design components, ensuring consistency and efficiency in design workflows.
Engaged with stakeholders to elicit requirements, facilitating effective collaboration throughout the wireframing, visual design, and prototyping phases.
Facilitated User Acceptance Testing (UAT) sessions to gather feedback and insights, resulting in enhancements to the user experience (UX) and overall product usability.
Coordinated the development process, ensuring seamless collaboration between the developers and designers for delivery of milestones.
My Role
Product Designer
Timeline
Jan - June 2022 (6 months)
Platform
Web Application
Tools
Figma
Miro
Zeplin
Confluence
Design Goal
The goal was to develop the Digital Experience Manager (DXM) as a minimum viable product, enabling e-commerce enterprises to personalize user journeys by adding relevant recommendations for various user segments. Additionally, the tool includes A/B testing functionality and an analytics dashboard, empowering businesses to derive deeper insights from their data.
Process
Since this was the product's initial release, it was intended to be launched as soon as possible in the market to migrate our existing customers to the new version. We followed the Agile methodology to bring out the product quickly. Each stage of the process moved along quickly and optimally, aiding in the growth of the final product. As stated here, the agile approach process.
Research
Stakeholder interviews
Interviewed stakeholders to gather the business needs and to look at the bigger picture of retail automation and how AI can help the customers funnel down to view personalized choices. Also to work on a product that is scalable over a period of time.
Heuristic Evaluation
Before looking at the competitors, we did an in-depth heuristic analysis on the existing app.vue.ai application to determine the glaring usability issues.
We found more than 24 glaring usability issues that were taken into consideration while building the new platform for the digital experience manager.
Competitor Analysis
We conducted a comparative analysis of other companies providing similar AI solutions, which provided me with a comprehensive understanding of the essential features and functional workflows of these applications. Additionally, reviews of these apps offered insights into the necessary features.
User Interviews
We conducted interviews with users of the current platform to gain insights into their frustrations and pain points, which we aimed to integrate into our new platform. We interviewed 6 users, 2 from each job role (Quality Analyst, Sales, Customers) who were the active users of the existing version.
Work Flow
A significant challenge in the workflow stemmed from the dispersion of services across various teams and products, making it challenging to coordinate the delivery process effectively. This fragmentation led to dependency issues and prolonged cycle times for each delivery. Thus, the Digital Experience Manager aimed to serve as a comprehensive platform, streamlining the process from customer data onboarding to personalized experience tailoring, conducting A/B testing, and extracting insights from these experiences, all within one integrated system. This would also help the cross-functional teams collaborate seamlessly.
Information Architecture
We organized a workshop involving key stakeholders to enhance the Information Architecture (IA) of the product, leveraging heuristic and competitor analysis. This involved:
- Defining the foundational components of the application.
- Constructing these components as discrete modules to enhance reusability. Enhanced reusability not only benefits user experience but also facilitates development and maintenance processes.
- Standardizing task flows and page layouts to minimize the learning curve, ensure consistency in user experience, and facilitate development and maintenance efforts.
This style guide now serves as a benchmark for other products within the organization.
Conceptualization and wireframing
After finding out the basic requirements of the user, the key features were identified and ideated. Sketching helped us as we followed an agile method to quickly get an idea of how the product is going to shape and give a rough idea of the concepts.
Style Guides
As the workflows were being established, efforts commenced on developing a style guide delineating fonts, colors, design elements, and interactions. When selecting colors, industry-agnostic options were prioritized. It was noted during stakeholder analysis that the existing product's colors leaned towards fashion (since majority of our customers were fashion brands), addressing a business requirement. This style guide has since become a reference point for other products across the organization.
Design System
We created a design system for each operating system, encompassing a defined set of visual elements such as color palettes, typography, and UI components. These components were uploaded onto Zeplin and seamlessly integrated throughout the application. This approach not only facilitated the design process but also enabled developers to efficiently reuse components, thereby enhancing code efficiency.
Note: Due to NDA I am unable to share any specific details of the design. If you have questions about my experience, feel free to drop an email.
User Testing
User testing served as the cornerstone of our process from the wireframing phase onward. We meticulously refined each flow through iterative improvements over several weeks, prioritizing the alleviation of user pain points. Test plans were meticulously crafted for each testing session, streamlining our overall testing process. Over the course of developing this product, we conducted over 30 user testing sessions, yielding valuable insights that informed our decisions.
Development
I coordinated with several engineers to ensure they had a proper understanding of the design system and flows. Additionally, I worked closely with the QA team to test the product, triage design bugs, and was responsible for ensuring their resolution before releases.
Reflections and Takeaways
Not everytime a designer gets a golden opportunity to design an end to end product with a large consumer base. I cherish this opportunity which helped me in improving myself as a product designer impacting thousands of people and business. Here are few key takeaways in the process.
Never fail to take up challenges
I always volunteered to try out complex flows that had several nuances. Alot of thinking goes into this process which really sharpend my design and product thinking ability
Cross-functional collaboration
Collaborating with different teams like QA, delivery, developers, Data Analysts, etc broadened my perspective and I really enjoyed working with them.
Accomplishing time bound goals
Since we followed Agile process for the quick launch of the MVP, I learnt how to manage my time efficiently to meet my goals and to work iteratively.
Explore more projects
Love my work?
Let's Connect!
Crafted by Maha with
love and lots of tea
