The Knowledge Society is a 10-month accelerator program for students ages 13 - 17 where they gain exposure to emerging technologies and mentors from companies like Telsa, Google, Instacart, Lego, and more. Students work on original projects across industries like AI, space, genetics, cryptocurrency, and more. The goal of TKS is to give students a hands-on learning approach and allow them to explore, innovate, and develop skills to help them succeed int he professional world.
Lead UX Designer
3 months
Figma, Loom, WordPress
The Problem
I was brought on to TKS through JJ Studio, a client of mine. JJ Studio was working with TKS and assisting with marketing for their open application season. As part of their marketing initiative, TKS was sending out acquisition campaigns and developing landing pages for students, parents, and teachers to encourage them to spread the word to interested students. TKS was experiencing low conversions from their city specific landing pages. Not enough students were showing interest and applying for the programs.
My Role
I was tasked with leading the UX for designing new landing pages for students, parents, and teachers. Each landing page was done in collaboration with the marketing lead and founder at TKS. For each landing page, it was important to make sure it was mobile optimized.
The application season was in full swing and TKS was looking to increase conversions on their landing pages. They wanted their target audience to spread the word and get more students excited about joining TKS.
As a freelance designer, it is important to scope the project requirements, client goals, and understand what deliverables need to be made in the given timeframe. I kicked off this project by inquiring what TKS' specific needs were, what research and resources I had available to me, and if there were any creative guidelines already established. This helped me brainstorm and estimate my time needed to find a solution. We connected over Slack, making sure any preliminary questions were answered before I began the design exploration.
I also analyzed their current landing pages. The biggest issue facing those pages was information hierarchy, storytelling, and a strong brand voice and style. The pages lacked thorough information about the program and interesting visuals that would attract users' attention.
After understanding the scope of the project, I started to learn more about their personas. TKS has a few primary personas - students, teachers / organizations, and parents. Each persona requires a slightly different approach to language, imagery, content, and more. Before beginning to design, I reviewed the user research information provided by the TKS team and analyzed interview responses and other studies conducted on their user groups. I consolidated each persona below:
Once the discovery phase was done, I launched into the fun part: design exploration. While exploring design solutions for the landing pages, I was guided by several principles that I believed would be most important for this project:
TKS has many amazing, bright, and visually compelling imagery and videos of students. I wanted to use this to my advantage and develop landing pages that caught ones attention. It was also important to maintain that "human" factor and show students that there are others like them attending the program.
The landing pages were going to have a lot of informative and dense content. The assumption I was working with was anyone landing on the pages should be able to gather all the information they need without needing to go elsewhere on the website. This required creating elements that repeated and recognizable, but still varied enough to keep the experience interesting.
Given the scope of content and images, the landing pages needed to stay usable and clean. TKs' founder wanted a modern interface that was not packed.
Along with staying clean, the TKS founder instructed the landing pages to be easy on the eye and make use of space. White space is not a foe.
The TKS team and I worked through an interactive ideation session to figure out the landing page flow, required content sections, and overall design approach. Rapid sketches were used to quickly get ideas down on the board and collaboratively discuss our thoughts to make sure everyone was aligned.
Wireframes
The entire design process was TKS was extremely collaborative. I was working with the marketing lead and founder, sharing my work and incorporating feedback during critique sessions. For every iteration and addition, I walked the team through my thought process and design choices. Some critique sessions were done live in Figma while others were recorded on Loom.
All final designs were made responsive and delivered in both desktop and mobile formats. The final pages were implemented by the team's developer in WordPress Elementor.
TKS runs its program across cities including Boston, Vancouver, Ottawa, LA, Toronto, New York, and Virtual. We designed landing pages tailored to each city. Below is an example of the Ottawa city page (scroll through the Figma prototype).
I created a series of landing pages for directed at individual persona - parent, teacher, and students. Here is an example of what the parent landing page looks like (scroll through the Figma prototype).
For the style guide, I collaborated with TKS' visual designer who worked with an existing color palette. The color palette is fun, bright, and inviting with the colorful strokes around each photo. Poppins was a font previously used on the TKS website.
One of the constraints of this project was lack of access to data. JJ Studio was working on TKS' Google Analytics, so this meant any previous data was not available to access for me. Once the contract ended for this project, I also did not have access to any data collected afterwards. In an ideal situation where I would have had access to analytics, here are the metrics I would consider (and for each metric, I would ideally compare the percentage change):
After launching the landing pages, I would utilize Hotjar to look at heatmaps, recordings, and capture direct feedback from users on the page. Being able to see these metrics would give me an insight into
Both before and after launching the landing pages, I would want to look at conversion metrics in Google Analytics to understand the landing pages' performance and whether it improved or not. Being able to see these metrics would give me an insight into
Working with TKS was an exciting and highly collaborative experience. This project allowed me to experiment with unique designs and work directly with the founder. The main challenge with the landing pages was finding an engaging way to showcase all the dense content. Each content section needed to include a description, testimonial, and project examples. My focus was creating a flow that kept the user engaged while varying the sections as to not become repetitive. Visual storytelling and information hierarchy were leading aspects in my designs.
Another takeaway was communicate often. Each phase of the design was communicated for feedback with the marketing lead and founder. I also incorporated their ideas. This open dialogue ensured my designs were hyper-focused on the end user and fulfilled their marketing needs.
