KAHOOTS LANDING PAGE DESIGN

Skills: User Research, Adobe Illustrator, Wireframing

 

Kahoots is a contact management app that allows users to connect to vendors recommended by their contacts.  I was part of a four-person design team that worked with Kahoots' founders to create a landing page for the newly-launched app during the project phase of my time at Designation's  UX/UI design

MARKET RESEARCH

For this project, my team adopted an agile design process which entailed daily stand-ups and scrumboarding to visually communicate and allocate responsibilities.

We began the project by trying to understand the joys and frustrations of existing contact management systems and how to best narrate Kahoots' product benefits. To gain a better understanding of Kahoot's niche in the marketplace and how competing companies were explaining their contact management system's add-value,  we completed a comparative analysis of Kahoots current website vs those of other commonly used contact management systems. 

 

Persona Generation

Next,  we brainstormed users who connected  with a variety of businesses and would benefit from quick access to trustworthy referrals including  event planners (i.e., weddings, parties), realtors, home owners, home inspectors, and parents with involved children. We then conducted phone interviews with people in these areas, and, from our conversations, came up with user personas that we wanted to target with the new website. 

 

 

WIREFRAMING

Our team wanted to create an experience that would do a good job of explaining what  Kahoots  was and enticing viewers to try out the app. We came up with  a mood board with some of the best approaches we had seen during our competitive analysis and started brainstorming different sections we wanted to include in the new Kahoots app page. 

HERO GRAPHIC

We initially focused on creating a attention-grabbing hero graphic.  Team members individually brainstormed ideas and created rough sketches and then came together to pick out our favorite ideas, which we used to created computer-based wireframes in Illustrator. This was the idea I came up with and worked on prototyping, which centered on the main advantage of using Kahoots, quickly getting recommendations from your connections: 

SITE WIREFRAMES

We then used the findings from our comparative research and client review to narrow down the most important information to include in the site and came up with full-site wireframes for our client showcasing these different sections. 

 
 

Final Design

After several rounds of wireframing, receiving feedback, and redesigning, we narrowed our idea down to a final product, which centered around my original idea for the hero.   From there, one of my teammates on the development track at Designation coded out a responsive version of the site.