Niwa
Niwa is a smart grow application that allows users to control parameters of their fully-automated at-home grow system. In this four week project, along with one other UI designer, I conducted competitive research, UI design, testing, and prototyping for Niwa’s new smart grow mobile application.
Niwa is a fully-automated hydroponic system that lets you grow plants in your home all year round. Seeking to refresh their brand and create designs for their new smart grow application, Javier and Zachary from Niwa came to us to develop a design direction that aligned with Niwa’s business goals.
Business Goals
Complete the development of Niwa Smart Controller app software and launch beta by June 2020.
Product Goals
Have a UI treatment applied to the app in order to establish and enhance the feel of the brand, and overall look and feel of the platform.
My Role
UI Design
Tools
Sketch
Photoshop
ZeroHeight
Invision
Team & Time
2 Designers
4 Weeks
Deliverables
Hi-Fi Prototypes, Design System
The Problem
The Niwa team came to us to create a refreshed app through introducing clean interface controls and reduced color palette while maintaining a simple navigation. Our goal was to update and modernize the existing Niwa application in order to make it appeal to a larger audience.
The existing Niwa application.
Niwa previously worked with a UX team to create a set of wireframes that updated and modernized their current app to accompany their new smart grow product. These wireframes gave us a starting point to apply a visual language that resonated with Niwa’s users.
During our initial client meeting, we learned that their development team wasn’t able to implement every aspect of the wireframes created by the UX team due to specific technical limitations.
These wireframes simplify and modernize Niwa’s current app structure.
The Niwa team thought the current look of the company’s app felt outdated, and gave us the freedom to go in a new visual direction while maintaining the current navigational structure.
We conducted a 20-second gut test with Javier and Zachary during the kickoff meeting, and we quickly understood their preference for a minimal, clean design with a darker interface, all while being intuitive and familiar.
We then synthesized our takeaways from the kickoff and conducted a competitive analysis. From there we created our design principles that became the foundation of how we structured our visual language.
Design Principles
Make it second nature
Similarly to how a WhatsApp user can figure out WeChat 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.
Javier and Zachary articulated a clear vision and design preference for the app from the start. This helped our team establish these principles early on in the design process, giving us a clear foundation on which to proceed.
Next, our team decided to conduct a visual competitive analysis. We studied competitors through the lens of our design principles, paying attention to the techniques competitors use to achieve the look we wanted to create.
Keep it simple
Color use is limited to one color per area.
Make it second nature
Bottom navigation is used for a familiar guiding experience for the user.
Information at a glance
Clear numbers and hints of color are used to guide users to important information.
Visual Directions
Style Tiles
With our design principles and brand goals in mind, I proceeded to build three divergent style tiles to test in user interviews before presenting to Javier and Zachary. The reactions and feedback I received helped guide my designs going forward.
Concept A
For my first concept, I decided to take a darker green color associated with nature and use it as a background color. A lighter, more faded green and neutral cream color are used for the typography, icons and buttons, and create a great amount of contrast against the darker green background. I used rounded buttons and icons, creating a familiar, modern look. I used Good Sans, a modern, sans serif typeface, in various weights to create hierarchy.
Concept B
In my second concept, I took a more minimalist approach in order to create a calming interface with little distractions that didn’t overwhelm the user. I used a limited color palette including a calm dark blueish grey as a foundation/background, and a sunny yellow and cream color for buttons, text and icons. The photography is subtle and calm. Active recipe buttons include a photographic background within a circular shape, with a color overlay, while inactive recipe buttons are black and white.
Concept C
My last concept utilizes a more practical, direct look. A faded bright green and white, used for text, icons, and buttons, creates contrast against a darker navy background. I used simplified icons to illustrate recipe categories such as Basil and Peppers, and rounded icons to create a modern feel.
Users responded best to tile C, with 67% voting that it was their preferred design. Interviewees stated that they enjoyed the plant icons and colors in this tile combined with the rounded buttons. One user suggested that this tile would look better with the green background from the first tile, as the green was appealing and matched up well with the Niwa brand.
When presenting our style tiles to our clients, Javier and Zachary responded best to Concept A and Concept C. They ultimately decided to move forward by converging elements of my Concept A with my teammates concept (below) to develop the first round of hi-fidelity designs.
Concept A
Teammates Concept
High Fidelity 01
With a direction in place, I created screens to test for desirability in user interviews. Users described this design as looking innovative while maintaining a pleasing simplicity. They also stated that they wanted to see more information in the dashboard.
Dashboard screen (left) through which the user can find their recipes (third from left) and set up their custom grow recipe (right)
Areas of Opportunity
While users appreciated the simplicity of the layout, they also wanted more controls and information presented on the dashboard presented along with corresponding and intuitive color choices.
Areas of Success
Users stated that the layout was simple, organized, easy and intuitive.
The different shades of green were appealing to users, as they stated that the colors were calming and pleasant.
Users stated that the typography was modern, easy to read and had a nice simplicity.
When showing the designs to our client, they said that although they liked the way it looked, the recipes section photography treatment and staggered buttons were difficult to implement and agreed with the users that there should be more information within the dashboard screen. They also wanted the recipe controls page to look similar to their existing app so that the experience was more intuitive for their current users by deleting the “Begin Growing” button and including three horizontal dots to indicate that the user can swipe between stages.
High Fidelity 02
For the final round of user testing, I iterated on my designs based on user and client feedback.
I made changes to the dashboard, adding more controls and color indicators, and overhauled and simplified the recipe pages so that it was more practical to implement.
Based on user and client feedback, I iterated on the design and created additional controls and color indicators on the dashboard and overhauled and simplified the recipe pages, making it more practical to implement. I also made changes to the recipe controls pages, altering the layout so that it was more similar to the existing Niwa app, and changed the outlined buttons to more solid, lighter color buttons to create a clearer call to action.
Takeaways
Users responded well to the updated buttons and corresponding colors, and the additional information and controls on the dashboard.
Niwa found the updates and additional controls on the dashboard to be an improvement and especially liked the colors of the controls, stating that they were intuitive and made the dashboard more dynamic.
Final Deliverables
Future Considerations
When our team handed off our deliverables, we found that there was more UX work needed to complete the app. Further work needed to be done by a UX team includes the login, sign up, connecting to a new device, customer support, and account settings flows. The visual language of these sections could be instructed by the design system I created.