FlowGuide - Onboarding made Easy

At Mudlify, we created FlowGuide, a SaaS platform that makes onboarding easy and engaging. FlowGuide replaces old, static training materials and documents with mobile-friendly, visually appealing interactive content.

Working with my business partner and developer, we used market research and user feedback to fully design and develop the portal that’s intuitive and accessible for everyone. The portal is currently being used by some small businesses.

My Role

Product Owner

UI/UX Design

Project Management

Journey Mapping

Wireframing

Agency

Mudlify

Status

✅  Completed

2024

Timeline

8 months

Problem Statements

Company owners spend too much time generating documents for onboarding and training new staff during the onboarding process. This is impacting overall efficiency leading to lower productivity and financial loss. 

New staff feel overloaded by the volume of fragmented information, presented in an uninspiring way, during the onboarding process. They miss important details, feel unmotivated and are more likely to leave. 

The Solution

Our solution is an online portal that enables company owners to create and customise interactive, well-organised onboarding guides. It presents essential information in a clear, engaging format, making it easy for new and existing staff to access independently.

User Stories

Firstly, xxx, market research, reaching out to network. 

Using these insights, I developed personas and user stories to understand the relationship between different user types and the proposed platform. These steps guided the design of low fidelity flows and wireframes.

User Flows - Frontend Guides

Firsty, a login system. Based on the learnings from the user stories and the research flows of system (login, admin, user).

Wireframing - Frontend Guides

Wireframe guides

User Flow - Exploring Guides

The guides are made up of individual buttons within a flow/mind map. Stroybook, exploration. Each modal is customisable.

Wireframing - Exploring Guides

Modals wireframes

Cross Platform

Front end, we found a lot of employees will be using it on the go. Whilst I took a mobile first approach when designing the interface, it was important that the UI worked seamlessly across all screen sizes.

User Flow - Admin

I mapped out the UX flow  for the admin

Wireframing - Admin

Wireframed dashboard

User Flow - Adding a User

I mapped out the UX flow  for adding a user

Wireframe - Guide Creation

I mapped out the UX flow  to create a guide

User Flow - Data

I mapped out the UX flow  for data

Wireframing - Data

Wireframed dashboard

Thoughts & Learnings

What did I learn through this project?

Intuitive

Let’s connect

Get in touch for opportunities or just to say hi! 👋