Creating a new education platform to help make out-of-school learning opportunities more accessible and engaging
responsive webapp • EdTech • database search • media
Overview
Responsibilities
User Research Analysis
Competitive Analysis
Design
Prototyping
Tools
Notion
Google Suite
Zoom
Figma
Introduction
Snowday is a startup looking to create a product in the education technology space that helps teenagers with 2 main objectives: (1) discover what inspiring peers and early college students are doing to succeed on similar interest paths, and (2) find learning opportunities outside of school, such as after-school programs, competitions, and summer courses, that can help them achieve their education goals.
Project Type
Direct client work as a Varias UX/UI expert
Timeline
Jun 2022 - Apr 2023
Process
01
Discover
Research & Empathize
02
Design
Define & Ideate
03
Validate
Prototype & Test
01
Discover
Methods
1-on-1 Interviews
Competitive Analysis
Tools
Notion
Google Suite
Zoom
Summary
I analyzed interview recordings to learn more about the domain of out-of-school education and our potential users. Based on the client's existing knowledge of the domain and their initial user research, I explored existing products with similar features for inspiration.
Context
I was brought onto the project after initial research and design work had already been done by the client on early versions of the product. I was provided recordings of interviews that were conducted partly as exploratory user research and partly as test sessions (using early mockups) to validate or invalidate the product's vision and direction (as opposed to focusing on usability testing). These "validation research" sessions continued to be conducted multiple times by the client over the course of my time on the project and led to multiple changes in direction for the product, requiring rapid pivoting and adaptation.
User Research
From the initial interviews I studied, I discerned three different potential user types with unique goals, needs and pain points:
Student: American high schooler; the ultimate end user whose educational journey is the primary focus for the product; tends to be ambitious and high-achieving
-
Goal: get accepted into a good college
-
Needs:
-
take control of their own education journey outside of school by discovering learning opportunities based on their interests that will
-
improve their knowledge and skills in that interest
-
help build their pre-college "resume" that will increase their chances of being accepted into a good college
-
-
learn how near-peers (fellow high schoolers or early college students) became successful on their own educational journeys, especially if they share interests or colleges that they want to get into
-
discover other interests that exist and how they might translate into an educational (and ultimately professional) journey
-
-
Pain Points:
-
Feels pressured by themselves, their peers, family, and society to build up their pre-college "resume" to get into a good college
-
Some do not know what interests they want to pursue or how their interests could be translated into a career.
-
Not knowing what interests and opportunities exist causes insecurity about their future.
-
Lack of funds to participate in high-profile opportunities causes feelings of inadequacy and makes getting into a good college feel out of reach.
-
“The school has not been helpful [with giving me guidance on] what I should be doing to prepare for college... Extracurriculars I did mostly based on my interests... There's always the thought that maybe I missed a really cool internship or summer program that I could have done.”
- Calliope S, student
Parent: highly invested in the student; often does a lot of research on learning opportunities for their child(ren), along with paying for them and providing transportation
-
Goal: help their child(ren) get accepted into a good college
-
Needs:
-
help their child(ren) explore and pursue their interests
-
discover learning opportunities that
-
match their interests
-
can fit into their busy schedules
-
are within their budget
-
-
learn how other students became successful on their own educational journeys
-
-
Pain Points:
-
Fierce competition for college admissions causes aversion in parents to sharing information about high quality learning opportunities.
-
Researching learning opportunities by themselves can be exhausting and overwhelming.
-
High costs can cause a large gap in educational success between families of differing financial situations, especially to pay for
-
prestigious learning opportunities
-
educational advisors who assist families in finding the best learning opportunities for the student(s)
-
-
“When you have 60,000 applications like Harvard or 50,000 like Brown has... How you position yourself in the right way is the question... I watched a thousand webinars, met with and talked with so many people... It took so many hours, every single night [for] a year... If [there was a] resource [that could fast track that], that [would be] incredible.”
- Jaqui L, parent
Education Consultant / Advisor / Counselor: a domain expert who is hired by families to provide assistance on improving their student(s)'s college admission chances, including researching learning opportunities; often works with many students at a time
-
Goal: assist the families that hire them in succeeding at their educational goals
-
Needs:
-
an efficient way to research and share learning opportunities with their clients
-
an efficient way to manage their work for multiple students at once
-
a way to empower students and parents to do their own research, so that they can all collaborate on the student(s)' educational goals
-
-
Paint Points:
-
Information on learning opportunities is spread out and not always willingly shared, causing the research to be very time- and effort-intensive.
-
“[Having a tool] that's easy to use, easily filtered by [things like eligibility requirements and deadlines], and [that is] comprehensive would be incredibly helpful. It would remove so much time and energy in trying to [find] the perfect opportunities for kids... Half of my job is finding things for them to do.”
- Sherwyn F, education consultant
Competitive Analysis
With the results from the user research as well as the client's ideas for the next iteration of their product in mind, I explored a few existing products for inspiration. None were in the education space, since nothing yet existed that was similar to what we were trying to build. However, the products I analyzed had successful, domain-agnostic features that could potentially be translated onto our own platform.
The first "pillar" (or main feature) of the product was their database of educational extracurricular opportunities. These can include activities like programs, competitions, and after-school or summer courses, provided by high schools, colleges, community centers, science- or art-focused organizations and other such providers of education. This feature was intended to tackle the pain point of needing a more efficient way for all users to find these learning opportunities.
Similar aggregate platforms like Trip Advisor and Yelp organize their listings into categories, so that they are easily explored. Detailed information for individual listings are also organized into sections, so it can be scanned without getting overwhelming. Listings are also supplemented by ratings and reviews.
While the first pillar served as the more practical side of the platform, the second pillar was more inspirational and added a human/empathetic touch to help students and parents stay engaged and invested in the journey.
The second pillar was a collection of profiles of (whom the client called) "rockstar high schoolers" (or early college students), which told the story of their educational journey through major milestones, challenges, and inspiring thoughts/observations. These profiles were intended to tackle the (mostly) students' pain points of not knowing what interests they want to pursue, how their interests could be translated into a career, or what they could do to involve their interests in their educational journey.
I took a look at Linkedin's profile design, in which details were shown at the top and other important categories like experience and education were neatly organized below. All of this information tells the story of the person's professional journey, and the capturing that story was the main element I wanted to emulate.
Another feature the client wanted to explore in order to increase engagement and add a human touch was a video at the top of the profile of the student summarizing and talking about their story.
02.0
Design
Methods
Wireframes
Style Guide
High-fidelity Mock-ups
Tools
Notion
Figma
Summary
Based on the multiple rounds of research on previous product versions, I helped the client define and refine their overall product vision and direction through further rounds of design mockups and prototypes. I iterated quickly with wireframes, then converted them into high-fidelity versions for multiple purposes, including more "validation tests", marketing, investor presentations, and eventual usability testing.
Problem Statement
How might we inspire and empower teens to find and pursue out-of-school learning opportunities based on their interests?
Wireframes
After studying the research material to gain a better understanding of the domain and users, I created wireframes to help the client visualize their ideas for this next iteration of the product, with the end goal of developing a native app.
The landing screen for the extracurriculars (shortened to "ECs") was one of the highest priority screens, so it went through many different versions.
Each activity had its own details and ratings (represented by icons) to display. It took time to determine the right size and amount of info to show in the search results versus leaving it for the full individual detail screen.
Given that the education consultants valued the ability to quickly filter through different requirements, the filter screen also received a lot of attention.
The screen for the extracurriculars themselves was very information-dense. Organizing it into containers of different categories helped with scanability. Use of icons also helped break up the walls of text and add visual interest. The ability to create and add the ECs to a list, as well as the ability to share them to other people was important for the user's research and overall product engagement.
Similar to TikTok, the intention for the "passion profiles" of successful students was to be less about targeted searching and more about discovery and exploration. Therefore, trending profiles would be shown first by default, with search and filter functions available but hidden / de-prioritized.
These profiles focused on the student's story / educational journey told through both a video at the top and a timeline of container cards. The video's aspect ratio was cropped to a non-standard size, so that the student's "quick" info could remain "above the fold" and easily scannable. This way, a viewer could quickly determine whether or not the student was relevant to their interests or goals.
When scrolling the timeline cards, the student's quick info would collapse to a small stickied container at the top of the screen, so that it would always be visible.
Finally, similar to the ECs, users could also pin and share these profiles.
The (student) users would also have their own profile screen to potentially share with parents, counselors, and other people in their lives who were invested in their educational journey. (This would of course mean building different kinds of accounts for the different user types). Here, students could build their "pre-college resume" with their own milestones, as well as find the ECs and passion profiles that they had pinned.
Style Guide
While the ideal next step would have been to prototype and test these wireframes, due to time and budget constraints, I immediately moved into creating high-fidelity versions of the approved wireframe screens and built a clickable prototype of those instead.
I worked with the branding and style guide that had already been established before I joined the project. Since this was a platform aimed at high school kids, Snowday's main brand color was a bright fun blue and white, supported by various lighter and darker shades. This blue became the "color code" for the "extracurricular" side of the product, along with the snowflake motif. In contrast, various shades of orange were used for the "passion profiles", supported by a flame motif. Rounded fonts, buttons, and icon styles reinforced the product's overall youthful character.
Light
#E6F1FB
Light
#FFF0E2
Primary
#62ABEA
Primary
#E17A19
Logo
Nexa • Bold
Header / Body Text
Nunito • Bold / Medium / Regular
Medium
#344372
Medium
#915217
Dark
#242F50
Dark
#3D2B1A
High-fidelity Mockups
These designs were used not only in a clickable prototype, but also as promotional materials in newsletters, social media profiles and posts, and physical print banners for convention booths. They were featured in a simple landing page that was built by the client to begin collecting email addresses for early access to the product. They were also used in the clients' pitch decks for fundraising meetings with investors.
Notes on Adapting to Change
Due to time and budget constraints, the prototype was used mostly for promotion to drum up support and excitement for the product. Designwork paused here while the client focused on raising more funds to support the rest of the project. During their investor meetings, they received feedback on the prototype, which prompted another change in direction for the next product iteration. While I would have preferred conducting true usability tests to inform my design revisions, I adapted to the changing business needs by relying on the clients' knowledge of the domain and providing my own expert suggestions wherever I felt it was needed. Such is the nature of a brand new startup.
02.1
Design
Methods
High-fidelity Mockups
Tools
Notion
Figma
Zoom
Summary
Based on changing business needs, I created another set of design iterations. The development team was also finally put together from the clients' latest round of funding, which made it possible for me to collaborate with them on the designs, giving me a fresh perspective for feedback, as well as ensuring that my designs were technically feasible.
Design Revisions
After discussions with the new dev team, one of the major changes for the product was to build it as a webapp, rather than a native mobile app. This was to ensure that the platform would be most accessible by anyone anywhere, especially with three different user types who could have a widely varying degree of technological comfort. Therefore I created not just mobile designs but also tablet and desktop versions as well. I again started with wireframes for rapid iteration, especially for screens that needed a lot of revision, but moved directly to high-fidelity once the wireframes were approved.
Another major change was using "learning opportunity" rather than "extracurriculars" and "learning paths" instead of "passion profiles".
The home screen was revised to be more of a hub for both major sides of the product, not just the opportunities, as well as provide more information about the platform's features and goals.
After receiving feedback especially from educational advisors, we found that the screens for the learning opportunity flow were more complicated than we first thought. The nuances of showing the right amount of information at the right time and in the right order, as well as providing the right filters had to be figured out. The learning opportunity screens themselves had only minor revisions, namely the addition of sessions as well as how the ratings work.
The biggest change for this design iteration was the "passion profiles", now called "learning paths". The client decided to fully embrace the full-screen TikTok-style videos, scrolling up and down to navigate between them. The text-based timeline was also completely removed, so we would rely only on the story told through the videos. The student's quick info remained as a collapsible modal at the bottom. Another modal for the video chapters could be opened from the left, though it would always stay visible on desktop due to the extra horizontal space. The desktop version would also have other recommended learning paths to incentivize exploration.
Lastly, the client decided not to include the user account feature at all for this MVP, so design revisions for those screens did not continue. The entire team instead focused on optimizing the experience of the learning opportunities and learning paths of the product.
03
Validate
Methods
Rapid Prototyping
Moderated Usability Testing
Tools
Notion
Figma
Zoom
Summary
I created a clickable prototype from the high-fidelity designs, along with a usability test plan and outline, so that test sessions could be conducted effectively. The client ran validation sessions, and we used their results along with feedback from the clients' investor meetings to make further minor changes.
Notes on Effective Usability Testing
I created a usability test plan with the intention of running and moderating the test sessions myself or at least being more involved with them alongside the client's team. However, due to time constraints and other factors beyond my knowledge, the client solicited feedback about the designs in their own way. After watching their recordings, it was clear to me that because their "validation sessions" were run quite differently from my own usability tests, I had to temper my expectations and be extra careful to extract as much unbiased data as I could from the research results in order to prioritize the users' needs in my design revisions.
Design and Usability Feedback
Key Findings
LO Search:
-
Searchbar currently takes user to a new screen before they can start typing, which contradicts their expectation of being able to start typing immediately from whichever screen they are currently on (either the home or search results screen)
-
User wants:
-
search for more than 1 interest tag at once
-
quickly apply a "secondary" search criteria (such as location or grade) without having to go into filters
-
browse a list of all available interests, providers, etc. rather than search
-
explore other categories such as "newly-added LOs" or "top LOs for 17yo girls"
-
Learning Opportunity:
- Some users did not know they could tap on each rating to learn more about the rating system and what each rating means
Learning Path:
-
Some users did not know they could scroll/swipe to find more videos
-
The timeline progress bar for the video was not noticeable
-
Some users did not know they could click/tap on the video to pause/play it
-
User wants:
-
way to filter/search for specific LPs based on interest rather than having to scroll through every video
-
better way to explore LOs related to the LP they were watching
-
“Is there a shortcut to discovering a person who's doing [for example] engineering, instead of scrolling past all of these [videos] and finding out which person does engineering? ... It [would help] people explore.”
- Julia S, student
“When I come [to the site], where do I even begin? What are other moms like me putting their child into? ... Maybe there's something that I don't know that somebody else does? ... Something newsworthy, so I can think, 'Oh, I should totally look into that,' and it gives me inspiration.”
- Meredith S, parent
“I wonder if this site has financial aid information, because [when] I do pro-bono work, that [is] a serious issue - people just can't pay the prices of these summer programs. So I'm wondering... I haven't seen that yet on here] if there's anything about [financial aid].”
- Nina B, education counselor
Final Takeaways
This project tremendously helped me improve my communication and collaboration skills, both from working with a very passionate and opinionated client, as well as a development team with very precise technical limitations. I also had to be able to adapt very quickly to changing circumstances, all of which are common experiences when working with start-ups.
I practiced giving feedback and voicing my concerns in a constructive way, challenging opinions when I felt it was necessary (and backing up my arguments with data whenever I could), as well as accepting that I may have to create designs that I do not agree with or were just not technologically possible within our constraints. I also had to accept designing without results from ideal unbiased usability testing.
In terms of UX processes, my biggest lesson was targeting the correct audience for usability testing. A major question that persisted through both rounds of testing was whether or not the testers struggled with the copy simply because they were American, rather than British or European, where the app is currently targeted. I also learned how to navigate working with feature packages in isolation from the rest of the app. I had to accept that I had little control over the larger picture and to do the best I could with what I was given.
“Is this website designed to be more for teens or more for their parents, or for both? Or for counselors? Because I know that the summer activity 9 times out of 10 is driven by the parent, not the counselor, not the kid.”
- Nina B, education counselor
Next Steps
As of the time of this writing, although Snowday has officially launched to the public, work on it has paused again for more fundraising. If I have the opportunity to continue working on it in the future, I would re-visit the target audience of the product itself. Throughout the project, the Snowday team was trying to appeal to as many of their different user types as possible. If they could narrow their target user type, they could build future features to focus on that specific user's needs, rather than spreading out their resources too thinly.
Additionally, I would try harder to convince the client to establish a better system and method for usability testing, acting as the moderator and running the sessions myself if necessary. This would allow for more focused gathering of unbiased data for the next design iterations, as well as teaching and empowering the client on how to improve and run their future test sessions independently.
