Company:
CourseHorse
Role:
Lead Product Designer
Project Type:
E-commerce for local classes
1 Product Manager
5 Full Stack Engineers
2 QA Engineers
1 Marketing
2 Customer Service
1 Content Strategist
1 Sales
2 Operations
1 Account Manager
2 Co-Founders
We contacted some users to get feedback and audit the old site to start the redesign process. We decided to test on a new user’s journey because it had phases that overlapped with a returning user with fewer biases.
"This site feels outdated and untrustworthy."
The conversion from mobile visits was 0.1%, and the drop-off rates were also incredibly high, which placed CourseHorse in a tricky spot; it relied heavily on its email marketing strategies and Google Adwords, which most visitors enter via mobile devices.
After speaking with users, it became clear the mobile site had some issues. Mainly, the images were small, and class listings didn’t display essential details that would encourage prospective students to sign up for a class. The site had a lot of information but no definitive visual hierarchy.
For the redesign, we wanted to move the website to a code base that would be easier to maintain. The engineering team decided to refactor the existing code to resolve some of the major bugs and integrate the Semantic UI framework.
While working with semantic elements, I adjusted the style with a refreshed color scheme and other user interface tweaks. These changes pushed the site toward feeling more modern and trustworthy. When we tested the changes on new Coursehorse users, many shared that they liked the website, but more importantly, they would purchase a class through it.
The redesign also allowed us to address outstanding issues, such as adding an “attend” button on the Class Listings Page. We also separated the checkout process into smaller steps to avoid overwhelming the user.
The mobile version was built using adaptive design principles. However, with the new influx of portable devices, CourseHorse wanted a responsive site. After releasing the desktop redesign to several users in a two-tailed A/B test, I also began redesigning the mobile site.
The mobile site was a clean slate, allowing us to test more minor features. I decided to test collapsible sections and a PayPal button on the Course Detail Page. I also added larger photos to the Course Listings Page to attract a more tech-savvy demographic. Finally, we added a search that included extensive filters and worked better with Apache Solr (an open-source enterprise search platform). These additions helped the mobile site experience feel more like that of a native app.
We scheduled a second round of testing, during which we realized that some of the newer UI elements needed to be clarified. For example, prospective students didn’t even know they could select different start dates.
They also didn’t realize that some classes had multiple sessions on other days.
"There are multiple dates listed in the schedule; what day does this class start?"
To simplify this, we separated the schedule selector into two parts.We combined the map with the section to reduce repetition and provide a sense of hierarchy.
Two weeks after the mobile redesign was released, our Google Analytics revealed mobile conversion increased by 31%.
I learned a lot as a Lead Product Designer; working in a lean process was a nice change from the waterfall and agile methods I worked with before. I was able to flex my design skills and had to adapt quickly as a sole designer juggling multiple engineering streams.
Writing mobile in React wasn’t sustainable when only one engineer in the team knew how to use and maintain it. When the React Engineer team left, the team had to scrap most of the mobile site and rebuild it in a language they all knew.
The redesign did not increase conversion on the desktop when it launched. There were fewer drop-offs on the site, but converting users to purchase remained the same. Although users were buying more on the mobile site, it needed more time to see a significant change in overall profits. In hindsight, we should’ve run the test for a few more weeks. When the redesign launched, it was right around the time of the election results in 2016, which was an overlooked variable. Based on those results, the founders decided to redirect their efforts to expanding CourseHorse to more cities instead of furthering improvements to the site.