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
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
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.
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.
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.
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. ?
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.
System menu Iconography
Icon Sizing & Layout Principles
FAB Sizing & Layout Principles
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
Designed by: Colophon Foundry
4 Styles: Regular Mono, Regular Italic Mono, Bold Mono, Bold Italic Mono
Coverage: Adobe Latin 4
Classification: Monospaced Sans Serif
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.
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.
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.
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.
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.
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.
_CRITIQUE & REFINE
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.
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.