top of page
Debatedrills
OVERVIEW
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.
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.
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.
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.
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.
USER TESTING & RESULTS
After launching the new website, the number of average users substantially increased by 126%.
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