Nautilus, Case Study
Anestis Goudas
UI, UX Designer

Nautilus, Case Study

An imaginary company that does underwater expeditions,
tours in coral reefs & famous shipwrecks.

Introduction to "Nautilus" Case Study

Based on the brief of “Nautilus” and since we are talking for an imaginary company, I built on my mind a specific scenario for the required tasks. Doing some research online, I found that expeditions like these happen mostly in islands complexes such as Caribbean islands, Indonesia, Canarias Islands etc. From the start I was stuck with the Caribbean Sea islands – I don’t know, maybe I was inspired by the famous movies series (“Pirates of the Caribbean”) with the exotic seas, shores, undiscovered treasures, reefs etc. So, I started thinking about how to build a company “Nautilus” that operates firstly on Caribbean Sea islands. 


While designing the application I thought of making “Nautilus” app more expandable into other regions as well. This is a feature that can support the scalability of the project: Users can search and book from a variety of regions and expeditions. In my scenario available are four. My other thought was to ask permission for the user’s current location so to auto-suggest the nearest available expeditions and regions to choose from. But it’s something that can be added on a future update and therefore I used the scenario with the only four regions, to build the project.

Branding

Logotype & Tagline

Thinking of the given brief project “Nautilus”, my mind thought of a submarine, the Jules Vernes’ famous book “20,000 Leagues Under the Sea”. Processing that idea, I started to think about what the book was talking about, but with no wish to go for something outside the main concept. I wanted to create a logotype/symbol for the application, related to the project’s name, Jules Vernes’ famous book BUT to design it in a way that looks modern, funny and minimal. My ideas were put on paper so to see the connection between the book, the app and the Nautilus company as my main subjects.

The first idea was to make a logotype/symbol combined. Nautilus with a Trident on letter N or T - but it was a concept that doesn’t help to create a strong brand, plus reminded to me that a trident is mainly the Poseidon’s symbol. Secondly, I thought of going with the submarine version: I wanted it, did my research but eventually, I dropped the idea. Again, I felt it was too obvious and I couldn’t make it look funny in a good way. Except these, is an element that had been used a lot.

My favorite idea came up as I’ve seen some pictures-illustrations related to the book, about men wearing that old divers’ suits outside the submarine. So, I took the helmet as a basic element, and for the fun part a huge eye, that with the right interactions and animations on the app, would make the fun part more interesting and catchy. It can be also considered as a modern robot, taken from that book. It can be build up as a story, like a character with history & future etc and can be the main character behind Nautilus general brand.

Creation: It was easy to build the diver’s helmet by using symmetric circles, based on some sketches I found online. So, this logotype combines the Nautilus name, the famous book inspiration, the app as the subject (diving, exploration) and the fun part (eye movement).

I had some others ideas too, like the classic red hat of Jacque Cousteau (the famous explorer) or the Nautilus word wearing a modern diving mask. I rejected them and thought of maybe they can be used online as supportive elements in various advertising campaigns.

Tagline: I came up with this idea from the main subject of Nautilus: Sea – Dive – experiences = adventures.

So, DIVE INTO ADVENTURES was my first thought all over and kept it until the end, building around it keywords inside the app, the buttons etc.

Nautilus, Case Study
Nautilus, Case Study

Color Selection

Choosing the colors of the app, my first ideas were to have a palette with Yellow, orange and some blues colors. Yellow and orange would have to do with the sun, the overall sunshine days those expeditions take place and the blueish colors for the sea and ocean. 

I eventually after some tries to combine the yellow/orange colors on the Nautilus diver’s helmet, I thought of going with a more minimal color approach: only light and dark blueish colors, with a lot of white color and spaces. Thinking of project’s given time, it was easier to combine a palette of blueish colors, but also this combination gives a more branded identity to the application and the project.

Nautilus, Case Study

Font selection

I am a Sans Serif mostly designer, as I consider these types of fonts modern and clean to build a modern, minimal interface. So, I had no second thoughts on this. Maybe someone would tell “but Nautilus is kind of a classic book, name etc.” (meaning Serif fonts) - Yes but I wanted to give my 2018 version on a new application, based on a famous name & story behind this. 

After some tries, I used the Geomanist custom-made font for the branding and the well trusted Ubuntu Google font. I thought of going with an embed font on the app too, but I have tried before Google fonts on webs & apps, so I trust them regarding the typography, to play safe.

Shapes

By creating the main Logotype and Nautilus icon, I direct the whole application design by using shapes with curves, oval, circles etc. As we talk about visual psychology is vital to have a common branding, as well shaping all aspects of design. Furthermore, if we see some key-things such as diver’s helmet, aqualungs, ropes, fishes etc. we see their curvy shaping in all.

UI & UX Process

Welcome to Nautilus

For the intro screen, my aim was to create and animate something funny but minimal. I avoided the idea to put a simple logotype with a loading effect. After sketching some ideas on paper with illustrations (please refer to Sketches, folder), I thought of make it simpler, quicker for the users waiting time to open the app.

Intro animation: Nautilus helmet dives from the top side, the rope gently moves, while Nautilus character breathe some bubbles from his helmet. The fun part continues with the eye: combined with the Loading Bar (“Loading adventures”) moves from left to right, as the bar loads the main application for the user. Also, the below sea waves can have a small but calm wavy movement animation.

Creating the user's profile

While I was building the app, I thought of not direct the project to interact as another booking service application, but to make it more personal, more user-friendly and come closer to the people would use it – this idea was supported also by the Nautilus character.

So, after the user sees the intro screen, the registration screen appears (along with some slides explaining what the application does). It gives the user the ability to register or if the app for any reason doesn’t logged him instantly to re-login in via the login form – so in case he’s already logged in, wouldn’t see that screen again.

After the user’s registration process completes, a screen with the Nautilus character appears to introduce himself and help the user to create a personal profile. Why would you do that? I thought of by doing this, as the user can have specific and targeted suggestions and proposals within the app, regarding expeditions and available adventures he wants to experience.  

The questions are not typical, but well-thought so the user to have a complete created profile and receive notifications and offers with suitable expeditions, especially for him:

  1. Can I ask your name, please?
  2. Are you a male or female?
  3. What about your age?
  4. How often do you work out?
  5. Have you recently experienced health issues? (or Do you smoke?)
  6. How would you describe your relationship with the sea?
  7. Do you own any diving equipment?
  8. How much would you spend on a great adventure?
  9. Do you have kids?
  10. What types of expedition do you like most?

Why do you ask all these questions, someone could ask. Good question, but my thought behind this is to create a user profile based on his activities, his athleticism and general everyday background. For example, the age, work out, health issues can be related to the endurance of swimming under the sea - if he’s afraid of the sea water or the fishes, probably he wouldn’t book a diving expedition easily. If he’s more experienced diver with equipment can be more eager to book diving expeditions or if has a family with kids, it’s more likely to book a cruise expedition or an underwater park expedition.

Nautilus at last!

In the main screen of the application, the user sees for the first time the options to interact with. On the header the main menu: My first sketches were to put a menu at the footer of application including the basic icons-links, but eventually I turned to the one I present here, as I want to give emphasis on the interactive content more. Three buttons for the user:

  • Region: While the user built his profile, we suggest options choose a starting region for his new expedition. Canarias, Caribbean Sea, Hawaiian Islands & Indonesia. In this user scenario, the user chose the Caribbean Sea & its islands to book his next expedition. We see in each island some numbers. It means that for example in The Bahamas region, are available 6 expeditions to explore and learn more. 
  • Expedition: By tapping this option the user sees the map of the Caribbean Sea, but with all the available pins and expeditions, where they located exactly. By tapping in one of them pin-locations, a pop-up window appears with the basic information and the user can take it from there, if he wants to explore more or return to the map.
  • My profile: Coming back from the scenario that the user has created his profile after registration, we show to him the suitable expeditions based on his created profile. Different colors (darker) of the Expedition tab. More below on the left side another button with a user icon that enables/disables the ‘My profile’ tab option.

On the main screen we also see the following options:

  • Slide arrows (Left & Right) that can change the Regional map of the Caribbean Sea to another e.g. Canarias. This can be also supported by showing slide-bullets below the map, helping the user to know in which map-slide he is.
  • We also see buttons with a stroke around not solid, so not to be eye-attractive from the first view. By tapping we go to the relative screen categorized either by Expeditions filtered by Region or Expeditions filtered by Type.

Adventures to chose from

Explore by Region: As said before, for the main screen the user can jump from the Region mode to Expedition mode, given him the ability to know how many expeditions are available on the map, which type and where they located exactly.

By using the exploration by Region, we see 5 sectors with the Caribbean Islands: The Bahamas, Cuba, Jamaica, Haiti & Dominican Republic. Each island has some expeditions to promote and sell. I thought of instead of making a long height screen by present one by one (it could be difficult as the app expands and more expeditions added) – to present them as slides categorized by Region.

The user can swipe left or right and the presented expedition is locked on the screen, one at a time, given the basic information to the user:

  • Picture
  • In which slide he is currently
  • Expedition name
  • What type of expedition it is
  • Cost
  • Users’ rating
  • User’s favorite it
  • The option to add it on his own Favorites

Explore by Expedition: The user by tapping to see the available expeditions via the Expedition mode. The main types of Expeditions I used are:

  • Scuba diving
  • Underwater parks
  • Submarine expeditions
  • Cruise expeditions (mostly for families)
  • And scientific expeditions (for students mostly)

The visual pattern remains the same as in the Region mode screen, including also some elements related to the expedition type: the icons. The user can identify each type by seeing each icon from now on. It’s a memorable technique to remember the various expeditions besides lettering.

Book your next adventure

Minimal mode: After selecting an expedition the user sees another screen, with the selected expedition and its basic information, as explained previously in the pop-up window screen. A Header picture added to act as marketing attraction of the region, that the expedition belongs. He can see the available expeditions that the Region supports, through the expeditions icons. Also, a credit card icon appears smoothly, where the user can book the presented expedition instantly. By swiping right or left, each expedition appears on the main screen with the given information and also if the expedition is different e.g. from Scuba Diving to Cruise expedition, the mentioned icons are also updated.

Expanded mode: By tapping the "Dive in" button, the user can expand the selected expedition, to receive additional information. 


Additional information includes:

  • Media gallery (Photos, Videos)
  • Description
  • Users’ comments
  • Google map with the located expedition and directions
  • What the user needs to equip with
  • Additional general information (Safety rules, Refunding…)
  • Available offers to book

The Book Button this time is solid, as the user is one step before making a booking or going to another expedition. So, we call him in a nice way, “Book it now, it’s made for you”! ­

Search, a valuable tool

I took the decision, as previously said, to leave on the top side only the main menu and the search button. I think a search button is an important tool for an application like this: instantly the user can search for expeditions. Four continents with more regions and much more expeditions. The search button is vital. And maybe while the application is build up from time to time, more and more features can be added: more continents, region or expeditions, offers, user friends and shared experiences and so on.

The Search main page is divided in two (or three maybe) parts:

  • The Smart Search input field: where the user can search based on keywords e.g. scuba diving, Cuba etc. The app can present auto-suggestions & auto-complete features for making the user’s search easier.
  • The Search Tags, is also a tool for quicker search results. By tapping on it, a screen appears where the user can access and see what others users are already searched and maybe like to follow up.
  • The button “My Results” could be visible in the mobile’s screen, pinned there so the user can see each time the available results.
  • Last but not least, a basic to the application Search filtering system (see main Search screen) with a variety of options. Every information included in the application is here. But it can be expanded with more and more search options and filters.

Extras

Nautilus, Case Study

Sketches

I usually start the design process with low fidelity sketches. This is the way I iterate through many design options quickly.

What did I Learn?

  • In less than a week, I managed to complete a Case Study, to the point I thought it is fine to present it to a future customer. From User Research, Personas, Sketches, Wireframing to Branding, UI Design & functionality, I think I come up with a good result.

  • I learned how to think fast, make crucial decisions and design quicker than before. Keeping track of the process at each stage, to avoid going back and forth many times. We used for the first time the Agile methodology.

  • I used a totally set of new tools (Marvelapp & Sketch) and I managed to become familiar with those tools and design fast, yet stylish.

Dear Anestis Goudas,

Best,