In crafting MobiSupport, I collaborated closely with a dedicated team comprising a Product Owner and three full-stack developers. From ideation to rollout, I took on the role of sole designer, driving the project forward at every stage. My responsibilities spanned initial research and brainstorming, through wireframing and prototyping, web design system to conducting user testing sessions alongside the Product Owner. The enthusiastic response from future users affirmed the success of our collaborative approach and the design solutions we implemented.
Unveiling MobiSupport: Where It All Began
When we kicked off the MobiSupport project, our team embarked on a journey to revolutionize customer support for mobility services. Through two dynamic internal workshops, we delved deep into understanding the fundamental jobs-to-be-done, pains, and gains associated with future support tools. Leveraging the Value Proposition Canvas, our collaborative efforts resulted in the identification and prioritization of key user needs, paving the way for a transformative design process.
Discoveries Unveiled
In our exploration, we uncovered essential user needs, encapsulated in concise jobs-to-be-done such as providing urgent support, resolving payment issues, and ensuring GDPR compliance. These insights were complemented by an insightful catalog of user pains and anticipated gains, ranging from interface frustrations to the quest for seamless integration. Through meticulous analysis, we pinpointed pain relievers and gain creators, shaping our approach to alleviating user frustrations and delivering meaningful benefits.
Navigating the merger: Exploring Moovel's support tool
The next step involved delving into the workings of the legacy Moovel customer service tool. This examination followed the merger of Moovel and Mobimeo in November 2020, where the integration of differing business models became paramount. By examining the architecture and functionality of Moovel's support tool, we gained valuable insights into features and user experience. Identifying strengths, shortcomings, and entity attributes laid the groundwork for informed decision-making in MobiSupport's development.
Exploring possibilities: Research & discovery
Setting the stage: Mind Mapping
My design journey began with an initial mind map, a vital tool for visualizing relationships between entities and defining key attributes and actions. It served as a critical foundation for crafting the first information architecture (IA) of MobiSupport. This foundational step allowed us to define relationships between entities and establish key attributes and actions.
View the entire Mind Map here.
Initial IA: Establishing clarity and connectivity
Creating the first draft of the information architecture (IA) was essential for organizing MobiSupport's content logically and effectively. This step aimed to classify content clearly and arrange it based on the relationships between main elements. The resulting high-level IA provided a foundation for team discussions, setting the stage for collaborative refinement and ensuring a user-friendly design approach.
Crafting low-fidelity wireframes
The creation of low-fidelity wireframes served as a pivotal step in visualizing the structure and flow of MobiSupport's key screens. Utilizing a pen and paper approach, these wireframes outlined the foundational structure of four crucial screens: the homepage, user management, user profile, and bookings. Following the completion of these wireframes, I facilitated a brainstorming session with the team to gather their feedback and ideas.
Click here to zoom into the Homepage wireframe.
Click here to zoom into the User Profile wireframe.
Collaborative momentum: Team workshop on Mind Map, IA, and first drafts
I organised a team workshop aimed at garnering feedback on the mind map, information architecture (IA), and initial drafts. Encouraging open dialogue, I invited team members to share their perspectives, highlighting what they appreciated (likes), suggesting potential improvements (ideas), pinpointing obstacles (challenges), and posing queries (questions). This collaborative session fostered a dynamic exchange of ideas, driving the refinement process forward and ensuring alignment with our collective vision.
“Building amazing products is like cooking a gourmet meal - it takes a diverse team of chefs, each adding their own special ingredient to the mix.”
In parallel: Crafting foundations and components
Our next step was to swiftly craft the first designs to facilitate prototyping and usability testing. To do so, I needed to build the foundations and component libraries to enable the creation of screens in parallel
Honeycomb 🍯: Establishing foundation & crafting a web design system
During this phase, I spearheaded the establishment of design foundations within Sketch defining the color palette, typography, and overall style, drawing upon Mobimeo's existing style guide and mobile design system. Utilizing the Tailwind CSS library, we accelerated our design and development processes, ensuring consistency and efficiency. As part of this endeavor, I took the lead on the design side in constructing Honeycomb, a robust web design system tailored to our project's needs. This comprehensive system not only facilitated the creation of MobiSupport but also served as a cornerstone for subsequent web applications.
Seamless collaboration: Streamlining design-development dynamics for Honeycomb
To ensure alignment with developers and facilitate the tracking and comparison of design and code statuses, I developed a comprehensive spreadsheet. This spreadsheet cataloged all components slated for development, delineating their respective statuses for design (including their presence in Sketch libraries, documentation, and associated links) and implementation (comprising their completion status in code, documentation within Storybook, current status, and any relevant comments).
From concept to interaction: Initial designs, prototyping, & usability testing
Iterative design and user insights: Refining MobiSupport's interface
Following initial research, wireframing, and team feedback, I transitioned into the design phase, crafting first drafts for the homepage, user page, and bookings overview. Subsequently, I solicited feedback from the team, iterating on the designs based on their insights.
Concurrently, we conducted interviews with prospective users to discern their primary needs and pain points, discovering key frustrations such as slow tools and difficult flows. From these insights, we honed in on the importance of an intuitive interface, self-explanatory flows, and quick feedback mechanisms. Guided by these findings, we convened a DEP session to prioritize features for the initial iteration. For instance, we adjusted our vision for the homepage, opting for a leaner design focused on a search bar and easy access to FAQs and technical support—a reflection of user-centric design principles and practical feasibility considerations.
Creating an interactive prototype - ProtoPie
After finalizing the initial designs, I brought them to life by crafting an interactive prototype using ProtoPie. This dynamic prototype served as the centerpiece for our internal usability testing sessions. You can check the prototype here.
Preparing for usability testing: Methodical setup and execution
In preparation for moderated usability testing sessions, we conducted internal sessions focused on completing three specific tasks. The primary objective was to identify major usability issues before proceeding to external testing phases. This involved setting up moderated prototype testing interviews using Userlytics, a process led by myself and the product owner. To ensure a smooth testing process, several steps were taken in advance:
- Design & Flow: Main screen designs and user flow diagrams were meticulously crafted in Miro to establish the foundation for testing.
- Gathering Questions: Specific questions were curated for each screen, forming the basis of our testing session plan. Input from other team members enriched this process with diverse perspectives.
- Scoping Document: A collaborative effort with the product owner produced a scoping document, detailing business objectives, research questions, and testing objectives to guide our approach.
- Prototype Preparation: With questions compiled and flow established, I developed a dynamic prototype using ProtoPie, ensuring an interactive experience for testing.
- Session Plan: A comprehensive session plan was crafted, outlining all research questions for the interview process and providing clear, step-by-step guidance for seamless execution.
- Userlytics Setup: Transitioning to Userlytics, I organized the testing session and included the prototype link. A dry run was conducted to ensure readiness for the actual sessions.
Analysing results
To analyze the results, we established a structured approach using a Miro board. Interview questions were listed, and responses from each tester were recorded on sticky notes, each assigned a specific color for clarity. Subsequently, we clustered these responses to facilitate analysis, identifying common themes and insights to derive likes, challenges (or confusions), and ideas for improvement. This methodical process enabled us to systematically dissect the feedback and glean actionable insights for enhancing the user experience.
Usability testing unlocked valuable discoveries
After completing internal usability testing, and analysing the results, we compiled a list of enhancements, identifying key features. Additionally, we curated a roadmap, prioritizing features predcited for future iterations, aligning our development efforts with strategic goals.
Below, I will outline two instances where we implemented changes based on insights from the internal usability testing sessions:
Adjustments to navigation: Following feedback indicating confusion with certain icons in the navigation bar, we opted to replace them for better clarity. Additionally, we introduced informative captions that would appear when users hovered over each navigation bar item, providing a clear indication of the respective page.
Refinements to Homepage cards: In response to user confusion regarding the purpose of certain cards on the homepage, initially intended as links to FAQs, we revised their design. To mitigate ambiguity, we added a prominent title "Browse our FAQs" above the cards, ensuring users understood their intended function and minimizing potential misinterpretation.
Time for the external usability testing
After conducting internal usability sessions and implementing changes based on their outcomes, it was time to move forward with external usability testing. As part of this phase, adjustments were made to the prototype to reflect the new changes derived from internal sessions. The primary goal was to scrutinize the new design for potential usability issues before launching it to customers, ensuring its suitability for handling common customer service cases. Eight participants were recruited for the external testing, comprising customer service, sales, and HR professionals residing in Germany and proficient in English. These participants regularly utilize web tools and software in their roles, providing valuable insights into the usability of the prototype.
Key Findings
- Testers unanimously praised the aesthetic appeal and user-friendly nature of the tools.
- No significant usability issues were identified, indicating readiness for tool launch. 🎉
- While bookings and invoices pages are deemed suitable for MVP release, discussions regarding harmonization are advised for mid-term planning.
- Suggestions include enhancing the refund form to prioritize essential input and implementing minor design and copy adjustments to the homepage before its launch.
MobiSupport goes live!
Launching in June 2022 alongside the introduction of the 9 Euro ticket in the Mobility Stuttgart app, users can seamlessly purchase tickets and access the ioki-powered on-demand shuttle service. Meanwhile, customer service agents are onboarded and prepared to address user inquiries and concerns.
More about the tool release on Mobimeo's blog.
What did the users say?
“Ich bin sehr dankbar fuer das Tool. Es kommt in schickem, modernem Design daher und vieles funktioniert intuitiv. Besonders gut gefaellt mir die Suchfunktion, um Nutzer:innen zu finden und die FAQs. Sie sind sowohl aus Nutzer:innen- als auch aus Sachbearbeiter:innen-Sicht verstaendlich und strukturiert aufgebaut. Sehr praktisch finde ich die schnelle Kontaktmoeglichkeit zum technischen Support und die kontinuierliche Weiterentwicklung. Das ist echt hundertmal besser als unser vorheriges Tool und verkuerzt die Wege. Damit bleibt mehr Zeit fuer die Nutzer:innen und andere Taetigkeiten.”
