Magnet

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.

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.

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.

Project Goals

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

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.

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

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.

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.

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

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.