Mail Me

Background

Other social media management tools like Hootsuite and Buffer are renowned for their scheduling features, but leave novice users without simple evaluation tools and don't have any similarity to the platforms that users are already familiar with.
‍
Through this personal project, I aim to explore a solution for a mobile SMM application that offers small business owners a simpler and more enjoyable and engaging way to grow their businesses with one product.

Problem Statement

Small business owners often don't have the time or expertise to manage several social media platforms effectively. They need a simpler and more integrated way to engage with their customers and grow their reach on social by themselves.

Business Goals

  • Create a product that can promote user engagement with a fun and simple interface.
  • A freemium app that can connect a small amount of social media networks, with more slots being made available with a subscription.
  • Incorporate advertising space on the home feed for users with the free version of the app.

Product Goals

  • Create a product that helps users grow their businesses by simplifying social media marketing.
  • Provide a comprehensive interface with the ability to create new social media posts and access to simple and relevant analytics features.
  • Maintain social cognition with a focus on user values and like privacy and flexibility.

The Problem Space

The hypothesis

Using secondary-research and information obtained from subject matter experts, assumptions were made to start brainstorming about the users and problem space.

  • Users tend to use more that 3 social media networks for their businesses.
  • The large majority of users engage with their social media networks on desktop and mobile devices equally for work.
  • Users are not familiar with analytics or aren't very skilled at using analytics software for their business's social media accounts.

Let's evaluate

I conducted semistructured user interviews with 5 small business owners to validate my hypotheses, learn how they promote their business, and about their experience using social media for their professional needs.

Learning Goals:

Remote ResearchIn-person interview

Finding 02

Participants mainly use smart phones to post content on social media.

"It's more convenient since I take photos and videos with my smartphone."

Finding 03

Participants already understood the value of using analytics, but only had a basic understanding of how to use it.

"It can be a bit overwhelming to decode the metrics."

Say hello to Johanna!

UX Persona Design

Next, I synthesised the data that I collected using a persona.
‍
Users were found to be dynamic and self driven but aren't focused on creating a rigid professional environment. Therefore, leveraging affordances from popular social media platforms could appeal to users.

The Design Space

UI and UX profiling

Using sliders, I framed key UI and UX parameters to facilitate a user-centred perspective and inform decisions.

Brainstorming

Then, I created a storyboard for a scenario and some rough sketches to explore design solutions and explore how UI elements might be structured.

Storyboarding UI UX design
Sketching UI UX design

Service blueprint

Pulse service blueprint

I used a service blueprint for a new user's journey from signing up to creating their first post on Facebook. To support situated action models, I decided to include the environmental factors to understand the activity in more detail.

Prototyping

Early-stage

With a deeper understanding of the users and the task, I started creating wireframes to create the IA and UI elements.
I then used the prototypes to do moderated user testing with 3 participants to evaluate usability and learn about the task.

Click on the image to see more.

Low-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: WireframeLow-Fidelity prototype: Wireframe

A/B Testing

During the quantitative evaluations I compared two UI navigation patterns.
A FAB was considered to keep the settings menu on the toolbar. But, it was found that it obscured the content and didn't offer significant value over using a nested layout in the user's view.

Therefore I concluded that using a nested layout will be more effective. And to support discoverability, I will add an animated popup to draw attention and guide the users.

UI design variations
Low-Fidelity prototype: WireframeEdge Case UI UX design

Edge case

After the user testing, I learned that I was over-representing users who already had a professional social media account.
‍
Therefore, I needed to design for an edge case to help users navigate the interface more easily without any social networks connected.

The Visual Language

After exploring the layout and user experience of the interface, I created a design system to ensure that the visual language supports the goals and research findings.
‍
Responsive design was a crucial requirement for Pulse to ensure that a wide variety of user-generated content can be displayed on any device.

UI Design System
UI Design System
UI Design System
UI Design System
UI Design System
UI Design System

The clickable prototype

Finally, I created a high-fidelity clickable prototype on Figma using a component based design philosophy.

Scenario: You are a returning user that needs to check your notifications and create a new Facebook post. Evaluate your social media accounts to learn what your followers are thinking.

Here is a detailed path that you can follow through the through Figma presentation on your desktop:

  1. Wait on Splash Screen (Press “R” to restart if needed).
  2. Log In or Sign Up using Google. Add an Instagram account when Signing Up.
  3. Open the Profile and Settings under the avatar and scroll through.
  4. Open the Notifications in the top right corner and clear the notification.
    Then, return to the home screen.
  5. Create a new post for a matched Facebook account.
    Click to add a social network and the body.
    Follow the instructions to confirm the post.
  6. View the Analytics for the two connected social networks.

Final thoughts

I believe this product is ideal for an Agile development approach and can benefit from launching soon to leverage user feedback and data generated by live prototyping.
‍
But, there are important factors to consider when creating social software. User values like privacy and security have to be prioritised early in the development process with special consideration given the inherited 'political' potential for misuse to be addressed with the aim of giving both direct and indirect a positive experience.