K12 Insight provides customer service software and support for K-12 schools across the country.
THE PROBLEM:
K12 Insight’s current website had several problems that needed to be fixed. Overall the pages lacked visual consistency confusing users. The pages also lacked consistency with the current positioning of K12 Insight’s mission and their products. The current messaging of K12 Insight needed to be reflected on the website.
The pages had way too much content and buttons overwhelming and confusing users. The homepage had a 73% bounce rate due to the amount of content presented from the onset. The homepage lacked a narrative flow that told a story and prompted users to explore other pages.
The website was not optimized for mobile creating a negative experience for mobile users and losing a potential entry point for new customers.
THE SOLUTION:
The website redesign had three goals that needed to be accomplished.
-create a narrative flow that explained K12 Insight’s mission and how their products propelled their mission (Simon Sinek’s golden circle of “Why, how, what”)
-design a website that is consistent with messaging and visual style.
-design a website that is responsive on any device
IMPACT & RESULTS:
-Conducted user interviews to hone in on accurate messaging that K12 Insight’s user were familiar with
-Conducted user testing to test the website’s functionality
-Designed a simple UI experience that removed unnecessary clutter and kept essential content
-Designed a narrative website using Simon Sinek’s, “why, how, and what”
-Bounce rates reduced, web engagement increased, and mobile engagement showed significant improvement.
The current website had several problems that needed to be fixed. Several of the pages lacked visual and functional consistency. There were several pages that severely lacked user engagement and it was mainly due to looking vastly different from each other.
The second problem was a large amount of content per page. The home page had a 70% bounce rate and mainly due to the inundating content above the fold. The hero section had several CTAs and cards that were competing for a user’s attention. The messaging and flow of the website was confusing.
The third problem was that the website was not responsive. A lot of the online content was not optimized for mobile and made it difficult to read and access on mobile devices.
Before going into low and hi-fidelity designs, I first began sketching ideas on paper. I sketched several variations of what the layout and user journey could be before deciding on strong options. This gave me the freedom to explore many solutions before fully investing in a couple of solutions.
Low-fidelity wireframes we designed in Sketch to hone in on the user journey and element placement.
The new designs incorporated new corporate branding. The new pages were consistent and shared similar functionalities. I also simplified the user journey by removing unnecessary buttons/links and providing relevant resources. I used fun illustrations and bright colors to help push K12 Insight’s narrative.
I created a design system that allowed other designers and developers to quickly create new pages using consistent visual elements. The design system included elements for both desk and mobile devices. The design system was a working system that was constantly updated and used as a guideline for acceptable web practices.
Designing a responsive website was a major goal for the website redesign. Most of the users accessing the website were desktop users, but there was still a significant amount of mobile users. K12 Insight was losing a good amount of users by not providing a mobile-optimized website. I wanted to design a website that was optimized for all devices. I wanted to create a positive experience for all users and increase user engagement.