UI Case Study | Terra Mars

Overview

Timeframe: 3 Weeks

My Role: UI Designer

The Team: Adam (UI), Tiffany (UI), Irene (UI), Jacob (UX), Alex (UX), Ethan (UI)

Tools: Sketch, InVision, Illustrator, Photoshop

Deliverables: Responsive Web design (web and mobile high-fidelity prototypes)

UI Methods: Gut Test, Domain Research, Typography, Illustrations, Mood boards, Logo Design, Visual Language, Colour theory, Style Tiles, Style Guide, High-Fidelity Prototyping

Introduction

“Aquaponics ending world hunger on Earth then eventually Mars”?

I know, that is a lot digest to start a case study. First and foremost, Let’s get started with this…

“What is Aquaponics”?

Aquaponics is a a system of aquaculture in which the waste produced by farmed fish or other aquatic animals supplies nutrients for plants grown hydroponically, which in turn purify the water.

Our client, Dr. Mazur, wanted us as UX/UI designers to make his dreams turn into a reality. His plan is to eventually end world hunger, restore biodiversity, and provide many other solutions with the use of aquaponics facilities. Eventually, decades down the road, he wants to take the aquaponics facilities to Mars. The main goal for us as designers, was to educate the user on aquaponics. From the UI side, our goal was to generate excitement and intrigue users for a topic that they may not find interesting.

Research

Based on this project being a more educational focused website towards aquaponics, we wanted to make it visually appealing and fun for the user. In our first meeting, we asked Dr. Mazur what mood he wanted the user to feel while going through his website, he told us he wanted the user to be excited for the project.

We then asked him if their was any websites he liked and he specifically told us he liked Apple and how it was clean with a lot of white space. This gave us a good idea of his design direction.

Persona

Based on the persona we created, we knew that the user may not have awareness about alternative farming and the global hunger crisis. With that knowledge, we got an idea about which user we are designing for.

20 Second Gut Test

Knowing that we needed to educate the user on the topic, we drew design inspirations from cryptocurrency websites who have to educate their user on what cryptocurrencies are. Another reason we drew inspiration from these websites was because they showed plenty of illustrations, since we weren’t provided with any imagery, we thought that illustrations would be the best alternative.

Gut Test

Based on these results, we proposed two style directions.

The Design Process: Two Style Directions

Based on the presentation Carl presented to us in our first meeting with him and the business plan he provided us with — we came to the conclusion that the why of our design was: profitably ending world hunger and building a sustainable future by driving excitement for aquaponics.

Organic Style Direction

We thought it would be a good idea to give Dr. Mazur two style directions based on the two directions he rated highest from the gut test. The first organic direction is focused more on the green produce aspect of the aquaponics while still being clean and using white space.

Organic Mood board
Organic Sample Hero Banner
Organic Sample Style Tile

After we presented Dr Mazur with the organic style direction, we presented him with another style direction.

Futuristic Style Direction

Futuristic Mood board
Futuristic Sample Hero Banner
Futuristic Sample Style Tile

With this style direction, we wanted to convey the futuristic technological mood with Dr. Mazur trying to revolutionize aquaponics. This is the mood board we presented to him displaying the aquaponic idea, illustrations, and overall futuristic aspect.

Style Direction Decision: Futuristic

After presenting our two directions Dr. Mazur decided he liked the futuristic style direction with his website and brand.

With that we went more into depth with our futuristic design inception and style guide.

Visual Language

Space and Movement:

From the 20 second gut test - as previously mentioned, we knew that Carl liked white space, clean, and futuristic designs - similar to Apple and the cryptocurrency inspiration. We also realized that he liked the smooth movement throughout the website.

Colour:

We went with the Galaxy blue, a lighter aquamarine blue, and a contrasting terrestrial green to represent the technological mood.

Shapes:

Based on the fun and exciting mood Dr. Mazur was looking for, we found that slightly rounding the buttons was important to give off that mood.

Style Tile and Brand Guideline

Style Guide

Typefaces:

We decided on the font pairing of Futura as the header and Proxima Nova as the body to represent outer space and future. We felt that it aligned well with the Terra-Mars brand.

Buttons:

We provided the gradient to give the futuristic mood with the galaxy blue.

Icons:

We wanted to give off the fun and exciting mood that Dr. Mazur requested by making them rounded but also correlating to aquaponics with the leaves. We also added the gradient to stay consistent with the mood and design

Logo Design

Starting off, the UI team collaboratively started sketching logo designs trying to align with the Terra-Mars brand which included fish, leaves, and the futuristic mood.

Sketches

We then rated each others best ideas of logos and began to digitize them through illustrator. After we digitized them we pitched him five logos and got him to decide on the one he thought fit his brand.

Digitizing logos

Final Logo

Final Logo

This is the final logo Dr. Mazur decided on. This logo shows the connection between fish and plants by utilizing one fluid line. The gradient, which is from the selected colour palette intentionally flows from blue to green as it reaches the tail which are also leaves. Gradient and shadows to give it depth and add a futuristic look

We selected Futura for the typeface in the logo since it’s bold, sharp and futuristic, as reflected from our style tile.

When it came to bring the mid-fi screens that the UX team provided the UI team with, we did a lot of planning when it came to visual elements to ensure we gave off that futuristic style to bring feelings of excitement to the user.

Illustrations: We utilized illustrations to give a futuristic spin on a aquaponics.

Tech Patterns: Also included technology patterns as subtle visual elements to represent the new technology of aquaponics.

Lifted Cards: We wanted the user on the website to have the feeling of floating through space so we utilized lifted cards to appear as though they’re floating.

Prototype

Desktop Prototype

Mobile Prototype

Conclusion

Highlights:

We felt like we met the clients needs of the user and business. The user must learn about aquaponics before doing any financial crowdfunding investment into the company. Dr. Mazur seemed to like our website design.

Future Considerations:

  • Section anchor at the top of pages to reduce amount of scrolling
  • More illustrations and animations

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store