SKILLZ

SaaS platform redesign to increase usability, stem decreasing LTV & MRR, plus establish brand identity

Design Impact

28%

+ Lifetime Value

30%

+ Recurring Revenue

60%

- Time on Task

Project Overview

CHALLENGE

Revamping a vast online curriculum platform with thousands of pages, our goal was to create familiarity, alleviate pain points, and boost customer lifetime value (LTV) and monthly recurring revenue (MRR) through strategic design choices.

solution

Our objective was to deliver a redesign that seamlessly incorporated an on-brand design system, ensuring a user journey that struck a balance between familiarity and efficiency, expediting users to their destinations with greater ease and satisfaction.

role

UX/UI Designer, Project Manager

time

3 Months

Task

Platform Redesign

tools

Figma, Figjam, Google Suite, Slack, Zoom

My Design Process

Click to expand

  • We conducted user interviews, surveys, and analyzed in-app analytics to understand the pain points and user needs. We also studied competitor apps and industry trends to gather insights.

  • Using the data gathered, I identified the key struggles and developed strategic solutions that allowed users and the business to succeed!

  • Working from sketches, to lofi, to mid-fidelity wireframes and ending with a prototype; I began to craft a clear path for success while maintaining stakeholder alignment.

  • I tested multiple high traffic tasks and journey flows & successfully validated some aspects of the design while uncovering ways to optimize for ease of use.

  • The last step was to implement the learnings, recieve stakeholder alignment on the prototype, then annotate & hand-off for development. (Followed by QA)

Choose my view

Designer Recruiter

Empathize

Research

I first started by gathering important KPI data points such as content views, page views, heat maps, downloads, and engagement etc. to begin to inform the questions we would ask during our user interviews and find out what is frustrating users plus what we can do better!

Research Goals

In preparation to dive into my research, I first set some clear goals and created a research plan that would guide my research process.

- Understand how users were currently engaging with the platform
- Identify SKILLZ’s target user
- Identify competitors and evaluate strengths and weaknesses
- Understand how people feel when interacting with the platform
- Discover how the platform fits into a user’s process
- Discover pain points that people encounter online and offline

Competitive Analysis

I started to research SKILLZ’s competitors so I could evaluate their strengths and weaknesses. The insights gained here provided key information in terms of the strengths we want to build upon and the weaknesses we want to avoid while keeping our specific goals in mind.

Provisional Personas

Using the insights gained from secondary research, I created provisional personas to quickly identify potential users. These provisional personas helped set the criteria for my interview participants and would be validated through user interviews.

User Interviews

Now, it was time to validate these provisional personas through user interviews with SKILLZ Users. User Interviews targeted members who have been with the company for 3+ years, >1 year, and newly registered members to discover if there were any underlying challenges shared across the lifetime of a member.

I conducted interviews with 8 people, about 15-20 minutes each.

Some questions asked during the interview:

  • Describe your first experience when first logging in?

  • How much time per day do you spend on the SKILLZ Platform?

  • What is the biggest pain point when using the Marketing/Downloads gallery?

  • Do you use any other curriculum services, if so who?

  • What tasks do you typically use the SKILLZ for?

  • Describe how you would utilize the SKILLZ platform in a usual workday.

After conducting these one-on-one sessions with the participants, I wanted to take all this new information gained and synthesize it to better understand who the users are.

Empathy Map

Using an empathy map, I synthesized all the information I gathered during the user interviews to uncover key insights that led to identifying SKILLZ’s target user group.

First, I started by categorizing my notes into the categories of Doing, Thinking-Feeling, Seeing, Hearing, Gains, and Pains to get an overall understanding of everything learned during my interviews with the different participants.

From the major patterns that I identified from the empathy map, I discovered the following key insights which helped me to understand what the user’s needs are:

Locating Materials

Many people discussed prolonged searches & difficulty finding things

Speed

Many people mentioned the time it takes to do things was a major turn off

Insights

  1. Users lose trust in the site when sent to OneDrive to download media files and documents.

  2. The class planners are used on a daily basis and usually just prior to class. They are hard to read quickly.

  3. Most users spend less than 5 minutes on the site. Designing with scalability in mind will be highly valuable.

  4. 70% of interviewees mentioned having difficulty finding downloadable media assets.

Frustration & Concern

Many people were frustrated & overwhelmed by all the available resources

Needs

  1. People need to be able to quickly find what they need

  2. People have more trust when they aren’t redirected to another site

  3. Convenience is a major factor in their busy schedules

  4. People typically use only a few portions of the site with any regularity

User Persona

To make sure that my decisions moving forward in the process are user-centered, I wanted to have a clear understanding of who SKILLZ’s users are. Using what I learned from patterns from my empathy map, I created a user persona to represent who I will be designing for - Meet Joshua!

DEFINE & IDEATE

Defining the Problems

Now that we identified our target user, Joshua, it was time to identify what actual problems we are solving for based on what we have learned about our user.

To help define these problems, I used the insights gained from research and my understanding of Joshua’s needs to create POV Statements to frame the problem from the user’s perspective. I used these POV Statements to identify How Might We questions which would fuel my process to brainstorm solutions.

Strategizing

From brainstorming, I ended up with a lot of different ideas - now I wanted to strategize and determine which solutions we should prioritize to most effectively help Ashley meet her goals.

Project Goals

Before I could make any decisions on what kind of solutions we wanted to implement, I needed to have a clear understanding of the goals we are trying to meet. These goals would help guide the decisions made moving forward to ensure we are moving towards the right direction.

Heuristic Annotations

Navigation

Focusing on the prioritized solutions, I conducted heuristic annotations of each aspect in the user journey. This allowed me to step into the user’s shoes and experience their successes and frustrations. This step also informed me as to where to focus my attention when designing the new platform interface.

Class Planners

Class planners are the backbone for SKILLZ. These planners consolidate all the elements that make SKILLZ successful and delivers them to the users. It is important that these planners are easily scannable and able to be easily referenced because user feedback has shown they are often used as a quick reference for instructors and assistant instructors (8-15yrs old).

Using these annotations allowed me to identity potential changes that could significantly improve the usability of the class planners.

Program Materials

Finally, a majority of users reported multiple issues when trying to use the downloads and marketing galleries. My review found that similar assets were listed in BOTH the marketing and downloads sections of the site. Additionally, there was a lack of preview images, no functioning way to search, & assets were buried in multiple accordion style menus.

Lo-Fi Wireframe Sketches

Taking what I’ve learned throughout my process to this point, I started to make decisions on how the content on the new SKILLZ platform would be displayed based on the project goals we want to meet.

Prototype & Testing

Building a Prototype to Test

In order to make sure the design decisions I made in the lo-fi wireframes effectively help reach our project goals, I wanted to get to a point where we could test the design with real users.

Mid Fidelity Wireframes

Taking the lo-fi wireframe sketches, I digitized them on Sketch and added just enough information for users to be able to navigate through the pages and complete tasks I would present to them during usability testing. These mid-fidelity wireframes would help my focus on what needed to be improved in terms of the functionality of my design. I also created tablet and mobile versions to make sure that the design is responsive and effective across the different device screens that users would be accessing the website on.

Usability Testing

With my prototype completed, I started working on a test plan to guide the testing that would be conducted. I then recruited participants and conducted usability testing in order to see how users interact with my design and identify where improvements to the design can be made.

Test Objectives

  • Test if users can easily complete the tasks

  • Observe the different users complete tasks

  • Assess areas of improvement to improve the usability of the design

Tasks

  • We asked the participants to complete tasks such as:

  • Locate the planners of a program.

  • Find & view a testing chart from within a planner.

  • Find a specific downloadable poster.

Summary

We conducted testing with 5 participants to make observations on how they interacted with the prototype and completed the tasks.

  • Method: Remote, moderated usability testing (Think Aloud)

  • Participants: 5

  • Age: 25-30 years

  • Average Time: 7 minutes

  • Task Completion Rate: 100%

  • Error-Free Rate: 99.4%

Results

The results would help me identify what improvements would need to be made on our design to make sure we are helping our users painlessly meet their goals.

Amongst the patterns I uncovered, I was able to identify common pain points amongst our participants.

Pain Points

  • 3/5 Mentioned that while they don’t use some content, they still want easier access to it.

  • 3/5 users scrolled back to the top of a planner after browsing to read again more thoroughly.

  • 2/5 was confused on how to download the testing chart from a planner.

Based on these pain points, I was able to draw key insights which helped me to identify what improvements I should prioritize on the design.

Insights

  1. People want to access non-relevant content

  2. People tend to scan the entire planner first, then move back to the beginning to take it all in.

  3. People want to be able to download the charts from a planner.

Recommendations

  1. Modify & reorganize the menu to include access to non-mainstream content.

  2. Add a “back to top” button to eliminate scrolling.

  3. Add the ability to print a testing chart from the chart preview.

Priority Revision

Having identified the specific design recommendations, I started making revisions to my design to improve the design:

Clear Navigation

I performed another review and card sort of all the programs & information. The final design was a mega menu that intuitively categorized the programs into buckets (large left squares) and when active, displayed their contents on the right. Users found this type of menu struck a balance between a reduction in cognitive load and low time on task.

Style Tile

High Fidelity Wireframes

Incorporating visual elements in line with SKILLZ’s branding, I worked on the UI design of the platform and created high fidelity wireframes.

Welcome to SKILLZ

Final Prototype

After creating my hi-fidelity wireframes, I created a prototype with the final design.

Reflection & Next Steps

As project manager on this redesign, I had the privilege of working as the UI/UX lead and be a liaison with the SKILLZ front end developers. Together we were able to work together and create solutions that were designed well and still within the technical constraints presented by the developers.

MVP vs perfect

Stakeholders were adamant about getting an MVP to market as fast as possible to capitalize on industry trends. While we were working with solid deadlines I am glad I was able to provide solutions that were thoughtful, informed, and exceeded stakeholder expectations!

User Feedback

Initial usability tests of the newly designed Program Resources pages were extremely positive! I'd love to give users more time to get hands on, then conduct more interviews in order to see how I can further improve the design.

room for growth

SKILLZ is a living and evolving online curriculum therefore the next step will be developing a Mega Menu that maintains clear communication without seeming bulky and difficult to manage.

Multi-phase

Because so much of the content needed to be rebranded OR recieved little to no meaningful engagement; I was able to work with stakeholders to develop a rebranding plan and future update funnel!

What people are saying

  • "Working with Andrew on our new platform development has been a pleasure."

    Jeff S. - Developer

  • "I was impressed with his collaborative and communicative nature"

    Nick H. - UX Designer

  • "I am constantly impressed by his ability to think outside the box"

    Anna R. - UX/UI Designer

CONTACT ME

CONTACT ME

Upgrade your web presence

Contact Andrew and get your custom solution