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.

5 Comments

  1. หวยเด็ด

    Heya i’m for the first time here. I came across this board and I to find It really helpful & it helped
    me out a lot. I hope to offer something again and aid others like you
    aided me.

    Reply
  2. หวยคำชะโนด

    Hi there, this weekend is pleasant designed for me, since this occasion i am reading this impressive informative post
    here at my residence.

    Reply
  3. https://tawk.to/arosfeast6

    I was just seeking this info for a while. After six hours of continuous Googleing, at
    last I got it in your site. I wonder what
    is the lack of Google strategy that do not rank this kind of informative
    websites in top of the list. Generally the top websites are full of garbage.

    Reply
  4. devpost.com

    Hello mates, pleasant piece of writing and pleasant urging commented here,
    I am in fact enjoying by these.

    Reply
  5. www.gtainside.com

    If some one desires expert view concerning blogging and site-building after that i advise him/her to pay a quick visit this blog, Keep up the pleasant job.

    Reply

Submit a Comment

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

Related Articles

Art History: The Baroque Period

Background From the 1600s to the 1700s, the Baroque style rapidly spread from Rome throughout Europe. While the Renaissance is defined by a sense of harmony, stability, and realism; Baroque art is known for highly dramatized, intense, and ornate works of art. During...

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...

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

© 2019 Maxmedia Creates

All rights reserved  |   Privacy Policy | Accessibility Statement | Careers

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