Product Landing Page for
Genius of And
Introducing the brand, product, and capturing leads through an informative and engaging landing page. View live site.
The challenge
The startup Genius of And is a personal assistant service centered around food with an ambitious mission of saving time, money and stress on meal planning, recipe management, and grocery fulfillment for duel-income working families. With the mobile webapp near completion we needed a consumer facing product page that introduced the brand, explained the value, product features, and provided a way for people to sign up to get on the wait list.
Our solution
Responsive product web page explaining the value and features with easy sign up process.
Focus on understanding
Clear, hierarchal and logical information architecture focusing on the “why, how and what” to introduce the brand, value, how it works, getting started, product features and wrapping up with FAQ’s.
Responsive and engaging
The responsive, mobile layout provides quick access to important content and the call to action. An animated, engaging experience takes advantage of larger screens utilizing screen area and the processing power.
Customer focused
GeniusOfAnd’s mission is to make life easier by saving time, money, and stress so we focused on portraying the customer experience through people focused imagery, tone and content strategy.
Quick and easy sign-up
One clear call to action is persistent at all times with a short form to optimize lead generation and provide users with a simple way to sign up on any device.
Desktop Experience
For larger screens we created an animated and engaging landing page utilizing screen real-estate and the processing power of desktop computers with the goal being introducing the brand, the value, the product, it’s features and answering important questions without overwhelming the customer. We also wanted to capture leads and provide access to the wait list so a clear call to action and form was a necessity.
Video Walkthrough
Check out the video of the page in action with animations and interactions.
The process
Establishing the Information Architecture
It was imperative that we simultaneously introduce the brand, product features, how it works and how to get started in an easy to digest and creative execution. Working with the founder, we established an IA outline that communicated the “why” of the brand, the “how” we do it, and the “what” the product offers in a single scrolling landing page with simple to understand headlines and conversational tone and content.
Customer focused content
We established a design system with customer focused principals like always on-boarding, faster than doing it yourself, and keep it conversational so the imagery and content needed to reflect these. The primary persona is duel-income working parents with children so we chose images that reflected the experience of cooking together and relaxing together since the primary value proposition is to save time, money, and stress on meal planning.
Building the experience
With the IA outlined and the content strategy established we brainstormed the best way to quickly and effectively introduce the brand and product features with a clear CTA for signing up. Our solution was a single scrolling landing page with persistent sign up button in a fixed header bar. We chose simple HTML with lazy loading for images and subtle animations as the user scrolls to keep them engaged with each section. Product videos, screenshots, and FAQ’s help with understanding product features.
Simple Sign Up
The sign up process had to be quick, mobile friendly and accessible throughout the page. We created a short two step form that initially captures required information with an optional step to invite friends or co-workers to join the product wait list.
The Results
User testing performed well with users understanding the brand value, uniqueness and product features. The comparisons between meal kits and grocery fulfillment services helped understand the difference between this product and competitors in the domain. They also liked the simple signup process and imagery.
Development framework
- HTML 5
- SCSS, GSAP
- jQuery
- Sendgrid API
UX deliverables
- Information Architecture
- Visual Design
- Product video
- Content Strategy
- Email Confirmation Design
Design & prototyping tools
- Sketch
- Photoshop
- Invision
Testing
- Gorilla User Testing
- Performance Testing