by | Dec 12, 2018 | Web Design

Developing an efficient website can be tricky. It is not enough to look beautiful, it must also function well. The previous Mango’s website focused on aesthetics over user experience. It took multiple clicks to get from the homepage to the antiquated reservation platform. For our overhaul, we made sure to design a site that was effective on desktop and mobile, user-friendly, and efficient without sacrificing the thrill of being at Mango’s.

Information Architecture

The first phase of designing a successful website is determining how the information is arranged. That means creating an organizational hierarchy that aligns with the user’s expectations. One of the most significant parts of this process is the navigation menu. By organizing the pages in a recognizable pattern, users are able to draw on their past web experiences to successfully navigate through the new Mango’s site.

 

Navigation

Creating an intuitive path allows users to discover the Mango’s identity organically or get to where they are going quickly. Keeping the user at the forefront of our design, we stuck to a few key principles:
      • Reducing Clicks – Visitors to the Mango’s site need to get where they are going in the fewest clicks possible, leading to more reservations, faster.
      • Consistency – Each page of the new site is similarly organized with consistent design elements (navigation menu, footer, pre-footer, etc.) establishing habit-forming navigation.
      • Easy to find CTA “Book Now” Call-to-Action buttons are located throughout the new website and take the user directly to a new, streamlined reservation system. Mango’s marks the success of their business by reservations, so it was important to make the reservation process to be quick, easy, and clear.
      • Internal Link and External Link Functionality – Internal links stay in the Mango’s website tab, while external links open in new tabs. Visited links change color to prevent users from revisiting the same pages, reducing frustration. 
      • Closed Loop – Not letting visitors from getting stuck at the end of a page was a priority. A sticky navigation menu allows other pages to be visited without having to scroll to the top. Additionally, including a split pre-footer on every page directs visitors to other pages on the site like reservations.

Design

 
Content Strategy
Information overload is a huge problem for many websites. Instead of packing everything into long paragraphs, we offer the visitor small chunks of information about various topics and a link to learn more if the visitor is interested. Short, sweet, and to the point.
When it came to copy, we intentionally used a voice that was relatable, clear, and easily understood by all types of users. By avoiding industry jargon, we reduced the risk of distancing users. 
 
Visual Hierarchy
A majority of visitors scan over a webpage in a Z pattern from top to bottom, rather than read each block of text. Our solution was containing each topic to a block of color with no more than 2-3 sentences, so reading and scanning can be simultaneous. We included a corresponding image and a red CTA button in every block. 
All clickable elements look clickable. This might seem silly to say; however, for user experience, a button needs to scream, “I am a button, Click me!” The CTA button is large enough to capture attention without being distracting. It is consistent across the whole website, becoming familiar to users.

Video/ Imagery
All the imagery used on the site is high-quality, visually engaging, and original content, allowing users to connect with the Mango’s brand before stepping inside. 
When it comes to videos on the Mango’s site, these are our rules of thumb:
  • All videos were muted by default. Bounce rates increase when unwanted audio begins. 
  • Videos less than a minute in length are more likely to be viewed in their entirety. When we could, we kept Mango’s videos short. 
  • Always include captions! You can read more about the reasons behind this in our other article.
Search Bar
The search box is in the navigation bar on the far right of every page, where users expect to find it on mobile and desktop.
 
Forms
The forms on the Mango’s site only ask for what we really need and are organized logically, grouping related fields together, so they can be completed quickly and without confusion.
 
Loading Speed
The average user has about a 10 second attention span. That means if a website doesn’t load quick enough, the user will leave the site. To prevent this, we made sure the content is compressed and sized appropriately. More information available here.

 CTA Button

Creating a Loop

Visual Hierarchy

Search Bar

Form

Mobile Design

For the mobile layout, we stuck to a one-column design allowing for the best use of space and easy scaling between devices. The navigation menu was reduced to a hamburger icon; however, the “Book Now” button is still visible, because it is the main priority for the site. Any animations and hover-states were removed for mobile functionality and all the images crop responsively. Buttons are enlarged so they are easily targeted by the user (moving from clickable to touchable).
 
 

ADA Compliance, Color Impaired and/or Blind Users

Assistive technologies like screen readers are used by visually impaired visitors to interpret websites through alternative tags (alt-tags), which describe the appearance and function of an image. For Mango’s, we put a great deal of effort into writing accurate descriptions for each image, so users can envision what the image looks like and get a feel for Mango’s Tropical Cafe.
 
Additionally, color cannot be the only way to convey information. It should supplement or complement what is written and visible. For example, the contact forms on Mango’s site indicate through color and text when something has gone wrong.
 
Ready to revamp your site and make it work for you? Let’s chat.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Articles

The Influence of Bauhaus

What is Bauhaus? Bauhaus literally translates to “construction house,” and was founded by Walter Gropius in the early 1920s, and was closed in 1933 due to Nazi occupation. To this day, we see, feel, and experience the profound influence this school had on everything...

2019 Design Trends

In 2018, a few of the design trends we saw included the use of gradients and semi-flat design, the mixture of illustrations with text, the growing popularity of micro animations, and minimalist design. We’re in our third week of 2019 and design is fusing styles from...

The 7 Principles of Art & Design

As an artist, when designing creative, painting an image, snapping a picture, or drawing an illustration, you must take careful consideration what goes where in your composition. It is a lot like building a house. The elements of art (line, shape, form, value, space,...

Maxmedia Creates Location Map Graphic
Maxmedia Creates Location Map Graphic Mobile

Facebook IconTwitter Icon  Filled instagram icon  Youtube Icon   LinkedIn Icon   Pinterest Icon

250 N Orange Ave #990 Orlando, FL 32801 | Info@maxmediacreates.com | 407.984.7979

© 2018 Maxmedia Creates

All rights reserved  |   Privacy Policy | Accessibility Statement

If you have any problems accessing this site, please contact Maxmedia Creates at 407-984-7979 or send an email to info@maxmediacreates.com