Case study for

Genius of And

Creating the UX and design for a new meal planning and grocery fulfillment mobile web application.

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 limited resources they needed some heavy UX work to help establish the brand, design system, product features, onboarding, email marketing and assist with front-end Angular development.

Our solution

The design system

We created a set of universal design principles which we followed for a shared creative and functional philosophy. Angular Material was picked as a base UI framework for super fast prototyping to production development.

An approachable brand
With a set of design principals in place we chose a brand look and feel, tone of voice, iconography, typography, color palate and imagery that expressed a mix of sophistication and approachability.
Thoughtful onboarding

We needed to gather a good amount of information in order to provide an intuitive and personal experience. We designed a quick onboarding process that asked the bare minimum needed for a fulfilling experience.

Minimal experience for success

Through strategic workshops and user feedback we created a minimal viable experience and feature set that justified the $20 / month membership fee with a roadmap for future features and enhancements.

We created multiple mood-boards to explore different creative concepts and ultimately decided upon a “people focused” and friendly theme with conversational language and typographic style, simple icons, vibrant experiential imagery, a cool color scheme, and a few futuristic image effects to reflect the innovative nature of the product. We user tested this and received positive feedback.

Product screens

Below are a few examples of the product screens, on-boarding process, and finalized design currently in beta testing.

The process

The vision & Strategy

Strategy workshops established the core values, value proposition, design principals and vision for the future including a set of initial features being considered. We researched the existing market and used an elevator pitch exercise, triads, and storyboards to establish and validate the uniqueness of our product compared to existing solutions in the marketplace.

User research & personas

Once we had a set of core values and suggested features we did some gorilla user research to establish which of the features would be most beneficial to our users. Specifically we focused on their behavior, environment, motivations, and problems as well as certain quantitative statistics like demographics, etc. We created primary and secondary personas to encapsulate our findings.

Feature priorities & roadmap

Based off our personas needs and motivations we used the Kano model to establish a feature-set that must be achieved in order to be competitive as well as what features would most delight users and provide the best chance for success. We prioritized these features for MVP and established a timeline for building and releasing them.

The brand, design, & prototyping

With our design principals in mind, we created a visual identity which we established by exploring various mood-board concepts. We decided upon google’s material UI as a functional, repeatable pattern due to its excellent design thinking and rapid deployment. Next, we created click-through mockups of our app homepage, on-boarding, and product screens which we user tested on and validately and iterated as necessary.

Development & beta testing

Using Angular and material UI, we created a mobile web-app that we could quickly adjust and iterate on.  We also created an informative and visually appealing homepage that explained the “why, how, and what” of Genius of And and how to get started.  Emails were created and sent to an initial group of beta testers who have been using the product and providing feedback as we adjust and finalize MVP.

The Results

With a modest user base currently in Beta the overall response has been positive. The design, information architecture and ease of use performing tasks has also received good feedback. Once the full AI integration is completed the product will be ready for public release and will bring a unique and never before seen meal planning service to consumers.

Development framework
  • Angular 5 mobile webapp
  • Angular Material
  • Amazon Firebase
  • Google conversational A.I.
UX deliverables
  • Personas
  • Design system
  • IA and sitemap
  • Wireframes
  • Brand guidelines
  • Visual design
  • Email design
Design & prototyping tools
  • Sketch
  • Photoshop
  • Illustrator
  • Invision
  • Validately
  • Google forms (surveys)
  • Gorilla field testing

Question? Have a project in mind?

Get In Touch
Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google