Product design project
Expert.
Expert is a web app that allows creatives to chat with an expert in their field. Amateur or professional creatives can speak with experts for mentorship and advice.
Expert’s goal is to give artists, designers, illustrators and videographers a simple way to connect with an expert in their creative field.
Project type
Career Foundry course project
My role
User Research, UX Design, UI Design.
Tools
Adobe XD
Duration
Completed outside of work hours from Feb - Sept 2020
The process
The design process for this project was borken down into 6 sections:
-
The research section included a competitor analysis, user surveys and user interviews. I wanted to understand the problem and learn about the users.
-
Using my research, I defined the problem, create user stories, user personas and user journeys to confirm who the user is and how I can best solve their problem.
-
I then created user flows and used information architecture to create sitemaps.
-
After analysing the data, I created pen and paper wireframes before moving on to higher quality designs in Adobe XD. I also created prototypes ready for testing.
-
I ran usability and preference testing sessions with numerous participants. This phase also involved analysing and reporting on the resulting data.
-
With the data from the user testing, I started iterated on the designs I had created and tested.
The problem
Users need a way to communicate with experts in a wide range of professional fields because they want specific questions answered.
I’ll know this to be true when I see users using Expert to communicate with professional creatives to help them solve specific problems.
The solution
I believe that creating Expert will allow users to discover and communicate with experts to help solve their creative problems.
Users can contact experts via message or video calls. Expert will encourage collaboration amongst a community of like-minded individuals.
1. Research
Competitor analysis
User interviews
Competitor analysis
I completed a SWOT analysis of Just Answer and Clarity. In highlighting In the strengths, weaknesses, opportunities and threats of competitors I could better understand how to approach the problem.
Existing websites all hosted experts from a specialism, mostly business or medicine. There isn’t a site that specialises in creative or artistic advice. Where these sites were particularly successful was in their speed of response.
Competitive analysis provided inspiration for my own product but also highlighted elements I wanted to avoid and improve upon.
User interviews
Research Goals:
Discover the problems creatives find when they’re working
Understand how our users seek out advice
Learn about our user’s experience using similar products
Discover how users feel about communicating online
Conclusions:
The participants need professional advice and it isn’t always readily available
All participants would look within their workplace (or university) for advice
YouTube and Instagram are close competitors - we can take inspiration from these platforms
Video calling is preferred but offering a variety is key
Social engagement enhances enjoyment of creative subjects
Viewing an expert’s work would create trust
2. Define
User personas
User journeys
User personas
With the data generated during the research phase, I created two user personas that encapsulated my target audience. I referred back to the two personas throughout the project to ensure I was solving the right problems.
One of the user personas used in the project
User journeys
Once I had a solid idea of who my user was, I investigated their path to and throughout the app.
Why would they be using the app?
How would they be feeling?
What do they want?
A user journey for the primary personas
3. Ideate
User task flows
Information architecture & sitemap
User task flow
I created user flows that showed how a user would move from an entry point to success criteria.
I wanted to iron out the easiest route for a user to complete a task.
One of the user flows created for the project
Information architecture & sitemap
I then created a comprehensive sitemap, covering all of the features that were highlighted during competitor research and user interviews.
I created an initial version, set up and ran a short online survey, then adapted the sitemaps based on the results. The second iteration is included below.
A sitemap for Expert
4. Wireframes & prototypes
Low fidelity wireframes
I took all of the information, data and ideas and started sketching some wireframes. I used paper and pencil to make on-the-go alterations.
A selection of low fidelity wireframes
Mid fidelity wireframes
I then started refining my design. At this mid fidelity stage, it was easy to change the design and make iterations.
I limited myself to grey scale to focus solely on the layout and design – colour and images would come later.
A selection of mid fidelity wireframes
High fidelity wireframes
I then developed the design further with pixel perfect alignment, images (still in greyscale at this point) and copy. This fidelity was also developed into a prototype.
The development from low to high fidelity
5. Usability testing
I prepared for the testing sessions by writing a test plan and script. I then completed multiple remote usability tests.
I wanted to discover how easy it was for my participants to navigate the prototype and complete tasks. I observed 6 participants as they completed the tasks and took note of any errors, points of friction, frustrations or confusion. I then rated the errors using Jacob Nielsen’s error severity chart.
Here are some of the main errors and what I did to fix the problem.
Issue 1: ‘I can’t find the Answers section’
Evidence:
All 6 participants took a long time to find the Answers section
2 participants said they would expect to see the Answers section on the homepage
The name of the section, Answers, was a cause for confusion
Solutions:
Change the section name, from Answers to Community.
Include a section on the homepage that introduces the Community section
Additional banner included on the homepage
Issue 2: ‘I’d be worried about pressing the phone button’
Evidence:
3 participants mentioned that they thought the phone icon would automatically call the expert
2 participants mentioned that this made them feel uncomfortable
Solutions:
Added text to the button to show the user will request a call
Add detail into the how-it-works section on the homepage to explain users will book a time with the expert. The usability tests showed that users spend some time reading the how-it-works section
6. Design iterations
Design principles
I then applied some well known design principles to finalise the design. I also added colour.
Design language system
I also developed a language system for hand off of my project which included design elements and rules for tone of voice and accessibility.
Design language system
