Moropo

Project Category
Web Design
Project Release Date
July 2023
Project Role(s)
Product Design
Interaction Design
Accessibility Design

Overview

Context

Moropo is on a mission to create an easier, more straightforward app testing process for app development teams. I am currently engaged as Moropo's principal product designer, hired based on the strength of my performance at their sister company Morrow. As Product Designer, I was responsible for the end-to-end design process, from gathering user experience insights, to building interaction-focused prototypes, to continuously improving and refining the end-product.

Research

I was first engaged to work on design for the Moropo product while it was a sub-project of my previous employers, Morrow Digital. From the outset, I created a comprehensive Design System working from the branding outlines provided by Morrow's CEO, Tom Riglar, and got to work on gathering data.

Since the work was conducted under an NDA, my research process was more focused on direct engagement with similar platforms in order to create comprehensive competitor research and hone in on key features of a successful app testing platform.

From analysis of competitors such as Waldo, Browserstack and AppliTest, I was able to hone in on commonalities between their UI and anticipate pain points. I found that the typical testing UX was not unlike the script of an app test in itself, with happy and unhappy paths and clear signposting of the various functions of the service utilising colour and iconography.

Utilising "SimpleMind", a mind-map tool, I mapped out the most basic user flows for the MVP design, guided by insights from my colleagues and my research. This helped me to visualise my research data, as well as providing the value proposition: what would the user get from Moropo that would prove more useful than either using a competitor service or simply having their app tests performed manually?

(For full user flow, see image gallery below.)

In collaboration with the Product Manager and the Dev team, further features were mapped out in an early release schedule. To prevent "bottlenecking" of the designs, the process utilised an Agile methodology, with successive phases - R1, R2, and so on - scheduled via ClickUp tickets.

Design

During the research process under Morrow, I set about creating mid-fidelity wireframes based on my insights from the first round of iteration, allowing me better opportunity to map out the essential functions of the platform and begin to provide a framework for the dev team.

An example screen from the early mid-fidelity wireframes

When Moropo was formed into its own independent company in 2022, I further refined the wireframes and proceeded to translate my designs into a simplistic high-fidelity prototype using our pre-defined style guide.

An early R2 prototype screen, improving on the above mid-fidelity wireframe.

The earliest versions of the product were designated "R1" and "R2"; from "R3" onwards, the design process involved mapping out new features, refining the existing UI based on test feedback, and exploring new avenues for innovation.

For example, where earlier versions of the Product had envisioned the user uploading a "Recorder" app to their phone which would overlay their in-development app, allowing them to record the Baseline experience to match against the Test Result. As this proved too complicated, the process was refined and a new idea was created in which the user would upload their app and create tests within a virtual machine, either writing them via code...

The 'Scripts' approach of Moropo Test writing

...inputting as "Test Steps" with colour-coding used to demonstrate the different types of input (Selectors, Options, and Arguments).

Following the successful rollout of the R4 designs, our focus shifted to improving the functionality of already-built features and adding integrations from external processes such as Expo and GitHub.

This also involved giving the user the ability to write tests using Maestro Studio, allowing them to tap on elements of the app's display in the virtual machine to write 'Steps'.

Result: Launch and Refinement

Following the completion of R7, a full restructured rebrand of Moropo was announced to create a more minimalist, streamlined experience for early adopters. This involved refining the colour palette from 40 colours down to a slimmer palette encompassing only 11 distinctive shades, as well as defining a tighter ruleset for variance within shapes and sizing.

This relaunch also provided me with an incentive to further refine the design system and component library, as well as finding new ways to save time and effort within the user flows - such as placing the functionality of key pages into sidebars and overlays, summoning them only when necessary.

While meticulously updating the prototypes to these design guidelines, I made sure to continuously perform accessibility audits, making sure that the lighter shades of grey and darker greens, as well as an updated font family, would still show up to users as readable and intuitive when interacting with the interface.

I defined and designed innovative UX/UI solutions to address customer and business needs, collaborating with product management, engineering, and prospective users to deliver a top-tier quality experience. By tackling dev requirements and building key functionality within the project structure, I was able to make Moropo's interface the best it can be.

"This is awesome - the UI is a thing of beauty, it really is. Well done to you and the team!"

-
Moropo Client

Retrospective

The work I performed with Moropo has been eye-opening and exhaustive. As a Product Designer, I was able to build on and improve my aptitude with design tools such as Figma, work to successive deadlines, and explore an iterative, feature-based design process. The challenge of rebranding following launch gave me ample opportunity to explore the potential of both the component library and design system.

In an ideal world, I would have liked more time and resources to focus on preliminary research, as well as some opportunity for early user testing. Due to the nature of the project, however, and my own limitations as the organisation's sole designer, I am satisfied to have done the best I could within budget and release schedule, and I am glad to have taken aboard valuable lessons for future projects.

While work continues on updating Moropo, making it as user-focused as possible and saving time and headaches for app developers, the service is always improving. Check the gallery below to see the latest improvements to the UI, or click here to visit Moropo's homepage.

Gallery

(Tap on the images for a better look.)

Work with me

Ready to make something beautiful? Get in touch and let's see how we can work together.