Hatchbridge Designathon: Schoolconomy

Redesigning start-up Schoolconomy’s landing page

Role

UI Design
Prototyping
Research

Team

Bibilomo Sanni
Jasmine To
Sarah Pearson

Tools

Figma
Discord
Sketch paper

Place

1st Place

Timeline

February 23 - March 1st, 2024 (1 week)

Designathon Resdesign Task

Hatchbridge held its first Designathon event in February 2024 and I participated in a team of 3 securing first place for our redesign of Schoolconomy’s landing page. Schoolconomy was one out of three start-ups that were involved in the challenge. In one week, we created a landing page that could be directed to the multiple audiences of Schoolconomy and was user-friendly.

Challenges

  • Redesign Schoolconomy’s landing page that speaks to the three audience types

  • Implement animations into the interface

  • Ensure the landing page is responsive for both mobile and desktop

Kickoff - who are we designing for?

For the kickoff of this event, participants were introduced to the start-up we would be designing for. For my team, a Schoolconomy intern walked us through the current needs for the company’s landing page and who their users were. Schoolconmy is an educational brand so that cater to students, parents, and teachers. During this kickoff, we were told they would like us to incorporate animations into the landing page to make it engaging and would like us to showcase some of the screens of the company’s app. We were also provided with a Figma style guide that the brand already had in place.

On the same day, our team had our first meeting to discuss how to wanted to take on the challenges. We noted the following questions:

  • How do we design for the three audiences of students, parents and, teachers without excluding anyone?

  • Is it feasible to implement a design methodology with our short time frame?

  • What does the current landing page do now that we would like to improve?

Solution Ideas

In answering our questions, we decided we would have to find a way to make our landing page design inclusive enough that it caters to everyone in our audience instead of looking for a way to direct the messages to the audiences in different sections. We also decided it would not be very feasible to strictly use a design method with the tight time frame we had. Eventually, we took some inspiration from Lean UX - by thinking about who are users are and sketching some of our solutions for the landing page. Jeff Gothelf's Lean UX method is known for its suitability in dynamic environments where adaptability is essential for product development. We agreed that the fast yet effective nature of Lean UX sprints would serve as good inspiration for our design process for this competition.

Some of the issues in the Schoolconomy landing page that we aimed to address with our solutions were:

  • The navigation bar had too many options some of which could live in a drop-down

  • The imagery on the landing page too up too much space

  • There was not enough information on what the company did and how it could benefit its users

Lean UX Canvas

Competitive Analysis

To start off our design process, we looked at some competitors’ landing pages to gain insight and inspiration. Since Schoolconomy as a brand is unique we looked in the realm of digital educational platforms since these brands could share qualities with Schoolconomy (making this a loose interpretation of competitors). Our top two competitors were “Headspace” and “Duolingo”. After looking through their landing pages, one of our team members sketched a layout of what these landing page structures had in common.

We narrowed down the purpose of landing pages to the following:

  1. The landing page is meant for users to take one specific action (dowload the app)

  2. The landing page must make them confident to take that action

  3. Action should be clear and easy to do

Landing Page Structure

Brainstorming Layouts

Once we felt confident in our landing page structure it was time to move into creating layout alternatives. We were able to depend on the Figma style guide provided to us by the company but we also wanted to take on our spin on things. We wanted to incorporate animated characters since we observed this was a trend in the educational landing pages we browsed through. We also wanted to find a way to incorporate the brand’s colors in a way that different and innovative from their current landing page.

Initial Lo-Fidelity Layout

For our first iteration of the landing page, we jumped straight into a low-fidelity interface due to our time constraints. We implemented our own catchphrase of “Where good grades pay off” to catch users’ attention. This followed our structure of capturing users attention with a headline and a call to action “above the fold” of a landing page. We also worked to create small segments throughout the page where we highlighted the benefits of using the company’s app using animated characters. The current landing page also highlights some of the brand’s partners with a carousel of the brand’s logos. We though a more visually pleasing way to do this was still using partners’ logos but making them smaller right underneath our call to action.

Highlighting Reviews

Our landing page structure ends of by providing more social proof often in form of reviews. Since this was not originally present in the brand’s landing page we had to select reviews to promote. I took the task of going through the reviews in the app store and selecting three reviews. I thought it was important to have one review from each audience type of student, teacher, and parent. In this first iteration, I placed the reviews at the bottom of our layout and inserted additional call-to-action buttons beneath the reviews.

First Layout Draft

Reviews as Social Proof

Designing the Hi-Fidelity Landing Page

With only four to three days left in the design challenge, we got to working on our high-fidelity landing page. The low-fidelity page we created gave a good starting point for how we wanted our final design to look. However, we still had to refine the page’s elements.

The Navigation Bar

One of these elements was the navigation bar. As mentioned earlier, we noticed the original landing page’s navigation bar had far too many options.

We tackled this by determining what needed to be on the main navigation and what could be talked about on the landing page. We also decided to add a download item in the bar for a call-to-action to live within the navigation.

The Hero Section

The Benefits Section

Old navigation bar

The hero section was one of our most debated sections. We wanted to sure we designed “above the fold” - making sure all the important information could be viewed at first sight without scrolling. To do so we worked on sizing the new headline, sublines, call-to-actions, and partner logos to be viewed at the top of the screen. We also thought this would be a good space to work on the animation requirement. This was done on the floating character animation which also acted as a way to direct users’ eyes to the headline.

Old hero section

Responsive Mobile Design

To complete our high-fidelity prototyping, we worked on making the mobile landing page responsive. This involved the meticulous resizing of each element for mobile by one of my teammates. It was important for us to ensure a seamless transition from desktop to mobile involving each of us double-checking how features looked on mobile with Figma’s ‘Present’ feature.

Redesigned navigation bar

Redesigned hero section

Labeled as the “benefits section” of our landing page structure, this served as the place where we could highlight the features of the brand’s app and why users should download it. We also went through many iterations of this section. It was important it was visually pleasing so users would be encouraged to read through it. This type of section did not exist on the original landing page which we felt didn’t give first-time users the information they most likely desired on what the brand does.

“Benefits Section” of the Landing Page

Mobile Landing Page

Designathon Presentation to Judges

On March 1st, 2024 a week after we were given the task each team presented their landing page redesign to the judges, which included the CEOs of start-ups we designed for. That morning, it had just been revealed that we were part of the top two finalists for the competition against five other teams designing for Schoolconomy.

For our presentation, my teammates and I explained our design process and the rationale behind our decisions. We also went through our prototype on Figma showcasing the animations we implemented. After the judges convened, we were announced as the first-place winners for the redesign of Schoolconomy’s landing page.

Presenting our landing page to the judges

Reflection

This was my first time participating in a design competition in any capacity and it was also HatchBridge hosted a design competition. I learned a lot from this experience and am so honored my team earned first place.

  • This experience taught me how having some solid design practices down can take you far when designing in a short time frame especially when you are unable to perform interviews and usability testing.

  • I learned that documentation is important even under stressful conditions. Unfortunately, we did not document as much of the design process as we liked as lot of decisions had to be made on the whim. however, having documentation of our iterations would’ve given us more opportunity to reflect on any mistakes we might have made.

  • Productive design decisions ultimately are traced to user needs and under the circumstances, we had to make a lot of assumptions which is not the preferred method and led to a lot of re-iterations. However, this experience did emphasize the importance of user feedback for me.