Beagle Learning: A Website Redesign

Objective

The Edtech startup Beagle Learning contacted me to redesign their homepage and three landing pages. Their existing site was geared toward higher ed institutions, while their current client base also included corporate and defense industries. I worked with their CEO and Sales NS Marketing Lead to scope the project and delivered multiple iterations of mockup for their development team. My background in Education and Design made me a good fit for the project and their goals. Beagle Learning’s software uses inquiry-based methods and AI to help instructors gain insight into their students’ questions.

UX Design Process

I completed the project during the COVID-19 outbreak, which required me to get creative with my communication and design reviews. I scheduled regular check-ins and shared sketches, ideas, and mock-ups using Slack and via screen sharing on Zoom. While these were challenging circumstances, I felt like I had access to the people I needed, and we were able to communicate effectively despite these challenges.

The Problem

Beagle Learning’s existing site had a number of issues that needed attention. Primarily, there was only one place for them to direct sales leads, and that homepage was designed to appeal to the Higher Ed industry. So we needed three additional landing pages, each one for the Higher Ed, Corporate, and Defense leads they were developing. These three groups are very different, and they would need industry-specific site content while keeping consistency around style and design. The other main issue was that the site existing site struggled to really explain to users what the actually software does. They relied on a video to explain the software, and the quality was low.

User Interviews

The project was scoped for rapid design, and my time on research was somewhat limited. But I was able to speak to two individuals from the defense industry who were both able to offer tremendous insight into the users who would be interacting with the homepage and landing page. I learned that most users would be on desktop, but that there could be issues with the firewall preventing access to the site. They also mentioned that lot of the jargon used in the education space wouldn’t resonate with the defense instructors who might visit the site. Finally, both users spoke about the existing site’s inability to quickly explain what the software does and how it does it.

Competitive Analysis

In order to better understand the climate Beagle Learning was operating in, I performed a competitive analysis using a combination of higher ed, corporate, and defense sites. I reviewed 14 sites and gleaned these essential elements to incorporate for the Beagle site:

• Clear navigation up top for our three distinct groups (for higher ed, for corporate, for defense, etc. )

• Calls to action for the three groups above the fold if possible

• Trusted partners listed prominently

• Testimonial section

• Solution speak to help orient visitors to how Beagle Learning will solve their problems

• Effective use of video or graphics to explain how the software works

Problem Statement

Relevant Corporate/Higher Ed/Defense Members need a way to explore what Beagle Learning has to offer them on their homepage and landing pages because the existing pages aren’t well-aligned with current value propositions and pitch language.Solution

We believe that by building a more targeted set of pages for relevant Corporate/Higher Ed/Defense members, we will achieve a higher rate of engagement and partnership. We will know this to be true when we see increased interest and response rates to setting up a meeting.

Feature Prioritization

I used the MSCW Method (Must, Should, Could, and Won’t Haves) to establish which features to incorporate into the project. Research and client meetings indicated that users needed the following features to achieve our MVP:

Wireframes

I created a series of wireframes to communicate ideas about layout with Beagle staff. These wireframes excluded color, images and copy in order to focus on essential layout issues early in the design process.

Final Draft

Contact Form

I incorporated a contact form at the end of the homepage and landing pages for booking a free consultation or asking a question, and I added a touch of drop shadow to the send button to make it stand out. The footer is minimalist, on-brand for color, and reflects the new top navigation.

Future Considerations

The following elements would benefit from further iteration and testing:

• Test out language on potential customers in order to better describe the software and what it does

• Develop more compelling graphics representing the software and the Beagle Learning Inquiry Model

• Perform general user testing on the site. There was no time allotted for testing, and assumptions weren’t able to proven or disproven after the design stage was completed.

• Embed their Twitter feed in order to keep content fresh. The blog was outdated, but the Beagle Twitter feed was regularly updated and had some really interesting content.

• Establish better sense of users overall, as well as their wants and needs.

Project Takeaways

I had a tremendous amount of learning opportunities on this project. While I was intent on being the design/project lead, I had to strike a balance between gathering customer data and client feedback, and moving forward to complete the project under the deadline. Beagle Learning appreciated the fact that I developed the project and research plan, but I should have asked more specific questions up front about what they were looking for. At some points, they weren’t exactly sure, so it took extra time to show them mockups, gather feedback, make changes, gather more feedback, etc. Some team members had different feelings about design elements, and I developed skills around establishing alignment before moving forward. Working with a startup means your time is limited, and this was a completely remote project, which meant I had even less time to collaborate than I would normally.