Meet Otto
An intelligent product management system that
knows what you need, before you even need it.
4 Weeks | Group Project
My Role: Ideation, Research, Deliverable Content & Design, UX/UI Design, Branding, Visual Design, and Protoyping
Introduction
The Mission
Subscription based services, like Dollar Shave Club, have revitalized how consumers are acquiring goods. However, the subscription service model leaves consumers with either too much product or not enough to last.
The Opportunity
The Beauty and Self-care is a space that is dominated predominately by brands for women. Brands that do operate in this space, such as Axe, provides certain products but none provide nourishing benefits for the skin.
On the other side, internet based subscription retailers, such as Harry's and Dollar Shave Club, have created brands that provide quality products but the subscription model has plagued consumers with too much product.
The Idea
What if there existed a men's skincare brand that was built for all types of skin and leverages their usage habits to manage product reordering?
Meet Otto
An intelligent assistant that manages household consumer products and removes the hassle of selecting, ordering, and maintaining those products.
Core Features of Otto:
-
Manages ordering of household products
-
Educates on the most effective manner to use products
-
Provides a nice friendship 🙂
Meet Otto
The perfect pal for your skincare needs
The Ideal Match
Otto
Otto manages products by connecting to smart caps that weigh the remaining amount of product. Once the amount of product left reaches a specific threshold, Otto reorders the product.
Using the collected data, Otto can provide helpful tips and suggestions to help the user use their products more effectively. This helpful education leads to helpful habits that the user can use to make the best out of their products.
Ascential
Ascential is a line of skincare products that work for all types of men.
Products:
-
Face Wash
-
Body Wash
-
Conditioning Shampoo
-
Beard Oil
-
Beard Balm
-
Beard Dentangler
Mobile Wesbite
The website for Otto is optimized for mobile. The website orients the visitor to what the technology is, to how the technology works, and to what Ascential is.
Once a visitor is interested in purchasing Otto, they can take the [Sk]intake Assessment to be matched with a line of products that are best suited for their individual needs.
[Sk]intake Assessment
The [Sk]intake Assessment is a quiz that matches each user to a specific assortment of Ascential products. Through a series of questions, the user builds a skin profile (shown via a character avatar) of themselves that is used to tailor a customized assortment of product.
For example: if the person selects that they have dry facial skin, the face wash is altered to include moisturizing properties to help combat this.
A Mobile Orientation
Mobile Wesbite
The website for Otto is optimized for mobile. The website orients the visitor to what the technology is, to how the technology works, and to what Ascential is.
Once a visitor is interested in purchasing Otto, they can take the [Sk]intake Assessment to be matched with a line of products that are best suited for their individual needs.
[Sk]intake Assessment
The [Sk]intake Assessment is a quiz that matches each user to a specific assortment of Ascential products. Through a series of questions, the user builds a skin profile (shown via a character avatar) of themselves that is used to tailor a customized assortment of product.
For example: if the person selects that they have dry facial skin, the face wash is altered to include moisturizing properties to help combat this.
I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.
Skincare 101
Otto Application
With the data that is collected from the smart caps, Otto begins to learn the usage habits. Overtime, Otto combines these usage habits with results from the [Sk]intake Assessment to provide helpful suggestions and advice about the most effective way to utilize the products.
Otto displays these tips through text, video, and illustrations.
Features:
-
Curated Tips
-
Usage Analytics
-
Shop
-
Account Management
-
Nighttime Theme
Exploration
Research, research, and more research
To disrupt the CPGs and Consumer Tech industries we needed to better understand this area. We researched the business competition, the current market, and technology that could support our goal of breaking the subscription model.
To get a better understanding of the intended audience, my team and I sent out a survey about skincare as well as asked random men about their skincare routines.
Key Findings
-
Majority of men surveyed lacked a skincare routine
-
Hesitation to subscribe to an online retailers because of weekly or monthly based reordering cycles
-
Technology is being used to provide users with a deeper understanding of how they are using their products
Competition Market Map
Ideation
Early Concepting & Inspirations
Once we had our direction we hit the drawing board (actually it was many many many pieces of paper).
We were inspired by brands such as Function of Beauty and Harrys to craft our new brand.
Various Images of Otto Ideations
Mood Board
Original Sketch of Otto Design
Sketch Scenario of Otto Use Case
Meet Miguel
Miguel came about when my team and I were looking to understand our core audience more intimately. He embodies everything about a millennial. He has a love for technology and believes that it is made to make his life easier, but he is also bogged down with the accumulation of excess product from subscription services. Having sensitive skin and a burning passion for a beard, Miguel truly wants a solution that will not leave his skin looking unloved.
Insider Tip: Miguel is loosely based RnB singer Miguel (give him a listen)!
Meet the Brand
The brand principles for Otto are Simple, Clean, Intelligent and Friendly. These values are at the core of Otto and each customer interaction.
Types
The font family is Monsterrat. This typeface embodied the brand principles of Friendly and Intelligent and helped create a trustworthy feel for Otto.
And Colors
The colors are meant to be similar to other brands but offer some variety. A primarily blue palette was helps evoke trustworthiness.
The activation colors were chosen to provide a sense of energy to the brand.
And Illustrations (oh my!)
The line illustrations are often used to convey information or to help depict a task. This style of illustration was chosen to give off a modern feel that was still friendly and approachable.
The illustrations also help users to understand information that they may not be familiar with (ie: using illustrations to represent the different hair types)
Logos
The logos were created to portray the brand principles and express the brand.
Insider Tip
The name Otto is a play on the word Automatic. The arrow symbolizes the core feature of product reordering and is placed at the end because ordering should be the last thing on your mind.
Otto Logo
Insider Tip
Ascential is the combination of the words Ascend and Essential.
Ascential Logo
Insider Tip
There's nothing here, but thanks for stopping by 👨🏾💻
Otto + Ascential Logo
DESIGNING & TESTING
Testing, Testing, and More Testing
The goal here was simple: make the app as simple as possible. With Otto handling all of the ordering of product, the ability to provide usage tips could take center stage. Each version of the application was tested and tweaked based on feedback.
Testing along the way led to many major discoveries like users wanting to see more information quickly and users not wanting to have too much in-app onboarding.
For each version, we aspired to test as closely to high fidelity as we could.
Early Otto App Infrastructure
Reflection
Dear Diary...
The task of creating an industry disruptor was a daunting feat, but my team and I survived and learned some great lessons, found some new places to get work done, shared some laughs, and learned some new tools.
Concepting and creating Otto was a challenging test that pushed me as a designer
My Role
I collaborated with my entire team on creating the strategy and concept for Otto. I worked with Meosha to design surveys, create the design for the personatest various parts of Otto. Meosha, Catherine, and I worked together to create the various illustrations UI illustrations. Individually, I worked on researching, diagramming, and concepting the technology that powers Otto, the UX/UI of the [Sk]intake Assessment, and the UX/UI of the Mobile Application.
Tools Used:
Sketch, Illustrator, Photoshop, Adobe Dimension, Invision, Overflow
The Team (All Experience Designers)
Catherine Gellatly, Elliott Hartz, Meosha Jupiter, Jeremy Stokes (thats me!)
