Overview

Niwa helps people to grow herbs and produce in the comfort of their own home using connected technology which simplifies the growing process. Their current product, Niwa One, is a grow box that automates your plants lifecycle giving it everything it needs from light to water at the correct dosages. We were approached by the founders to refresh their brand through various platforms as they prepared for the launch of a new product in their growing IoT portfolio. Our team worked closely with the founders to develop new mobile, web, and branding designs.

Provided product rendering of the Niwa One along with the existing Niwa logo.

Niwa uses a mobile application to allow home growers to adjust Niwa One parameters like light and water cycles to customize the environment for their plants. Their team wanted to use the same application for the new product in their pipeline; however, as the app had not been updated since the initial launch of Niwa in 2015, it needed a facelift to feel more modern and intuitive, and to match the new branding they wanted to create for their launch.

The initial application Niwa published on the app store for customers to control their Niwa One.

Getting The Full Picture

Niwa is in the midst of pivoting their brand to cater to home cannabis growers due to the creation of a new product that solves a big pain point within that customer segment. Many cannabis growers wanted to have the smart capabilities of the Niwa One, without being constrained by the small size of the box, which only allowed for one plant to be grown at a time. Javier and Zachary’s answer to this problem is the Niwa Pro- a smart powerstrip which allows users to connect their existing cannabis grow setup (water pump, humidifier, light, heater, etc.) to control their crop from the Niwa mobile application.

Provided product rendering of the Niwa Pro along with the existing Niwa logo.

The launch of the Niwa Pro shifted Niwa’s focus to capturing a new target market, and the founders expected a monumental shift in their customer base from 30% cannabis growers to well over 70%. Because of this shift, fresh mobile, web, and branding designs needed to reflect this change to resonate more strongly with their new audience. However, with the Niwa Pro product launch date set in late June, the mobile application designs were clearly the most pressing.

Along with setting project goals and scope, our team performed a 20 second gut test with both of the founders to understand their visual preferences. Our team used the insights we gained to create a clear starting point for the core design principles that would guide our process. From these tests, we learned how much Niwa valued simplicity in design, and a focus on clear delivery of information. As our team dug further into the details, we fleshed out the needs of the growers that would eventually use the application, and began to fully understand how crucial it would be for users to have access to intuitive controls without visually distracting elements. 

After learning more about Niwa’s visual preferences, we reviewed the UX wireframes they provided to discuss opportunities for improvement and technical feasibility. These wireframes formed the foundation our team built upon to design the mobile application.

UX wireframes created by a previous Flatiron team and provided to us by Niwa.

Design principles

Our team created a set of rules to shape our designs based on (1) our detailed understanding of the customer-specific needs gleaned from our initial client meeting, and (2) the market research our team conducted on tech-based cannabis companies. These principles would exist as fundamental goals that each decision we made would be measured against to ensure the most cohesive delivery of our final designs.

We boiled down quotes and words that Javier listed as important in our initial client meeting to find actionable design terminology that we could apply to the product.

We conducted a simple word mapping exercise converging our research and client-derived information. Our goal was to sort through what we learned was important to our clients and their users, and mesh that information with what we discovered about industry best practices through our research. This wordmap allowed us to hone in on a tangible set of design principles.

Make it Second Nature

Similarly to how a Facebook user can figure out Instagram intuitively, this app should not rely on breakthrough ui patterns and instead should focus on intuitive use.

Keep it Simple

Users should not be distracted by vibrant stylistic elements. Use a clear layout system, controlled negative space, and a reduced color palette to direct the user where they need to go.

Information at a Glance

In order to best adjust grow parameters, users should be able to digest information as quickly as possible to make necessary adjustments.

Never Misinterpreted

Successful delivery of information is a life or death matter. Each metric and control should be clear, and all text should have a readable contrast ratio so users can care for their plants correctly.

Identifying key visual trends

Before we could begin creation of our first round of visual designs, our team wanted to visually assess similar products on the market to find trends that would be applicable to creating the Niwa mobile application.

We analyzed a collection of direct competitors, cannabis-focused applications, and various IoT products (i.e. Google Home) to learn how we could optimize our design style. Our goal was to align with our vision of a streamlined application with complex capabilities, as well as look for areas of opportunity to visually stand out from similar applications. We decided to look at competitors' applications through the lens of our already created design principles to discover trends that would be the most useful when it came time to create our visual designs.

Our research gave us a strong grasp on optimal UI patterns to implement for Niwa, and allowed our team to begin exploring various style directions to apply to the mobile application.

Carving a path forward

I proceeded to explore three divergent style directions based on both the trends we pulled from our competitors, and the guidance of our created design principles. With these directions in mind, I also developed an updated branding concept to present to our client.

My first direction targets the “underground” culture surrounding the growing of cannabis. I chose a simple color palette to reduce clutter, using vibrant green tones to draw users’ eyes to important information. I implemented darker, muted green hues in the background to align the application with company branding while symbolizing growth, nature, and ultimately a cannabis-centric feel. I created icons and buttons with a slightly rounded-off structure to make the design comfortable yet structured. Lastly, I chose a minimal, geometric sans-serif font to provide a tech-forward feeling while maintaining readability and cleanliness.

In my second design direction, I still used a monochromatic green as the primary color palette but focused on a lighter, unsaturated hue to provide a feeling of freshness. I created an open and airy environment by widely incorporating white and light-gray tones in the background. I implemented rounded corners to give an approachable and friendly feeling. I utilized high-blur shadows to give dimension to the design and make the buttons pop. The font I chose is a hybrid sans-serif which provides clarity while retaining a unique fresh feel.

In my final style direction, I took a step away from the Niwa brand’s primary color scheme by using shades of blue- reminiscent of the blue tinted lights often seen in indoor growing environments. I kept the color palette muted and ultimately dark to be easy on the eyes- especially in dimly lit growing environments. I utilized hard edges and straight lines to give the design a distinct and established structure, invoking the feel of a professional tool. Lastly, I chose a humanistic sans-serif typeface to create an experience focused on professionalism and readability.

The founders loved the color scheme and font of the first tile, stating that it created a uniquely branded experience that set Niwa apart from competitors on the market. They also were drawn to the structure of the buttons and layout in the last tile. Javier felt that it reminded him of laboratory-centric software which would confer professionalism and credibility to Niwa’s products.

I took the opportunity to refresh the Niwa logo as well, after hearing that our client felt it was a little outdated. As Javier and Zachary were fairly attached to the Niwa logomark, I updated its appearance while keeping true to its roots (no pun intended) by adjusting the line thickness and updating the color. I paired the refreshed logomark with a modern, tech-oriented sans-serif typeface to complete the new look. I also created three options for how the refreshed product logo could look for the Niwa One and the Niwa Pro.

The founders were pleased with the updated branding, but expressed slight concerns about readability (the “a’’ looked slightly like a “d”). They were ultimately enthusiastic though, and greenlit the process of integrating the new branding. After taking the feedback I obtained across all three of my tiles and branding designs into account, it was time to iterate. Based on Javier and Zachary’s interest in the color scheme of the first tile, I combined that palette with the structure and layout of the third tile that I felt best conveyed the updated brand image Niwa was trying to capture.

Converge and create

With a specific style in mind, I set out to create my first round of high fidelity designs. I focused on a few key screens to test with real Niwa customers sourced directly from the Niwa cannabis newsletter in order to make adjustments before creating the full prototype.

The designs I created tested very well with the first batch of 10 Niwa customers we talked to in areas like layout, color, and typography. However, the biggest takeaway from our initial testing was that some users were having a hard time reading form input sections, and some of the low-contrast list text. Although my designs satisfied an AA accessibility rating, I wanted to eliminate room for error, and articulate every piece of information as clearly as possible.

We presented our designs to Javier and Zachary with a focus on user feedback and areas of improvement. Both founders took the user feedback strongly into account and reiterated the need to make the application as clear and usable as possible. 

After discussing at length how to best increase user understanding, the conversation moved toward technical feasibility which we discussed directly with Adrian, the lead developer for Niwa. Due to the framework they used to develop their application, there were significant restrictions they needed our team to overcome during our design process. Some elements provided by the UX team on the recipe page like tabs to access different grow stages, or features like saving when a back button was pressed, were not deemed technically feasible. Our team put our heads together in order to overcome these hurdles in our next iteration.

The finished product

Before testing my screens for the second time, I edited my designs to accommodate the feedback I got from both users and the Niwa team. I boosted contrast across the board to ensure that all my text had a AAA accessibility rating as well as updating colors, shape, and text of some CTA buttons. I also added icons to help the user better delineate between different grow components. To solve the issues surrounding developmental roadblocks, I came up with a new design for the recipe page featuring arrow buttons to navigate between stages and a save button pinned to the bottom of the screen for easy access. In order to conduct task based testing with users through a sketch cloud prototype, I built out complete flows for the recipe and grow component sections.

The feedback I got from the final round of testing allowed me to make small tweaks to refine and polish the visual styling of the finished product. I slightly adjusted sizing and placement of some text as well as swapping certain icons to increase intuition among users. 

I updated the branding designs to convey the new Niwa colors as well as implementing a slight change in typography, namely the “a”. On top of this, I created mockups to convey how the brand should be presented on social media, and app icons for the mobile software. 

When handing off the final designs and branding assets to the Niwa Team, I created a design system in order to provide easily accessible download links to guide future designers and developers. The creation of this system was one of the first times I saw the fruits of my labor come to life by my adhering to a strict grid system and naming convention throughout the creation of this project. Overall, Javier and Zachary were very pleased with the final result and expressed their interest in working with me further to develop their mobile application, as well as their company website.

From mobile to web

With the extra time I was able to carve out at the end of the project timeline, I created a first draft of a Niwa marketing page that matched their new visual language for use in their upcoming product launch.

Both founders expressed their desire for the Niwa website to strike the balance of clearly conveying that the product is used for cannabis cultivation, yet not deterring users who might want to use the product for other means. Using the primary brand colors established in the mobile application, I created a simple landing page focusing on highlighting the Niwa Pro’s functionality and the benefits of the companion app. I used silhouettes of cannabis plants to convey the use of the product without explicitly overstating the message. Although I could not iterate multiple times due to the limited project timeline, I plan to continue working with Javier and Zachary to establish their brand and bring their product to market.

Future considerations

As our team compiled our deliverables and completed our final asset handoff, we provided information to better guide the Niwa development team when implementing the mobile application designs. The first thing our team pointed out is that there were a couple flows within the application (e.g. sign up, connecting a new device) that had not been built by a UX team yet. These screens would need to be designed in adherence to the provided style guide in order to create the most cohesive experience for the end user. We also combed through our user interview data to see if any additional insights could be gained from their target users. One area that surfaced was the need for a walkthrough tutorial for first time users. Due to the complex nature of the application, something like this will be necessary to flatten the initial learning curve.

Final words

Working with Javier and Zachary was an amazing experience, and both founders gave us extensive feedback through each step of our process. This project was a new experience for me for a couple of reasons. Firstly, I had never worked completely remotely with a client from start to finish of a project- but in this case it was necessary due to the Covid-19 office closures around the world. Doing so helped me develop my presentation skills over remote platforms like Zoom, and taught me that I didn't need to be in the same room to articulate my ideas clearly.  Additionally, this was the first project where I got the opportunity to create a completely new visual language for the company. Due to the unique nature of Niwa adjusting the majority of their target audience with a new product launch, our team was able to build a new brand experience from the ground up.