Jun 10, 2019
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.
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.
After we presented Dr Mazur with the organic style direction, we presented him with another style direction.
Futuristic Style Direction
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.
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
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.
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.
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
