Ash Middleton's profile

Expert: Responsive Web Application

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.
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


Interview Results
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.



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.
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.
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.
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.
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.
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
Please grab a bowl of popcorn and enjoy a video demo of Expert!
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:
Expert: Responsive Web Application
Published:

Expert: Responsive Web Application

Published: