Making Multibrain Web App Mobile Friendly

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Overview

Visual Design, Style Guide, Social Media App

Company
Multibrain
Client
Avon, TYRA Beauty
Date & Project Length
Role
UX Designer
Tools
Framework

Multibrain is a Social Media publisher app for the Direct Selling Industry. The app helps our users post and schedule content with the hopes of creating sales leads. According to google analytics, Over 50% of use is on Mobile. The mobile web app looked and functioned horribly. I was tasked with improving the experience by creating consistency in the visual design for our users.

Users

Our Persona Diane is a 45-55 years old Mother who works part time as a direct selling consultant in Dallas, TX. 

Action

To address our user's problem, I created a Style Guide and redesign deliverables for development.

Results

User satisfaction has increased dramatically and trial conversion rates now sit at about 30%, which is nearly double our trial conversions before Post Creator. Multibrain then adopted a mobile-first approach to design.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Discovery

Pain Points

After a heuristic review, I found 3 main pain points when viewing the web app on mobile:

1. There was no convention for padding, margin, or sizes of modules. This makes navigating the mobile app difficult.

2. Some flows had multiple steps on a single page. This makes for an intimidating experience for our user.

3. Some UI elements needed redesign for mobile.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Ideation

Style Guide and Mobile Redesign

To address the problem, I designed a Style Guide to aid Front-End Development and create consistency for our users—this included rules for type, buttons, and spacing of related items within our app. I then created low & hi-fidelity wireframes to show exactly how each page should looks and interacts for our users, as well as flowcharts to show user flow revisions.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Prototyping

Mobile User Flow Change For "Set Up Your Week" Posting Widget

3rd-Party Posting On Mobile

On Desktop, users choose their connections, uploads their content, and post/schedule on the same page.

Mobile follows the same flow, but each step is on a separate page. This was done to lower cognitive load for our user archetype Diane.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Testing

Multiple Uploads On Mobile

Uploading multiple images takes a Sidebar approach instead of the Tile View used on desktop. This is because:

1. Sidebar allows Diane to preview each image full sized.

2. It has simple side bar navigation for looking at each image.

HiFi Wireframes

Here are some key screen redesigns based on the style guide. Note the consistent button size, padding etc. By following these patterns, we lower the rate of user error and make the total UX more enjoyable and useful.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Final Product

Style Guide With Design Patterns