OUR PLANET, OUR WATER

Water has always been a popular topic, but more so in recent years with changes in legislation and a focus on conservation.

"Is water the gold of the 21st century?" — Paul Farrell

WaterWhys is an idea.

This is a story about a group of experienced professionals who got together to build a simple and free Web app.

WaterWhys is a digital product that aims to provide users with a simple tool to estimate how much water they consume, in their homes. To help users to discover different ways to save water, money and learn; plus share information about water conservation with others.

This article will discuss a design and research journey, from a team's perspective, to build a tool to help and educate the people of Ireland about their water consumption.

My aim is to share a step-by-step guide with others to do likewise, instructions, in a story-telling fashion, that anyone can follow.

Main Features of the Site

Following in-depth market research (see below), the WaterWhys website proposes to offer a trifecta of elements for the user, namely:

Feature № 1 — Calculator: The user is initially met with a practical and powerful tool, educating exact usage based on daily behavioral consumption.

The two main features of the site are assessment and information.

Feature № 2— Information: The calculator is followed by an array of tips and resources, designed to make people smarter on the topic of water consumption.

This element is underpinned by the calculator, prompting user assessment and re-assessment, encouraging life-long learning around the topic of water.

Feature № 3— Kids: The quiz is applicable to everyone but designed with children in mind. The visual element enhances learning with a 'fun' undertone thus capturing the next generation of water users.

The two major elements of WaterWhys are Self Assessment and Information Delivery to decrease water usage within the user's everyday life.

Identifying goals, to reflect user-research, is essentially the product strategy.

Product Goals

The product goals for WaterWhys is to create a reciprocal people-centered digital platform. It is envisaged that future releases will adopt a crowdsourcing theme. An open-source product will encourage and empower users to engage in the development and continuous improvement of a mutually-beneficial tool designed around a vital resource, water.

The four cornerstones that underpin this model are:

1. Service

This Goal relates to improving customer service satisfaction thus improving customer retention by including users as part of the product evolution.

2. Social

This Goal is about giving back to the community, raising awareness, promoting education, and sharing conservation knowledge through social participation.

3. Profit

While WaterWhys is a non-profit concept it is anticipated that in time the social value will enable the accrual of revenue through crowd-funding, selective advertising, and commercial support/commission.

Any funds raised will be either invested back into the site or other worthy water conservation projects.

4. Growth

It is forecast that accelerated expansion will occur through user participation and social media channels.

The potential for WaterWhys to become a self-sustained entity is highly viable, given that all people consume water and value is directly proportional to the number of users.

User Needs

Goals and needs were measured against the five criteria of SMART below:

The overall user goals are to Educate, Create and Collaborate, as follows:

• User Goal № 1 — Provide a platform whereby the user can learn about water usage and conservation through the information provided.
• User Goal № 2— The user can then apply what they've learned and begin to formulate their own ideas on saving water.
• User Goal № 3— Users share new ideas for the benefit of fellow participants.
• User Goal № 4— By sourcing products, tools and techniques users save money while conserving water.
• User Goal № 5— User participation leads to growth, increasing traffic and site value.

Site Goals

Site goals were identified, defined and recorded as follows:

• Site Goal № 1 — Create a user-friendly and appealing design. User-interface is sometimes sacrificed for a great design, however, both are of equal importance in this instance.

A well-designed site helps users navigate with ease. For example, the navigation toolbar is typically at the top of the page because users tend not to scroll down to find it unless there's a reason to do so.

• Site Goal № 2— Create a site with the appropriate audience in mind. Some sites just don't fit the target audience. For example, a colorful site with a retro theme may suit a design studio but it doesn't work for a law firm.

Insight into the target audience will provide the direction in terms of the aesthetics, consistent with the WaterWhys Brand.

• Site Goal № 3— Free-flowing user-interface for ease of navigation. Navigation is pivotal for a great site. A sitemap will determine page location and what items should be grouped and where.

Simplicity is key, according to Steve Jobs:

"Simplicity is the ultimate sophistication."

This ethos minimizes the amount of space while maximizing the amount of information with streamlined navigation.

• Site Goal № 4— Meet the wants and needs of the user. In most cases, a client knows their business and industry better than the development team, in this case, we're just 'testing the waters'.

The team gained insights by listening to the audience, an audience of potential users.

By working closely with a target audience, important items became clear, helping us to understand the difference between a 'nice to have' as opposed to a 'need to have'.

• Site Goal № 5— Site functionality: A basic website can transform into a great website with the addition of some unique features with the use of javascript or PHP. Future site revisions will center on user-benefits, enhancing user experience and enjoyment.

Research

In order to educate users on the subject of water usage, the team collated initial requirements from a user's point of view.

Consideration was given to what's of value to a single person, a couple, or entire household, as regards saving water, energy, and money, and how this can be achieved with an interactive tool.

Initial Requirements list

Critical Success Factors

The critical success factors for WaterWhys are based on research interviews with potential users to gauge their needs and usage within their homes.

The questions asked related predominately to water usage and the perception of the residents.

1. How many people in your household?
2. Do you think you use an excessive amount of water in a week?
3. How many times is the washing machine running per week?
4. How many times is the dishwasher running per week?
5. What would help you decrease your water?

Assessment

A lot of potential users didn't seem to be aware of their own water usage. They had some idea that they may be using water excessively but they have no way of actually gauging this.

The 'Water Calculator' will give the users a clearer idea, in real terms, of what they use on a week by week basis and let them measure this against an average scale of other users.

Information

Once the users assess their usage they can action ways to help decrease their consumption. Clear information and real-world tips and advice will be at hand to help them decrease their daily and weekly usage.

What came across from the interviews was that everybody was willing to decrease their water usage but were unaware of what to do or where to start.

The two major elements of WaterWhys are Self Assessment and Information Delivery on helping to decrease water usage within the user's everyday life.

Personas

Personas were chosen to reflect a diversity of approaches and opinions. This was important to capture because conservation without broad-based appeal is ineffective and counter-productive.

When devising personas and scenarios it became abundantly clear that water conservation, especially in the light of future usage-based charging, is something that will affect all indiscriminately.

Therefore the onus on the team was to think realistically and broadly with regards to the multiplicity of user types who would find the ease of access and utility beneficial.

Functionality

The content was chosen for the Webapp site with ease of use in mind — the simplicity of access to pertinent information.

This approach was selected to foster repeat engagement among users and anything which could be experienced or construed as a deterrent to engagement was to be avoided, designed-out, where possible.

One of the assessment metrics for success will be if repeat launches or site visitations can be recorded and cataloged, but that's for another time.

Brand And Design

During ideation development, our initial design concept chose to base the layout for the website in a single page format.

"Design thinking can empower the team to be intuitive and logical at the same time. Design thinking enables team members to be more creative to recognise new patterns in transforming environments."— Dr Mehmet Yildiz

Single page websites lend themselves well to story-telling of a product and the user's interaction with it. They also bring a sense of continuity across devices, which is important to the brand aesthetics and identity.

We researched designs for single page websites to see how the layout interacts with content. See some examples below.

In the backlog document, a logical order of content was recorded, along with requirements. These were compiled as a group based on best practice UX principles — to create a website that's simple and easy to read, with effortless navigation.

The color scheme for the website was taken from the logo palette, discussed below. By continuing with the colors used in the logo, a sense of brand cohesion was on each page.

"Simple is better than complicated. This is a no-brainer for all of us." —Miki Ishai

We designed the individual elements in such a way so that they would look similar when viewed on different devices, so we included elements that could use HTML 5 tags, along with drags, swipes and other gestures.

Designing for mobile-first included the main features on the mobile site, and expanded said features on desktop, as mobile users want quick, easy to access information at hand.

Logo

WaterWhys brand proposition subtlety conveys its purpose by encompassing three key undertones:

1. Water (droplet)
2. Education (Question Mark and 'Salmon of Knowledge') and
3. Conservation (Salmon)

Pairing the brand with a hot-topic in the public domain is a powerful manipulation of value. The message here is that WaterWhys is free and accessible to all — just like water (in Ireland).

Design Decisions

The team identified with the product, deciding on a name, by consensus. We used Trello to 'brainstorm' ideas. Each idea was posted and voted upon to establish a name that reflected the project and brand proposition.

As water is quite topical, a number of non-compete websites exist, but none whereby the user can calculate and obtain information on water usage in Ireland. This was our niche.

The team wanted to create something that would be instantly recognizable, so 'Water Whys' was chosen as the name of the water knowledge website. A responsive website evolved to help users to calculate, learn and buy water-saving products.

Define

The designers took the name and exhausted logo options, taking into account the three key components: water, education, and conservation.

Following this a discussion on color identified that green and blue underlined the brand affinity.

• Blue — Is the most calming of the primary colors.
• Green — To convey sustainability, the environment, and the Earth. Green is also associated with education.

Team Designers submitted proposals shown below:

Develop

The team agreed that the salmon design, proposed, was a unique choice for knowledge; enhanced by the droplet and the question mark, signifying the questions relating to water.

Feedback from the team and audience acknowledged that the fish shape was present (to the right of the droplet, separated by the question mark) in the droplet design proposed.

It was decided to progress with this concept.

The logo (above) was further developed, making the fish shape more defined, in as subtle a fashion as possible. The color palette chosen was aqua blue with a pop of orange and red, following which the team decided upon typography.

It was universally agreed that the font should be sans serif i.e. not too serious. Also, Helvetica rounded was suggested and agreed upon.

The team preferred the simplicity of this font, consistent with the brand, coupled with a creative feel, with a fun undertone with respect to the site.

Conclusion

Upon reflection, my thoughts and insights are as follows:

The team combined ideas well, ideas that resulted in a unique brand that's both corporate and family-friendly, reflected in the logo.

• Insight #1 — In my opinion, a Logo is vitally important in the digital world. A unique logo that's striking captures the essence of a Brand, a great Brand design.

The logo represents water, earth, our question about water and how, as a society, we can learn to conserve this valuable resource.

• Insight #2 — If a Logo can convey the essence of a Brand, words are secondary.

Also, the salmon of knowledge represents Irish focloir, adding a distinct dimension to the Brand.

• Insight #3 — I was fortunate to work with great designers, who not only delivered on #1 and #2 but also embedded symbolic meaning effortlessly.

The color palette is bright, expressing knowledge and the environment. The colors can be used in a fun way, for child-friendly activities.

• Insight #4 — Color evokes emotion and association by resonating with people on a deeper level; Beautiful design employs color in a way that is beyond words.

Lastly, dark greens and aqua's, are easily transferrable in a corporate fashion, for business information and product sales in the future.

• Insight #5 — Above all user-centered design was key. The research captured features and functions that users desired, which were delivered.

To learn more I'd recommend reading the article below by Dr Mehmet Yildiz.

On that note, I'd welcome your feedback in the comments below.

References

• Chand, K. (2020). Oceans x Design — Stanford d.school. [online] Stanford d.school. Available at: https://dschool.stanford.edu [Accessed 8 Feb. 2020].
• Cox, A. (2015). Blog: The seven critical success factors for mobile apps and services — TechSPARK.co. [online] TechSPARK.co. Available at: https://www.techspark.co [Accessed 8 Feb. 2020].
• Mallya, D. (2017). Eureka! Four Ideation Techniques To Get Your Team Thinking. [online] Entrepreneur. Available at: https://www.entrepreneur.com [Accessed 8 Feb. 2020].
• O'Halloran, S. (2013). Finn Mac Cumhaill and the Salmon of Knowledge | IrishCentral.com. [online] IrishCentral.com. Available at: https://www.irishcentral.com [Accessed 8 Feb. 2020].
• Theus, A. (2018). 5 Steps to a Winning Product Strategy | ProductPlan. [online] Productplan.com. Available at: https://www.productplan.com [Accessed 8 Feb. 2020].