Case Study: Expert

Responsive Web Application Pairing Knowledge-Seekers with Industry Experts

Image alt tag

About the Project

Client

Careerfoundry

Goal

To create a responsive web application that connects knowledge-seekers with experts from diverse backgrounds and skillsets.

Functional Requirements

  • Login/Create Account

  • Home Screen

  • Video Call functionality

  • 2-way Chat

  • Onboarding Process/Preference Settings

  • Browse Experts

  • Content Library

  • Ask a Question feature

  • Functionality to download content for offline use

  • Payment Feature

Target Audience

The target age demographic for Expert will be ages 18-60. The mindset of our user is someone looking to advance them self in a new-found skill, hobby, trade, or career vocation. Secondary audience will be those seeking trustworthy information for a single-use application (ie: doctor, lawyer, university professor, etc.). All are seeking trustworthy information from a confirmed source, and would benefit from a consolidation of information streams into one reliable source.

Risks & Opportunities

The primary risk will be in Expert being viewed as too much of a generalist platform; that performs moderately well in the knowledge-based market, but too general to be exceptional. This is why it is crucial to vet all Experts and their credentials, as well as information provided to knowledge-seekers as being 100% authentic and accurate. In doing so, we will zero in on an opportunity to consolidate multiple streams of information from a variety of backgrounds into one reliable source for users. By monetizing our video call feature, we will attract experts who currently offer services pro bono across a multitude of free e-learning platforms currently on the market.

My Role

Researcher, UX/UI Designer

Tools

Adobe XD, InVision, Photoshop, UsabilityHub, Optimal Sort, Mockflow, Pen & Sketchbook

Understanding the Problem

Experts and knowledge-seekers need a space to share and receive authenticated expert guidance on a wide range of topics. We will know this to be true when users signup and complete preference settings to be matched with other users that fit their respective needs.

The Solution

A well-structured platform that connects knowledge-seekers with qualified experts from diverse areas of expertise through live chat messaging and video call capabilities.

Expert

Design Thinking Process

The Design Process is rarely a straight line, like a train headed in one direction. It's a process of continual discovery, adjusting course, improvements, learning, and growing the product in a cyclical fashion as it moves toward being one that best serves its users' needs.

I apply this process to each of my designs.

Understand & Empathize
Expert

Competitive Analysis

It's crucial to understand early on the landscape into which a product will enter, and what opportunities can be harnessed by observing both the successes and failures of those who have come before us. I wanted to focus on both a dominant e-learning platform currently on the market, as well as a platform that trades in casual services provided by industry experts from a wide range of skillsets.

I conducted a SWOT profile and marketing profile on both fiverr and Udemy, with the goal of understanding their respective key objectives, target market, marketing strategies, overall strategy, and marketing advantage. I then conducted a competitive UX analysis on each platform to assess each's strengths and weaknesses in terms of usability, layout, navigation, compatibility, and differentiation.

Guiding Questions:

How is each platform successful/unsuccessful, in terms of functionality?

What can I learn about our own product as a disruptor in this market?

What is each platform lacking in terms of functionality?

What will be our differentiator that sets us apart from other products in the online e-learning landscape?

Competitive Analysis Results

Expert

Fiverr

Target Market

Fiverr targets individuals who work in various business functions at companies of different sizes across many industries: the kind of 'Office Heroes' who just get things done — within their deadline and budget constraints. The majority of new 'buyers' are acquired through non-paid organic sources.

Overall Strategy

Fiverr provides a platform that caters to two primary user groups; those searching for a service, and those searching for consumers to purchase their service. The platform provides the ability for these user groups to connect, with the consumer paying on a sliding scale for services rendered. Fiverr retains 20% of all payments made to the service provider.

Marketing Advantage

This platform definitely enjoys a high level of credibility in the market, being the first to really offer a space for this kind of service exchange. In doing so, Fiverr also boasts a breadth of service providers from a range of backgrounds and skill levels/prices. Additionally, both the desktop and mobile app are very intuitive, with a low learning curve for use, and there is no sign-up fee for users of either group.

Expert

Udemy

Target Market

While Udemy does partner with universities, non-profit organizations and even governments, Udemy's target audience is young adult learners looking to learn a new hobby or re-skill themselves for career change. Udemy doesn't focus a specific country or any particular demographics, as less than 50% of their students are from the US. Also as far as student language, there are no restrictions - you can get courses in almost any language. (Italian, Spanish, Arabic, romanian, etc.)

Overall Strategy

Udemy also provides a platform that caters to two primary user groups; those searching for a tutorial, and those searching for consumers to purchase their video tutorials. The overall approach is one of trust and authenticity - providing content from verified industry experts at a price point much lower than other channels of learning.

Marketing Advantage

The overall ease-of-use for students is a major selling point. A user simply signs up, selects a tutorial, and begins learning. Additionally, the impressive breadth of learning topics attracts new users from virtually any background; any person is a potential new user. There are no sign-up fees, no monthly fees, and courses are generally priced well below that of any in-person learning.

User Interviews

Research Goals

  • To understand how potential users currently go about accessing new information on a specific topic.

  • To determine users’ opinions (frustrations/joys/pain points/desires) on current knowledge-based platforms that will help inform the design of Expert.

  • To understand the context in which Expert will be used.

  • To determine what features are of most interest for potential users in using a knowledge-seeking platform.

Methodology

1 on 1 interviews via Skype

Participants

5 participants of varying education levels, professional backgrounds, and technical proficiencies

Define

Personas

Based on the results of my interview sessions, I chose to centre the next stage of research around 3 primary personas that would guide the next phases of design choices. As context-of-use would certainly be a consideration, taking into account the differences in needs for our various intended users is vital. My research had identified the need to make design choices to satisfy the needs of both knowledge-seekers, as well as experts, as a primary focus...and the next challenge.

Expert

Expert

Expert

Ideate

User Journeys

Once operating personas were established, mapping out their journeys through the platform's experience would allow me to better understand their mental models and illuminate potential pain points and frustrations that I would then be able to remove. This is the stage wherein our intended users are given voice. While their personas informed me of their needs and desires, their user journeys informed exactly how to use that information in order to make their experience through the platform as optimal as possible.

Expert

Expert

Prototype

Sketches

Breaking out the sketchbook and getting early iterations out on paper is a fantastic way to work through problems and find solutions. It's low-stakes in terms of time and materials, and can bear fruit in many ways by allowing me to try things, fail, start over, and rapidly move toward viable solutions to problems. Below you will find a low-fidelity sketch of the initial Expert View Home Screen (left), Student View Home Screen (centre), and Expert View Calendar Availability Screen (right).

Mid-Fidelity Prototypes

Once I had fleshed out 5 user task flows in low-fidelity wireframes (Create Account, Play Saved Video in Library, Ask a Question, Book a Video Call with an Expert, and Adjust Expert Calendar Availability), I was closer to providing solutions to my users' needs and goals. However, all of these solutions would need to be validated through user testing to ensure that they were most suited to serve the user's needs. I moved on to creating mid-fidelity protoytpes of these user flows in Adobe XD, emphasizing the intended placement of elements throughout, while keeping the orientation of the user in mind at all times.

Test

User Testing

Goals

My goal was to assess Expert’s ease of use for participants who were engaging with the platform for the first time. I aimed to understand participants’ value perception of the platform, the primary function that it serves, as well as the level of ease with which users are able to perform a predetermined series of tasks.

Test Objectives

  • Determine ease of use to complete tasks: Sign-Up, Ask A Question, Play Saved Video in Library, Book a Call with an Expert, and Adjust Expert Calendar Availability.

  • Observe and record participant’s verbal and physical cues to better understand areas of gratification, and areas of frustration 

  • Determine if participants perceive a high level of value in the use of the platform

Methodology

All testing sessions were moderated remotely via Skype and recorded over Quicktime for further analysis.

Participants

6 participants were engaged for this study, each representing characteristics of our intended audience (age, location, professional background, technical proficiency, education).

User Testing Results

Overall, the usability tests conducted for Expert provided valuable insight into opportunities for revisions, while reinforcing some of the initial design choices. Participants were able to navigate the platform with minimal friction and complete many of the direct tasks to successful completion. However, the tests illuminated distinct pain points in the user experience that would need to be addressed before moving on to my next iteration. While some feedback centred on low-severity issues (largely cosmetic, and would be revised though more UI-focused alterations, others were more highly severe.

Affinity Map

Affinity Map

Usability Errors

Expert
Expert
Refine
Expert

UI Design Overview

Expert's Visual Identity: An Iterative Process

Foundational principles of Gestalt psychology and its laws of grouping; proximity, similarity, closure, and good continuation were strictly adhered to during the platform's progression through the high-fidelity prototype stage. Coupled with incorporating the principles of unity, proportion, hierarchy, balance, and emphasis, a total renovation of Expert's visual composition was underway.

Expert

Colour Palette

I selected an analogous colour palette derived from a central base blue hue (60% colour distribution), and a rich violet hue (30%). Analogous colour schemes are often found in nature, and are harmonious while creating serene and comfortable designs, and providing a strong sense of visual cohesion.

However, with the relative harmony associated with an analogous colour palette, comes the danger of the design appearing flat and dull. In order to offset this, I added an accent hue of cool cyan to contrast the scheme (10% colour distribution). Grey tones were then added with the focus on reducing visual overload for the user in the area of contrast, this meant more subdued choices that paired well with the dominant colour scheme.

Expert

Typography

My choice in typography for Expert aims at reflecting a warm, inviting feel - while maintaining a sense of tonal authority. I used standard iOS native fonts including SF Pro and New York for page headers, and solely SF Pro in varied weights for body text, smaller headers, and links.

Language / Tone of Voice

Expert uses a less formal language throughout the platform, leveraging more casual verbal cues for headers, body text, notifications, and CTAs, while still conveying a high level of professionalism in our content to ensure a sense of reliability and trust. Our goal is to facilitate the transfer of knowledge from A to B, and do so in a warm, concise, straight-forward manner, while allowing expert knowledge content to take centre stage

High-Fidelity Prototype

Results

What I've learned

  • Watch what users do, not just what they say. During Expert's usability testing phase, participants would often praise aspects of the design and, at times, report no frustrations with usability. However, navigational errors in task flows, facial expressions, and body language indicated otherwise. Once probed further, additional valuable insights were gained that helped make the experience more adept at serving user needs.

  • Focus on functionality first. When conceptualizing what a product will look like in its finished phases, it's difficult to resist the impulse to introduce visual design aspects early on. Although, through doing so, we risk the possibility of detracting from optimizing the user experience in terms of functionality and usability, as both designer and test participants become absorbed by the aspects concerning look and feel. Early phases of the design process are best served by centring focus on how our research has guided us to determine the placement of objects, and the pathways through the platform that they serve to bring the user to their needs and goals. Look and feel are crucial to the success of a product, but are to be addressed once the foundations are in place.

  • Always follow the research. Developing a product is an iterative process of brainstorming, testing, refining, designing, and then revisiting each step as we learn new information about what we've developed. It can be easy to fall into the trap of subjectivity when looking at what we've made, and this is where the user research will save us. Keeping our intended audience in the forefront of our minds through every step of the design process allows us to maintain objectivity, and to be an advocate for our users and their needs. User research is the light on a dark road.

Further Iterations

  • Further development of the Ask Anything feature (what does the Chat screen look like on both sides?)

  • Develop the Wishlist feature

  • Further develop the process of sending and receiving materials between experts and students (do these get automatically indexed into pre-determined folders? If so, is this predetermined in user preference settings?)

  • Develop Goals feature

  • Implement more advanced on-screen animations

  • Collaborate with universities and trade schools to source verified experts

  • Develop expert verification process

Further User Testing

Having conducted extensive user testing on the functionality of Expert, next steps for user testing will be centred around the visual design of the interface. Do these colour choices illicit the desired reactions from our intended audience? Does the tone of the copy reflect a sense of trust and transparency? Does the representation of our experts instil confidence in the authenticity of their responses, and potential interactions with students? From there, we will move back to functionality. What features are currently absent? Which need to be revised or omitted? How can we better develop Expert into the foremost platform for interactive online learning?

Please experience the current Expert prototype: