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 usertesting.com 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
- SCSS, GSAP
- 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
Testing
- Validately
- Usertesting.com
- Google forms (surveys)
- Gorilla field testing