The website↗ I designed for Marvel Research Program, a CS research startup for high school students founded by my friends and I.

SUMMARY

Business website to facilitate program applicants & inform users

Key Features:

• Developed effective storefront for business, functions as hub for students and parents
• Clear communication of program selling points and main viewer interests (course information such as prices/dates/content, signup form, FAQs)
• Simple yet visually appealing graphic style and color palette for memorable brand identity

Metrics:

• 53s average page engagement time within 2 months of founding
• Satisfaction: users such as parents and students have recommended our program and complimented site visuals
• Conversions: 25% of new users upon deployment applied through our website, not including applicants from other platforms

PROBLEM INTRO

The Marvel Research Program (MRP) was newly founded and required a website to not only start building a web presence, but also provide a hub for applicants and future students to refer to for crucial program information. It needed to provide a very specific list of features:

• access to an application form,
• course information such as price/dates/content,
• and delivery in a visually appealing, attractive, and memorable manner.

RESEARCH

MRP at its core is designed to appeal to parents and students who seek more academic experience to bolster their chances of getting into desired colleges and their resume, both of which are very specific demographics. In order to design for them, it's critical to understand what they're looking for and are immediately drawn to on a website.
I drafted these personas after interviewing parents and students within the target range:

Personas & insights

• Parent (~40-60 years old) 👫
  • Looks for course info, application link
  • Checks for credibility & reputation
  • Program value ($ROI)
• Student (~15-18 years old) 🧒
  • Looks for course info, application link
  • Program value (college application boost)
  • Wants to know what options for research are offered

Selling points

• Student-run organization
• Access to institution-gated articles & staff
• Scarcity of high school students with meaningful research experience
• Possibility of publish-worthy research

With these details in mind, I decided to centralize most of the key points on the homepage to minimize actions necessary by the user. The majority of them will be looking for the same information, and the less steps possible to distract them the better. Ideally, the goal is to grab the viewer's interest upon reaching the homepage and increasing ease of access for the other course information pages that they may want to apply for.

PROTOTYPING

Initial draft

Through this structure, the idea is to have users follow the below user journey:

Design & layout
As a new business, even with a concise definition of our target demographic, we would need an effective brand to stand out from other academic programs (tutoring, SAT/ACT prep, other research programs). Some quick research yielded a few examples, which I drew inspiration from for MRP's first logo designs.

Education-related logo examples

Initially, MRP's name was intended to be "Data Science Research Program" (DSRP), and was later adjusted to Marvel Research Program to reflect a more unique branding. My friends and I wanted to retain the initial color choices, and I drafted the second logo in the center below to evoke "star" imagery. After some more brainstorming and discussion, this was revised to incorporate the program name's initial "M" and "linked" imagery to indicate the interdisciplinary focus of the research we guide students in. I also ended up choosing a softer, rounder font in a more modern style to stand out more, as many other education-related programs tend to use traditional fonts with sharper edges.

Logo development iterations

Although my team and I hoped to keep the green color from the original logo, I also wanted to explore other palettes in case they would be more suited to the new design. I narrowed down color palette options to the ones below.

I drew up quick mockups of some ads in each palette to help with choosing, and opted for a simpler modern look. A common problem I noticed in many existing academic organizations is a tendency to clutter promotional material and have unclear websites - the chosen style should minimize such issues. After surveying colleagues along with friends and family in the target audience, I ended up choosing the second palette with the original shade of green with a new complementary pink color, which received the most positive responses.

ITERATIONS

Design choices

Most first-time visitors in surveys indicated that they would prefer to be able to quickly acquaint themselves with the website, rather than spend/waste time figuring out how to find what they're looking for. Many online sites and research also indicated that most business websites had some sort of hero and/or intro on their homepage upon loading, and a call-to-action like "Schedule a Meeting" or "Click to Find Out More". I decided to place these items in those same positions on our homepage for the greatest ease of access.

For this project, I designed the website with common features such as a clear navigation menu at the top, and present the content of the page below. I also opted for larger margins on the sides to help draw the user's focus to relevant content, while also simultaneously avoiding overwhelming them with too much activity on the page. "Cards" were also used to group together information, such as with a specific course's picture & details, to improve clarity and ease of use (Gestalt laws).

In order to introduce some level of design variation on the website's subpages, I also built collapsible buttons to avoid overflowing a page with too much content. After preliminary user testing, the majority of feedback indicated that the longer the subpage lengths, the more potential losses in interest overall, even if they were initially interested in the value proposition. By providing the user with the option to only view what information they choose, it introduces a more intuitive experience when navigating the website.

OUTCOMES

Our first LinkedIn post!

To market the program, we posted flyers like the one above (when the program was still named DSRP) on both LinkedIn and Facebook groups - applications soon came streaming in, and we received upwards of 25 total submissions with ~15 being for our flagship research program course (others were for classes such as Python and machine learning). Our summer 2023 cohort progressed smoothly, and some students left testimonials below as well:

• "…the program was an amazing learning experience. I particularly liked how our research project was sometimes interspersed with guest speakers that helped us get more clarity on what we potentially want to do in the future."
• "Because of the course, I actually know what the different parts of data science are and how it is incorporated into various aspects."
• "A wonderful in-depth dive into Data Science that goes into the application of data in our world and modern companies."

⮍

The website↗ I designed using Kajabi for Success Koach, a startup college counseling service run by Harpal Kochar and his team of counselors.

*Please note that the live version may differ from the presented material here, as I am no longer responsible for development or management of the website. The material in this section reflects the work I conducted on the project.

SUMMARY

Business website to inform and attract parents & high school students of provided services

Key Features:

• Official storefront for Success Koach college counseling business, informational center for potential clients
• Appealing presentation of business services (i.e. milestone plans)

Metrics:

• >54s engagement time on critical pages (blog, resources) within 2 months of launch
• >1k new users within 2 months of launch

PROBLEM INTRO

Success Koach is a college counseling service provided by Harpal Kochar and his team of counselors, aimed at providing customized milestone plans for high school students to best improve their chances at getting in their desired colleges. After running the business using a more simplistic webpage, he felt it was time to upscale to a website with a more intuitive, streamlined, and brand-forward design using the Kajabi platform. To accomplish these adjustment goals, the new version had to:

• present a memorable & appealing brand identity,
• concisely show offered services such as guidance plans + resources,
• and enable easy access to engagement (meetings/calls) in an unobtrusive manner.

RESEARCH

Success Koach's unique point of appeal is that they offer guidance plans customized to each student's current grade level, advising them on the best courses of action in regards to every aspect in high school and for college applications. Many other counseling services are limited to essay editing and broad advice, instead of working with each student no matter the level or background to help curate their profile (in addition to essays and advising). The parents that would be interested in these services are part of a specific demographic, as I found through research described below:

Persona & insights

• Parent (~40-55 years old) 👫
  • Looks for credibility, proof of work
  • Reads/skims over offered services
  • Searches for contact info/method

However, in this industry, many parents do not have the time to search for a counseling service manually. Most will look to their friends for recommendations, or look up local businesses that may be more familiar with the nuances specific to their student's school. As a result, it is important to recognize as well as clearly present Success Koach's branding around these needs.

Selling points

• Individualized approach per student profile
• Extensive knowledge in the college admissions process
• Reputable services
• Versatility in packages at all grade levels (9-12)

Unique Value Proposition (UVP)
Unique value propositions (UVPs) are very effective in quickly and concisely communicating to a potential customer what the value of the business is, what it offers, and often what makes it stand out. As such, I handpicked what I felt were the most appealing characteristics of Success Koach's business model, and presented it like so (using the design & palette described in the development process further below).


Most prospective customers have varying attention spans, especially since they may have been looking for a while and should not have to spend additional time "solving" how an unfamiliar website works. I planned to address this note by placing a simple and clear hero on the landing section of the homepage as well as an easily accessible "Schedule Meeting" button to immediately let visitors know how to get in touch with the business. Other significant points to present to customers include, in order of rough importance:

• UVP
• Reputation (testimonials, schools)
• Offered services
• About section
• Resources

PROTOTYPING

Initial draft

Much of the content is consolidated into the homepage, as first-time visitors wondering whether the business is worth engaging with will not explore pages with more time-consuming content (i.e. blog & resource pages). The idea is to have potential customers follow the below user journey:

Design & layout
Although Success Koach has been in operation for a couple of years already, the previous website was more utility-focused and placed less emphasis on more nuanced aspects such as aesthetics, brand identity, and UX. These were present, but needed to be presented more clearly in the new version. Initial research that I conducted yielded that similar organizations often incorporated themes and symbols of education into their brand (Success Koach's name already did so as well).

College admissions counseling logo examples

I wanted to use a similar approach to designing Success Koach's new logo, though there were important points that had to be accounted for:

• Simple (minimize clutter)
• Elegant
• Education-themed
• Memorable

The development process for the logo went by relatively fast - I drafted a quick mockup which was approved, and finalized a colored version which we settled on. I chose to go for a navy blue palette for the logo and website as I felt it evoked a more "polished" and "academic" identity for the business. This style was later extended to the rest of the website's layout.

Logo development iterations (original on left, final on right)

Prior to implementation on the Kajabi platform, I composed simple mockups of what the homepage layout & styling could look like (at this point with the original logo). Although they accomplish much of what I initially planned, they had several outstanding problems which are noted below.

ITERATIONS

Design choices

While continuining to develop Success Koach's website, I made sure to account for the errors noted in the prior section. I relocated and renamed the "Get Started" call-to-action to a more direct "Schedule a Meeting" button in the center and top of the page - this eliminates the previous obscurity issue. I also revised the UVP to the finalized version, more accurately reflecting the identity and selling points of the business. Instead of convoluted infographics, I opted for a simpler, spaced-out layout with balanced text and clear sections. Crucial components such as testimonials and the about section were also carefully added.

OUTCOMES

1k users within the first month!

Within 1 month, Success Koach's new website received ~1k new users and quickly became a true storefront for the business. Feedback from the team as well as users of the website was positive, noting how it was professional and stylish. To this day, the website is utilized as a hub for the business' functions for both new and current clients.

⮍