Expert - Tutoring App
UX | UI Design Case Study
iOS Application
Project Overview
Expert is a tutoring and professional networking service that enables designers and design software users to access and chat with software experts and professional designers in fields such as Graphic Design, UX/UI Design, and Concept Design for technical assistance, expert analysis, and critique, as well as providing a space to connect with peers and other professionals to share work and information.
My role:
I was tasked with developing a user experience for a mobile application designated for designers who need quick solutions to design and software issues by providing an immediate or scheduled approach to connect and directly speak with experts in a variety of design fields.
I am sole designer and user experience researcher of the Expert application.
Hypothesis and validation:
We believe, that by creating a mobile application that connets designers of varying skill levels to specified design field experts and a peer networking outlet, we can achieve success in helping designers accomplish immediate goals and larger personal or professional achievements.
The application will be successful upon connecting users to experts in chosen design fields, retaining and building a customer-base through managing our professional catalogue and peer networking and evaluation features.
Tools:
Pen and paper, Balsamiq, Adobe XD, Illustrator, Photoshop, Procreate
User Research
Research goals:
1. Potential usage and additional needs to be met by app
- High-use software/programs
- Preferred methods of communication
- Filtering results/expectations
- Field of work or study
2. User attitudes toward sub-based help application
- Familiarity with alternative tutoring/help sites
- Use of online course sites
- Reliability on current network
- Previous/parallel user experiences
3. Gauging frequency of need among probable users
- User goals
- Frequency of lack of knowledge on assigned task
- Regularity in seeking help from outside source
- Typical solutions facing software issues
4. Unrealized competition/interference with app engagement
- Unrealized user actions
- Previous/parallel user experiences
- User expectations
- Outreach and engagement
User interviews:
Subsequent to comprehensive competitor analysis, I conducted a survey and series of user interviews with professional and student designers across varying design fields and skill levels, according to the stated research goals, accumulated as follows:
- Identify users' attitudes toward a subscription-based targeted help application
- Determine user familiarity and opinions of competing sites and applications
- Gauge frequency of need for design or software support
- Identify the consistency or frequency of potential use of the application
- Identify additional needs that could be met by the application
- Assess current design community inter-engagement
Affinity mapping:
According to the information obtained in the user interview phase, I assembled an affinity map in order to better organize the given information.
Discoveries and insights:
I categorized the accumulated findings obtained via user interviews and surveys in an effort to filter out potential solutions.
Findings
1. I research using Google because it's convenient
2. I share on social media because I enjoy building community
3. Revues help me make decisions
4. I seek a professional with a specified expertise
5. I need more critical guidance
6. I like options in how I communicate
7. As a student, I always have questions
8. I seek inspiration from those with vast knowledge in a specific field
Insights
1. Convenience is crucial in providing information with so many solutions available
2. Users enjoy building a social network or following
3. Revues help the user find the best fit
4. Filtering expertise helps create solid matches
5. Users want to share their progress or issue
6. Options are valued in creating comfortable or more available space
7. It is a student's purpose to seek knowledge
8. Expertise is highly valued
Solutions
1. The platform needs simple, accessible navigation and quick response
2. Include social feature for members
3. Include reviews and ratings in expert search function
4. Filtering should have extensive options
5. Create a screen-sharing feature for users and experts to share information
6. Chat features include various options for communicating and sharing
7. Target students, learners and designers new to job or program
8. Vet valuable experts with proven applied knowledge in specific design fields
Understanding the User
Audience definition:
Identifying the core audience of the application suggested difficulty considering the broad array of expertise necessary within the application. However, finding a centered approach aided in the effort of reaching and appealing to a desired user group. According to user research and interviews, I was able to translate necessary functionality to user stories and determine who the user may be.
User personas:
User journey maps:
At this point I've begun the process of translating functional requirements to user stories. These stories are visualized as user journey maps, taking us through necessary phases of the specified scenario and laying out the actions that will bring the user through this campaign.
User flows:
We're now officially starting to build out sections of the sitemap in the form of user flows, following the process of a single designated path a user will take to successfully fulfill an appointed task. After a few iterations, I'm feeling pleased to present the user with the happiest possible pathway to success criteria.
Wireframing and Prototyping
Card sorting:
In order to get a clearer account of potential user optimal word/page groupings and phrasing expectations, I asked several participants to sort the following cards into groups according to association and intuition.
Some of the confusion in card pairings seems to stem from the lack of specified wording of the function itself. 'Profile' could apply to the user profile or the expert biography. Noting this disparity in conclusive groupings, I've updated some of the language in the revised sitemap.
Generally, many of the parent/child groupings will remain intact with some alterations to sorting and link-sharing. The most prominent such change is that I've linked appointments between the 'Expert Finder' tool and 'User Profile,' allowing easier access to scheduling, re-booking, rescheduling, and cancelation features.
The other noticeable change is the addition of the 'General' header. Though I exempted this header from the initial sitemap, I included some of the underlying vocabulary in the card sorting exercise, where participants generally grouped these features together.
Sitemap:
At this point, I'm able to build the sitemap according to user stories and charts revealing categorical clusters established by card sorting, essentially compiling and integrating every established task flow into one cohesive chart. Once the sitemap is established, I'll be able to move into wireframes and begin to establish the look and feel of the application.
Mobile prototype:
At long last, it's time to press into the user interface design of the application. After sketching analogue designs, I moved production into Adobe XD to build the mid-fidelity prototype.
The primary function of the app is to connect users with experts, so I aim to place this function at the forefront of the design production, dedicating a simple list feature with extensive filter options for optimal search functionality. The other primary function I began designing is the necessary onboarding signup/login flow.
Create User Account: mid-fidelity prototype
Chat with Expert: mid-fidelity prototype
Usability Testing
It's now time to gain insights from our prospective users via usability testing. This will help to shore up any functionality or user flow issues prior to advancing design iterations.
Goal:
The goal of this study is to assess the learnability for new users interacting with the Expert application for the first time on mobile. I wanted to observe and measure if users understood the app, its value, and how to complete basic initial functions such as signup and searching for and navigating to a desired expert match.
Test objectives:
I've first selected four primary navigation and recognition objectives to be interpreted by test participants.
- Determine if participants understand what the app is about quickly and easily (i.e., an application for seeking assistance from design professionals in specified fields of expertise) and the value it provides
- Observe how users navigate and select a desired expert match from the homepage - can they successfully find what they're looking for?
- Determine if users can navigate onboarding and create a new user account
- Determine if users can navigate upgrading a free user account to a paid monthly membership
Methodology:
The study was moderated remotely via Zoom video chat and shared Adobe XD prototype link. The test included a short briefing and task performance monitored via screen sharing.
Participants:
The study was conducted using 6 participants recruited through my personal network. Demographics of participants varied, with the common trait of each being a current professional or student in a design-related field.
Metrics:
Errors were measured using Jakob Nielsen's scale:
- 0 = I don't agree that this is a usability problem at all
- 1 = Cosmetic problem only: need not be fixed unless extra time is available on project
- 2 = Minor usability problem: fixing this should be given low priority
- 3 = Major usability problem: important to fix and should be given high priority
- 4 = Usability catastrophe: imperative to fix before product can be released
Learnability: Task completion ranked as S (success), F (failure), P (partial success).
Efficiency: Measured by time on task.
Satisfaction: Measured by follow-up questions consecutive to each task
Usability test report:
Once testing concluded, I organized relevant errors, observations, and participant quotes in a chart, noting total error and observation counts for each notation across all participants. In addition to severity of the issue, this allowed me to prioritize possible solutions and next steps. See reported issues translated from chart:
Issue 1: Arrangement and sorting of options in profile page are disorganized and misleading (high severity)
Suggested Change: Reorganize material, focusing on placing 'payment' and 'account type' selections in a more intuitive location under 'settings.'
Evidence: Multiple participants attempted entering 'settings' and 'payment' for the task of finding 'account type.' Page is clustered with too many like options.
Issue 2: The arrangement of Expert/Questions/Blog tabs confused participants while using the search function (high severity)
Suggested Change: Present these options in an alternate fashion, leading to less confusion, and presenting the user with actual Question/Blog options.
Evidence: Some participants were under the impression that 'questions' tab was related to finding an expert, not thinking of it as a question search function.
Issue 3: There is some confusion in the selection of 'chat now' and 'schedule chat for later' (high severity)
Suggested Change: Use clear language and button presentation to avoid stressful errors.
Evidence: Hesitance in the selection process by participants, leading me to believe this has not been clearly communicated.
Issue 4: The incomplete pop-up filter modal is causing confusion (medium severity)
Suggested Change: Complete the prototype pop-up modal to avoid further confusion, as this will present a vital function of the final product.
Evidence: Users would select the filter button, only to be confused by the lack of a button to complete the filtering process.
Issue 5: Arrangement of primary bottom-strip icons is non-intuitive (medium severity)
Suggested Change: Rearrange and reevaluate primary function icons available to the user on most pages.
Evidence: Vocal participants made clear the arrangement of icons did not make intuitive sense according to previous experience.
Iterative Updates
Changes were gradually made to the mobile prototype according to repeated user testing and analysis. Once I reached a point of satisfaction with the functionality and intuitive nature of the application, I proceeded in escalating prototype fidelity.
User signup:
Updates made thus far in the user signup screen have been primarily superficial. The original design is much like the current, but with the removal of text boxes and changes to button text, shape, and color.
A back button has replaced the sign in option, taking the user back to onboarding where they'll have the option between sign in and signup.
The 'Let's get started' text gives the user an idea of the friendly tone of the application. At one point I contemplated using a phone number for signup, the idea being swiftly dispatched by comparison analysis. Small tweaks have been made since.
Expert listing:
The expert listing itself has maintained mostly the same setup from the first iteration, as it has tested well throughout the process.
The advanced filter button has remained in the upper right, while the back to search option has been present through most iterations, with the exception of one, in which the settings tab has replaced it. This was deemed redundant and the search option was brought back, primarily serving as a backtracking function in this instance.
The primary alteration is the absence of the 'Experts,' 'Questions,' and 'Blog' tabs at the top of the page, present in the first two iterations. The 'Questions' and 'Blog' features can now be accessed only through the Home screen.
Expert profile:
The original sketch and digital iterations of the user profile placed all pertinent expert information on a single page. This proved to be long and felt clustered.
The user now has the ability to switch between 'experience(bio),' 'availability,' and 'reviews.' This leaves the user feeling less overwhelmed with the abundance of information, however necessary. 'Rating' and 'rates' remain listed under each option, as well as name and specialization on the profile image tab, being the most critical material.
The scheduling button(CTA) remains in a fixed position as the user scrolls, maintaining a high level of visibility(originally only posted at the head of the bio scroll).
Responsive Frameworks
Sketches:
Early in the iteration process I initiated construction of desktop frameworks built up from the mobile-first approach.
The 'Expert List' page will immediately follow a search query placed on the search page. This page will, in reality, have multiple agendas. The searched term will apply to the list of experts currently displayed(default). The user will also have the option of searching the blog or archive using the presently searched subject by selecting the appropriate category displayed at the top of the page.
The desktop version boasts a larger display with advanced filters displayed directly on the page to the left of the catalog. The mobile advanced filter modal overlay link can be found at the icon in the top right.
High-fidelity mockup:
Design Language Systems
Color:
Expert uses three primary colors throughout the application, with available variants. Typographic colors lie within primary color palette.
Alternate typography and action colors are available for fill text and additional button and icon variation.
Typography:
Headers and titles primarily use Quicksand font, as it's clean, friendly, soft, modern, and easily legible, suiting the soft, modern formatting and app elements.
Quicksand is complimented by Proxima Nova, a recognizable, clean, graphic font easily legible in small and expansive text.
Iconography:
Expert iconography feels light and friendly, primarily using outline with light line weight and an illustrated look.
UI elements:
Elements are to feel soft, modern, and clean, promoting ease-of-use and navigation.
Language and tone:
Expert exhibits an amiable atmosphere, designed with introducing users to experts(and users of similar interest) in mind. Expert's tone is modest, yet straightforward when necessary in avoiding any potential confusion in language or function.
Most headings and taglines are chatty and helpful, while some taglines may take a more direct approach, contingent upon the subject matter and essential clarity.
As a designer, I want the user to feel at ease with the application, and, in-turn the expert they'll be working with, taking a less formal approach.
Any peripheral posting and blogging hosted by the app should be fun and engaging, maintaining a "friendly" quality and feeling of open and earnest communication.
Users and experts are encouraged to build their own profile and use appropriate chosen nicknames to enhance the sense of community.
Final Iterations
