KALEA Companion Mobile App Experience
Project Info: Sp22-ENP-0166-02-Computer Interface Design, Individual Class Project
Project Type: Mobile App UI Design, Hypothetical Consulting Project Connected Device
Project Timeline: 2 weeks (February 2022)
Skills and Techniques: Ideation, Wireframing, Rapid Prototyping, Branding
Background: Kalea is a startup whose mission is to reduce organic waste through its fully automatic internet-connected kitchen composter. Leveraging some initial feedback from the beta user group, KALEA is developing a companion app that will enable untethered monitoring and management of the KALEA composter.
OVERVIEW
Brief: Develop an initial user interface concept to run on an iPhone 13 Pro for a world-class KALEA app experience as distinct as KALEA itself. Deliverables include home screen plus a minimum of 4 additional screens (minimum of 5 distinct screens). The initial release of the mobile app will enable users to perform the following functions at a minimum, although you may add other functions that you think customers might value:
Monitor the progress and volume of the shredding and composting chambers and the removable compost collection tray
Monitor the waste chamber volume and set it to automatically empty when full or manually initiate emptying the waste chamber into the shredding chamber.
Understand their positive environmental impact (volume, methane gas reduction, etc.)
Understand what can and can’t be processed using KALEA
An added feature for user engagement (of your choosing)
Be alerted when the waste chamber automatically empties (if set to auto empty), the shredding chamber empties into the compost chamber, the composting process is complete and the removable compost collection tray is full
PROCESS
Stage 1: Discover
Branding: Design Elements
In order to retain the branding of KALEA, considered style elements including brand color palette, logo design, and font type throughout its website (KALEA is now Soilkind).
KALEA has an associated meaning of joy and the brand has strong environmental commitments, promoting sustainability. Its website has a fresh look and feel with simple and easy-to-digest information on how it works and most importantly, its impact, also supported with infographics, high-quality images, and a call-to-action language throughout.
The use of the Avenir font as a geometric sans-serif typeface adds to the simplicity as well as the minimalist logo with plain text and 2 leaf symbols on top, highlighting the emphasis on nature. The interplay of greens, yellows, and turquoise (main color) on a white background suggests an earthy, natural, and clean feel, which matches their brand identity and innovative product: Nature and High Tech United. Leaf symbols with smooth curves and simple and consistent visual icons also maintain brand identity.
KALEA Branding Elements
Stage 2: Define & Ideate
Unique selling point (USP): KALEA turns organic kitchen waste into nutrient-rich real compost in only 48 hrs, making home composting easy.
Aim of the mobile app: To effectively monitor and manage the KALEA product through its interactive mobile app.
It is important to make the KALEA app as intuitive and as easy to use as possible in relation to the actual physical product use. Customers should be able to understand how the product and the composting processes work. If they perfectly understand what is compostable and what is not, as well as the home composting process and its environmental impact, they would be encouraged to compost more and waste less. Composting is an extra effort on a user's side, but minimizing the time, effort, and energy spent on composting through both an innovative physical product and a well-designed app and highlighting individual impact to the environment would make it much more appealing and satisfying.
Visual Illustrations and Icons
Because the users of the actual product are not able to view how each chamber works and how the food is processed from the outside, the digital app could illustrate those concepts to help users visualize in an easy-to-understand way.
Visual icons and illustrations should maintain the simplistic brand aesthetic and identity, consistent with existing elements.
Design and development of simple visual illustrations and custom icons based on the original product and website elements
Design Considerations & Features
Reinforce KALEA’s modern, yet simple and clean brand identity
Color Palette: Maintain brand colors from the website
main color: turquoise
secondary color: orange (complementary to turquoise)
Brown, yellow, and green colors are generated using Coolors.
Theme: Maintain consistency with the overall theme of nature & organic waste through earthy colors and leaf symbols
Font: Maintain the simple and clean, sans-serif aesthetic that gives a minimal and modern feel which also achieves high readability and makes the design more accessible. (Avenir font)
Visuals: strong use of visual illustrations, less emphasis on written content
utilize visual illustrations/drawings of the original product
utilize visual icons available on the website such as food items
Font size: a minimum of 12px for readability
Color: Use WCAG (Web Content Accessibility Guidelines) compliant color themes with a good contrast ratio to ensure text on the background is easy to read and color-blind safe
Integration of various interactive features
Testing composting suitability
Scanning the food items via camera for confirmation
Searching item names via the search bar and then dragging and dropping them into the chamber illustration. If the item is compostable, it will be moved into the chamber and stay there. If the food item is not, it will bounce back. (interactive and gamified way of checking)
Viewing Impact
Blog posts to learn more about the environmental impact of composting
Liking and commenting features allow for a more interactive and social app experience
Composting data/statistics specific to each user (gamification element)
a dynamic graph form to enhance visual understanding
set an individual environmental goal and track progress and contribution to the environment
aim: motivate users to compost more and create more impact.
Notifications in chronological order for tracking the status of chambers
easy to access, constant on all pages (top right corner)
Stage 3: Develop
Below are 10 high-fidelity screen designs with labels that depict a wide range of important user interactions. The main functions include monitoring of different chambers, sending alerts, and displaying product details.
Click on each high-fidelity wireframe for an enlarged view.
Home Screen: Track Chamber Progress
Home Screen: Waste Chamber Settings
Home Screen: Compostable items
Test Screen: Search, drag & drop food items
Test Screen: Compostable food items feedback
Test Screen: Scan items. Users can scan food items by taking a quick picture or using images from the camera roll. After scanning, a pop-up screen indicates whether the item is compostable or not.
Notifications Screen
Impact Screen: Statistics. Users can track their accumulated composted waste and customize and set a goal for themselves
Impact Screen: Blog Posts. These blog posts are taken from the website of KALEA. Users can choose different categories and filter articles accordingly.
Account Settings Screen
Reflection
This was my first time working on a digital companion app that builds on a physical product. I realized the importance of understanding the product fully and the brand's identity as well as its vision and mission. The mobile app should complement the physical product and make the user's lives easier and more comfortable. I spent a decent amount of time researching the brand, its focus, and its positive contribution to the environment and brainstorming ways to make the app experience more engaging and playful for the users to motivate them to make compost, not waste. It was challenging to figure out how to visually communicate all the use-case and function-related features to the user, but through simple illustrations and an interactive approach, I think I was able to achieve that.