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.
Our Persona Diane is a 45-55 years old Mother who works part time as a direct selling consultant in Dallas, TX.
To address our user's problem, I created a Style Guide and redesign deliverables for development.
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.
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.
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.
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.
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.
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.