After integrating BugReplay and ToyBox, "Miruni" emerged as a platform that merges two products to facilitate team collaboration through annotations, screenshots, and video bug reporting. I led the design of the browser extension, from information architecture to visual design, and collaborated closely with the Founders, Product Design Director and Content Designer to ensure concept alignment.
Beta launched in June 2023.
Year
2022
Timeline
7 weeks
My Role
Product Designer
My Deliverables
• User flow • Wireframes • High fidelity mockups • UI design • Prototypes • Initial design system
Outcome
In a short span of just 7 weeks, I prioritized the core experiences of the product, delivering designs and prototypes for both the browser extension and the web app.
This not only aided in fundraising but also paved the way for the beta launch in June 2023. Additionally, I delivered the foundational design system which led the Miruni designers and engineers to continue building products.
Approach
When I came on board, the Product Design Director and the Content Designer had already identified three customer types from user research, which gave me a clear perspective on our target users.
I drew upon the card sorting conducted by our UX research team, which provided insights into what existing users valued most and what they desired. This helped me discern which features to retain and introduce. Two primary categories emerged: "Capture feedback" and "Manage feedback." Within this framework, some features presented new opportunities, while others were beloved existing functions. In a short timeframe, I prioritized and advanced the design around these elements.
During the creation of core flow diagrams, I noticed potential complexities in the user journey. To address this, I developed prototypes for each user flow. This approach streamlined discussions with the founders and facilitated design decisions.
The challenge: How could we design an experience that meet different user type needs?
1: Base layer
I settled on a two-panel design after careful consideration, ensuring easy accessibility for all users without unnecessary extra taps. This layout remains effective even on smaller viewports.
2: Capture feedback
Merging two products presented a myriad of feedback capture methods: comments, screen recording, live face video, screenshots, and HTML/CSS elements. To make this process more intuitive, I devised specific flows for each method. After consultations with fellow designers and the founders, I opted for a capture method-centric approach. It offers a clear understanding of how Miruni operates and the results it produces. Each icon signifies a particular outcome, like comments or video inspection. Hovering over these icons reveals a tooltip, guiding users on the next steps.
3: Story
We labeled each feedback from users as a 'Story'. Given the amalgamation of two products, these stories were dense with information. My challenge was to organize this data effectively. To enhance user interaction with Stories and prompt more straightforward actions, I categorized the content based on user types and their distinct requirements.
Browser extension and web app synchronization
While designing the browser extension, I worked in tandem with the Product Design Director on the web app. Together, we spotted inconsistencies in data structure, particularly in filtering and sorting. Following discussions, the Content Designer took the helm to standardize the data and terminology. This synchronization of the search, filtering, and sorting across both platforms culminated in a unified design, which we presented to the founders.
Receiving feedback from a founder, I refined the approach. A notable suggestion was allowing multi-selection for the "Story Type", acknowledging the diverse customer needs of an organization. In response, I enhanced the filtering UI, introducing checkboxes for versatile selections and designing for future scalability.
Fast-paced delivery
The project's primary focus was on fundraising, which meant we didn't have the bandwidth to conduct usability testing within our set timeline.
If I remained on the project, I would have been...
Building out the full web application
Conducting QA with engineers
Conducting usability testing and iteration
