Magnet

End-to-end MVP app
matching users to experts

Overview

Magnet is an app where users can ask a question and be matched with an expert who is available to provide an answer. My role is UX research and design. I am collaborating on Magnet with a software developer who came up with the idea for the app. This project is in progress.

Tools

  • Figma

  • Miro

Team

  • 1 product designer: Emily Heiden

  • 1 software developer

My Role

  • User research

  • UX/UI design

  • Prototyping

Timeline

  • 80 hours

  • 4 weeks

  • In Progress

Problem

Current apps that are for asking questions allow anyone to answer the question, so there is no way for a user to know if the people answering their questions are giving the correct information. Additionally, the user who asks a question must wait until someone sees their question and responds to it, so there is no guaranteed timeframe in which their question will be answered.

Solution

I will design a mobile app that allows users to ask a question and be matched with an expert who will answer their question in a timely manner.

Research

Competitive Analysis

To begin my research, I analyzed 6 websites where users can seek answers to questions. I noted the strengths and weaknesses of these websites primarily based on usability, usefulness, and functionality. I referenced this information as I began designing the layout of the Magnet app.

User Interviews

I interviewed 3 participants following the competitive analysis to gain an understanding of what the target user is looking for in seeking answers to questions online. This information helped me to empathize with the user and to imagine what features the user would need and want in the app.

User Persona

After the user interviews, I created one persona in order to continue empathizing with the user and understanding who would be using the app and what they will need.

Magnet

Empathy Map

After creating the user persona, I created an empathy map to organize the information in a helpful way to continue to empathize with the user before starting the design process.

Magnet

Project Goals

Next, I created a simple Venn diagram of the project goals as a visual tool to guide design decisions going forward.

Magnet

User Journey

Next, I created a user flow and a task flow to map out which pages I needed for an MVP. For this iteration, I created this app from the perspective of the user asking the questions only.

Magnet

Task Flow

Magnet

User Flow

Design

Sketches

I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goal, and the heuristic

Magnet

Mid-Fi Wireframes

Using Figma, I translated my sketches into mid-fidelity wireframes. I iterated on these twice before moving on to creating the high-fidelity wireframes.

High-fidelity Wireframes

Finally, I designed the high-fidelity wireframes using the mid-fidelity wireframes as a guide. I tested the first version of the high-fidelity wireframes as mentioned below, and then made changes based on that feedback. The wireframes pictured here are the second iteration.

Magnet
Magnet

Test

Usability Testing

I created a high-fidelity prototype on Figma and recruited 3 users to test the design. The participants clicked through the prototype while commenting on the design and giving suggestions.

Affinity Map

After completing usability testing with my three participants, I created an affinity map to organize the feedback before I made changes to the design. I categorized the feedback into four categories: successes, pain points, suggestions, and questions.

Magnet

Iterate

User Feedback Changes

  • Added a welcome page

  • Simplified the Ask page

  • Separated the Ask page from the advanced search page

  • Added upvote/downvote, comment, save, and share icons on the homepage published conversations

  • Adjusted the font sizes and weight to create more hierarchy and consistency

  • Increase whitespace throughout

  • Improved brand cohesion and visual design

Magnet

Final

Magnet

Next Steps

Since this project is still in progress, I will be working closely with my team member to continue to add features, test the app, and iterate on it. Next, I will add the pay pages and the pages from the expert's side of the app.

Learnings

Every project teaches me something new, and this one was no different. I learned the importance of iterating on my designs and gathering feedback from others. I felt like this project taught me that less really is more most of the time when it comes to creating products that are truly useful for the user. I will continue to work on this project, and I know I will learn more as the project progresses. I understand that no project is ever actually complete because there will always be new features to add, and improvements to make to the current design. It reminds me of pretty much every painting I have ever painted because those are never actually complete either.

Thank you for reading my case study!

If you would like to connect, please reach out on LinkedIn.