_PRODUCT NAME
Animal
_PRODUCT SCOPE
Animal is a product focused on providing access to plant-based living. The MCP will look to provide access by way of recipes and local food options. The product will scale to an ecosystem of products within this same intention. This project is current and underdevelopment – key features have been omitted from this showcase.
_PROBLEM TO SOLVE
Current apps don’t provide focused results for plant-based options at restaurants.
_THE CHALLENGE
There are a number platforms in place that 'can' do this (ie Google, IG, FB, Yelp & Happy Cow..), but this either isn't the platforms focus or if it is the focus could stand to use additional considerations. Creating a strong foundation that embraces an evolving market, as well as scaling the product will be challenging.
ROLE: PRODUCT DESIGN, VISUAL DESIGN
_KICKOFF
Ground zero.
Initially there were a multitude of questions regarding the products mission, strategy, aesthetic, launch and scaling. To provide direction and structure the information was separated into three tiers.
- Product – Research, Discovery, Ideation and Strategy.
- Visual – UI, UX & Testing
- Development – Handoff, MGMT & Sustenance
NOTE: I was going through the Product Design Course by Udacity during the early stages of this products design, the course provided extremely helpful information.
1
Internal
stakeholder
This project
was Self-Driven.
There were an array of questions ranging from: how to create a product for an emerging community to how to map levels of accessibility while tackling design. A major assumption to verify was if users were interested in what the product was to offer. A survey tested prospective users to confirm or deny the products personal value.
Inquiring minds..
With the survey confirming that a majority of the tested users found the product valuable. There was additional insights provided from the survey. There appeared to be a social element to consider, such as: social nights, deals/discounts and social awareness projects.
Non-Linear
The process moved gracefully into idea generation by way of questions, assumptions and potential solutions. The ideal was to capture creative concepts and potential outcomes to help drive the UI.
NOTE: may have gone a bit overboard w/ the post–its. ?
Visualization
Sol LeWitt "the wall drawing can differ significantly with each realization."
Create a market-worthy product.
A fair amount of time was dedicated to re-imaging what a plant-based product would offer. There are strong ambitions to create a product that both re-imagined the interpretation of plant-based products and could adapt as the landscape scales.
Creating a market-worthy product is a nice sentiment but what are the tangibles? Authenticity is a brand focal point, thus synthesizing the user and products mission are key. This made the strategy simple: Focus on the conversation between the user and the product.
_STATE INTENTION
Design a product foundation that portrays the MCP and snap shots of scaling. Design with key focuses of accessibility, motion & ease of use.
_VISUAL IDEATION
Icons & Visual Perception
Coupled with being a common design pattern among products, icons assist in clarifying communication and meaning[*]. Google's Material icons were utilized to convey this translation. Material Design principles apply.
NOTE: Creating custom iconography for this product is a future consideration.
The typeface needed to have a certain air about itself, or style and confidence – coupled with legibility that could fluidly grow with the brand through its phases of development. As thee monospace of monospaces, Space Mono was chosen to convey this. It's 'eclectic and modern with a retro-future voice.' It has distinction, adapts to its environment and is self-sustaining.
Typeface: Space Mono
Commissioner: Google / Google Fonts
Year: 2016
Designed by: Colophon Foundry
4 Styles: Regular Mono, Regular Italic Mono, Bold Mono, Bold Italic Mono
Coverage: Adobe Latin 4
Classification: Monospaced Sans Serif
URL: fonts.google.com
Color
I broke 'plant-based' down into three key focuses with one supporting focus. The focuses consisted of environmental, ethical and health. Colors were chosen based on these three principles.
Material Design principles of hierarchy, legibility and expression were guides for choosing colors that were characteristic, meaningful and accessible. A dark theme was set as the standard for device energy efficiency, ease on the eyes and brand aesthetic.
NOTE: Dark theme as a standard needs to be tested with prospective users to consider astigmatism, accessibility and inclusivity.
Air & Spacing
This being the second pass at this design system allowed for curation and refinement. The initial design felt inundated and suffocating, in that all pixels weren't intensional. This created an opportunity to tighten the design and create intension thereby allowing the design to breathe.
I followed the spacing methods of Material Design to assist in providing some structure and consistency within the design.
What's up w/ the texture?
Being an appreciator of Paula Scher and Barbara Kruger, I often wonder if there are unique ways to incorporate raster-based texture elements into digital design – leading to a visual language of sorts, that can be felt (or a perception of feel). I found brilliantly executed inspiration from Rare w/ Google, SPAN and A29parment from the Design Department @ Kyungpook National University.
The texture needs to cover a bit of ground, flow with the UI, not interrupt content and be intentional with a discoverable story-telling element. Ideas of gradients, paint and charcoal were explored. Which led to an idea of conveying texture using plant patterns. Apart of the products mission is to expose the versatility of plants. Ergo by showcasing a variety of plant texture or items bred by plants as a base to tie the variables together – this could solidify a story element. But how to visually portray this without being rudimentary or overly dramatic became an additional challenge.
NOTE: Though progress has been made regarding the products visual texture this cue requires further exploration and is currently unresolved.
Manipulated imagery
Photographed imagery
NOTE: The 'MAL' in the branding, colored the way is it, is not ADA compliant and is difficult to read. This requires further exploration.
Basic flow
Listed out touch points for a basic flow to give structure to how a user might move through the app, though this is hypothetical. A usability test needs to be perform as elements of the products framework/UI are further refined. Below is an example of the build out for onboarding, settings, recipes, shop and news.
NOTE: Some information has been purposefully unclear in the photo.
Paper Prototype
I tend to advocate starting designs in some form of digital program as this gets the process started quicker – not the case when designing UI. This maybe a given, but paper and ink prevail on the onset allowing for less attachment to the design. This in-turn offers more fluidity to explore mistakes and obstacles. I'll generally spend a decent bit of time exploring visuals through paper before migrating to XD.
Mockups
Translated paper prototypes into lo-fi mockups. This phase outlined the framework and was able to catch UI traps or opportunities the paper prototypes failed to illuminate. Though user testing is preferred, UI cards are solid reminders of traps to look out for.
The mockups were built to iPhone X+ standards as this was a viable test option, (the device I own), likewise iOS is the supposed initial development platform[*]. An interesting challenge arose, I generally lean on Material Design standards which utilize an 8pt grid system, seemingly iPhone X+ isn't built to a grid system or not an 'even' number of pixel width (375 px w). This posed a challenge when building to the device but aided in considering how to build the framework. Began building by spacing between elements or a soft grid than to the specs of the device. Looked into how other creatives were navigating this obstacle and found a few others sharing their findings – but as product specs change, adapting a system to future proof the product needs to be further explored.
Though I am familiar w/ Sketch and am considering switching to Figma, Adobe XD is the current tool of choice. Super♥️ all the considerations they've been creating.
All mockups are built to similar specifications.
More Mockups
The image below showcases a screenshot from my artboard. Though the screens have been built to the standards above, this process is ongoing. Mockups that solidfy the products foundation and MVP are continuing to be developed.
_CRITIQUE & REFINE
Key Takeaways
Product on-boarding, settings and recipes sections were tested for feedback. It's preferred to test (usability) section by section before moving to wholistic testing. The key takeaways are listed below.
NOTE: This product is currently under development and key features have been omitted from this showcase.
1. Validate order of how things flow.
2. Show final level of selected path.
3. Remember ADA compliance.
4. Focus on MVP/ consider simplifying components.
5. How will video be integrated?
6. Proof of concept.
7. This is a dense concept, take baby steps, managable workload and don't dive too deep just yet.
Update 09/2020
I began further exploration of a new design direction. View the study here.
Next Steps
There is a substantial amount of design & testing needed to refine the MCP. Likewise, as time allows air for growth, new questions and discoveries arise that challenge what has been. As of Q3 2021, this research will be rebranded and incorporated into another product.
Thank You Kindly for Your Time & Attention
2021 Site Design & Content by Ricky Raboteau
Seattle, Washington
Email: rraboteau@gmail.com
Linkedin: @raboteau
Arena: @wu-ricky
Tumblr: @wu-ricky