Principles of UX Design and Web Design
Mango’s Tropical Cafe
ROLE Art Director and Designer at Maxmedia Creative Agency
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 Bar Organization
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.
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.
Mobile Layout
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.
Casandra Hill assisted with the research and writing of this case study.
