The MATHletes Challenge is a nationwide math competition in Ireland and Northern Ireland in conjunction with Khan Academy. The competition is quickly earning a reputation as the premier math program in Ireland, and needed a website reflective of that.
The MATHletes site was long overdue for a revamp. The one and only version of the site was made several years back by a volunteer in two weeks. The original site had outdated, duplicated, and disorganized content; broken links; non-mobile optimized layouts; and confusing navigation.
Through research, it became clear that users dropped off at critical points in the site. The new design restructures the content and navigation, providing for a flow that focuses on the three main tasks: signing up, checking leaderboards, and completing weekly challenges.
The full site with all pages and content launched in July 2015. My client reported that the site is clearer and more user-friendly, making it easier for users to do the tasks and get the information they need.
I redesigned the MATHletes website from January to July 2015 while living in Dublin, Ireland. I knew the folks at SOSventures who ran the MATHletes Challenge and offered to redesign the site to gain more experience in UX-centered product design. I was responsible for the UX design, visual design, development, and implementation of the full site with all pages and content.
Defining Stakeholder Goals
First, I interviewed my client to understand her goals, vision, and metrics of success for both the redesign and the MATHletes Challenge as a whole.
My client wanted to clarify the mission of the MATHletes Challenge in Ireland. The site should be the hub for not only the competition, but all things Khan Academy Ireland. The redesign needed to explicitly state how Khan Academy, the challenge, and math in Ireland all relate.
Understanding the Users
Through user interviews, usability tests, and an analysis of Google Analytics data, I learned the following insights about the MATHletes user base.
First, users had trouble navigating the original site. Students and teachers turned to the site for different purposes. Students were mostly interested in checking leaderboards to see where they stood in the competition, and completing exercises so they could rise in the ranks. Teachers, on the other hand, were interested in the logistics of the competition—where it took place, how it mapped to the Irish curriculum, and how to incorporate it into their classroom. They were also the ones who urged students to sign up. The information architecture needed to be restructured so both groups could navigate with ease.
Below, the original site before the redesign:
The second biggest issue I saw was that users dropped off at critical points. Based on our previous talks, I knew that my client measured success by how many visitors actually signed up for the competition. According to Google Analytics, an unusually high percentage of users left the site from the signups page, interrupting and abandoning the signups flow.
Finally, mobile users made up a significant proportion of traffic. Nearly 40% of users access the site on mobile or tablet, yet the website was not optimized for mobile use at all.
Moving from Research to Site Design
At this point, I created goals for the project and brainstormed solutions in terms of design:
Goal: Clarify the MATHletes Challenge's relationship to Khan Academy and its mission in Ireland.
Design Solution: Provide separate introductions to the competition and Khan Academy. Add a section explaining how the Irish math curriculum maps to the U.S. math system.
Goal: Make the site more navigable.
Design Solution: Restructure the information architecture, and streamline the primary navigation. The three main tasks—signing up, checking leaderboards, and completing weekly challenges—should be clear and prominent. Be consistent across labels and directives.
Goal: Increase the signup conversion rate.
Design Solution: Guide users through flows in a holistic way. Always provide a natural “next step” at the completion of every major flow. Focus the user’s attention by using clear calls to action. Consider which information needs to stand alone, and when possible, move extraneous content to the FAQ page. Provide enough information to assist users without overwhelming them.
Goal: Optimize the site for mobile.
Design Solution: Use a responsive Wordpress theme. Ensure images scale for a mobile platform.
Building My Case
The results from the interviews, usability tests, and analytics helped me justify my design approach to my client. The results illustrated that certain parts of the existing site were redundant, confusing, and far too thorough for users’ needs.
I turned my research findings into personas and context scenarios so I could reference them throughout the rest of the project.
As it stood, the original site supported a series of seemingly unrelated tasks that all required a unique path starting from the homepage. I wanted to reorganize the site so that each task the user completed led naturally into the next task. I created stacked user flows to show the progression of individual tasks, all building up to larger goals.
After performing a content audit on the existing site, I concluded that much of the content was duplicated in multiple sections. I mapped the architecture of the original site and documented the redundancies.
From here, I could move on to site navigation. The original primary navigation bar featured eight elements. I removed four elements—two essentially served as helper pages that repeated existing information, one only applied during a very short timeframe, and the final element (the blog) was updated too infrequently to justify such prime real estate.
My new proposed site architecture featured five elements—About, Signup, Leaderboards, Weekly Challenges, and a new section labeled Help. Separate walk-throughs for parents and teachers are provided in both the Signup and Help sections—the two spots where information differed. I relegated a good chunk of information to the FAQ.
I followed an iterative design process of wireframing, prototyping, and actually developing the site. I made changes to the architecture and design during each iteration.
I created a series of annotated wireframes for key pages of the site on desktop and mobile. The homepage is still the main gateway to the site, according to analytics data, and so should serve as an introduction. The competition is explained and users are presented with a clear call to sign up. The new Signup section is drastically streamlined, and features a separate set of instructions for students and teachers.
Branding and Visual Design
My focus for this project was on user interaction and usability, not visual design. Even so, I did conduct some visual branding for the site. I wanted to convey the professionalism, youth, and trust associated with an education site. I relied on large imagery and clear content. I drew inspiration for the color scheme from the MATHletes logo.
Due to time constraints, I moved straight from the wireframes to buildout. Ideally, I would have conducted usability testing with target users on a low-fidelity prototype to ensure that my designs were working. Due to the short timeframe, though, my feedback primarily stemmed from sharing wireframes and early versions of the redesigned site with my client and conducting informal usability tests with non-target users.
The full site with all pages and content launched in July 2015. Although I did not conduct formal follow-up testing, the initial feedback was positive. I believe this site is much easier to use and navigate than the original version.
To conclude, here's an excerpt from my client’s recommendation on LinkedIn: “The site we have now is easier to follow, looks professional, and is simple to maintain. I would recommend Sanette highly for her professional approach, thorough process, and clean and beautiful output.”
UPDATE (DECEMBER 2015): In an exciting turn of events, the MATHletes Challenge has been adopted into a larger initiative with Khan Academy. Though mathletes.ie now directs to the new initiative, screenshots of my redesign can be viewed below.
Stakeholder Interviews, Domain Research, User Research, User Modeling, Information Architecture, Content Strategy, Low-Fidelity and High-Fidelity Wireframing, Prototyping, Interaction Design, Visual and UI Design, Branding, Web Development