top of page

Debatedrills

Artboard 8.png
OVERVIEW

We achieved a 126% increase in users within a 5-month period after launch.

e-Learning
Mobile design
Web design
Debatedrills is the largest and leading online provider of high-school speech and debate education in the U.S.

I worked on redesigning Debatedrills' website and brand along with the CEO, COO, and Technical Engineer.

This case study focuses on new user onboarding and selling.

Tools

Figma
 

Team

Carolynn Chang, Lead UX Designer
Shubham Kumar, Technical Engineer
Paras Kumar, Founder and Manager

Role

UX / UI Design
Visual Design

THE CHALLENGE

Debatedrills' continuous growth means that they must improve their visual branding 

Debatedrills has established itself as the leading brand for reliable, online debate education. However, their website does not reflect their success and professionalism. I was tasked with revamping Debatedrill's brand identity, as well as developing new features that encourage further growth and attract more students to their services.

We began this project by looking closely at each page to determine its strengths and flaws. With the founder, I discussed potential ways to create channels for more conversions/sales, as well as improve the navigability of their site.
BUSINESS GOALS

Debatedrills wanted to improve their visual branding and increase sign-ups, which can lead to more conversions.

I asked the team at Debatedrills about their current users and who their ideal user would be. They expressed that their ideal user would be a newcomer to debate. The founder wanted their website to introduce a newbie to free resources and a trial of online tutoring. Upon successful sign up, Debatedrills would then upsell the newbie onto a competitive debate team or semester-long class.

This meant that the landing page should be targeted primarily towards newbies, with alumni as secondary users. 
RESEARCH

Their e-commerce experience does not appear trustworthy and fails to clearly describe each service that is offered.

  • Redundancies that may jeopardize SEO: There were numerous instances of duplicate content across the website. 
  • Lack of clarity: Images on their website made it appear as if their programs are hybrid/in-person and not online, even though all their programs are administered entirely online. Furthermore, the site was text-heavy and lacked visual hierarchy.
  • Lack of value proposition: There was no clear selling point as to why a student should choose Debatedrills over traditional in-school debate teams. 
RESEARCH

Based on heat maps, we learned that visual hierarchy and section length was most critical to the user experience 

Users often didn't scroll more than one page down: This was especially true on the home page.
Users were clicking on text that led to nowhere: Many of the plain text appeared to be links that lead to something useful, even though they are not. 
Club Team Checkout (PF), Heatmap, 07-18-21.jpg
Untitled.jpg
DESIGN GOALS

Provide a reliable online experience that is informative, yet concise enough to attract new students and retain current ones.

Due to the high price tag of Debatedrills' services, we want users to feel knowledgable and comfortable enough to make a purchase on the website.

We do not want to overwhelm the user with too much text to read on the website because it would feel too spammy. At the same time, we want to provide users with as much information as possible, so that they can make an informed decision about their purchase.

Finding the proper balance between simplicity and comprehensiveness was key.
FINAL DESIGNS

With each iteration, the home page displayed more information with less scrolling.

Heavy text was replaced with compelling visuals, which are designed to draw the users focus to laud worthy metrics and the award-winning that services Debatedrills offers.
Landing Page 1.0.png
Landing Page 1.1.png
Landing Page 1.5.png
FINAL DESIGNS

A clean, dashboard that a student can use to return back to regularly.

Debatedrills wanted to position themselves as a "hub" for debate-related resources. With enough resources to browse through, it would ensure that students would keep coming back to their website and eventually make a purchase. In order to organize the numerous resources they own, I designed a dashboard which would allow students to easily locate information based on topic.

**I used Figma's auto layout feature to create this.
Dashboard 2.1 - Free User.png
Course Materials 2.0 - Debate Practice - No Nav Bar.png
FINAL DESIGNS

The navigation menu was redesigned for better organization and clarity.

Below are a few of many iterations of the navigation menu I designed. We decided to place greatest emphasis on the "schedule a call" button in order to promote more sales leads.
Frame 301.png
Group 280.png
Frame 301.png
Group 274.png
Frame 301.png
Group 271.png
FINAL DESIGNS

I also worked other portions of the website for visual design purposes only.

I redesigned the sign-in page, careers page, pricing page, and more. With every page I worked on, we added as many call-to-actions as possible.
Careers Page.png
Frame 210.png
Desktop - 5.png
Frame 10150.png
Frame 10144.png
Frame 10146.png
Frame 10145.png
Frame 319.png
iPhone 14 & 15 Pro Max - 14.png
USER TESTING & RESULTS

After launching the new website, the number of average users substantially increased by 126%. 

Screen Shot 2023-01-26 at 8.21.46 AM.png
Screen Shot 2023-01-26 at 8.20.27 AM.png
REFLECTIONS

Understanding your teammate's strengths and weaknesses is important for effective collaboration.

- The largest constraint I encountered was having to design in accordance with a software engineer's skill set. Many of my initial designs did not receive a green light simply because they were too complex for the engineer to code. To remedy this, I simplified my designs so I can ensure that our solutions were both achievable through code and still able to meet design goals.

- Prior to this project, I did not understand the significance of UX writing. So much of this role was outside of user flows and wireframes. The primary focus was on creating meaningful infographics, refining choice of wording, and improving text placement/emphasis. 
bottom of page