Nonetheless, when we began to analyze the Great Lakes Observing System’s site analytics, we were floored to learn that 35% of their traffic over the past year has been on a mobile device. Given GLOS’ hosting of data tools, we expected a much larger majority of users to visit the site with via desktop. Continue reading to learn about the specifics of our implementation of these three methods.
The Challenge
The size of GLOS’ mobile users presented us with a unique challenge—how do we create a cohesive multi-platform user experience that is both visually stunning and highly usable on both desktop and mobile considering GLOS’ high percentage of mobile visits and the complexity of their tools.
Most sites faced with the level of complexity GLOS presents will simply resign themselves to a reduced mobile experience, removing certain functionalities and forcing users to visit the site on their desktop in order to have full access. For example, Google Drive’s website allows users to view files on their phones but does not support sharing or editing documents. We believed that it was important to GLOS’ users to retain full-functionality across all devices. In order to develop an all-platform-inclusive solution to crafting the best possible user experience, we took a mobile first strategy in designing the site.
Mobile First Design Strategy
As mobile browsing traffic continues to grow, responsive design is now a necessity. Every site we develop should retain its usability on mobile. However when it comes to sites that we know are being heavily trafficked by mobile users we start with a mobile-first design philosophy. This additional focus places the user experience of the mobile user first and ensures that all desktop functionality must be designed translate to a phone or tablet. A mobile-first design philosophy means the mobile user will have just as complete an experience as the desktop user. When designing the site, we created the desktop design knowing how elements would shift with screen size and what would create the best, most consistent user experience for users going between mobile and desktop platforms. Below, we have detailed three elements that embody this methodology.
Navigation
Navigation is one of the most important and difficult factors of a responsive, mobile-first design. As we have written previously, there are several potential implementations of mobile-friendly navigation. GLOS had two levels of navigation that were important for users to have easy-access to, so we chose to implement a multi-level push navigation. Although many sites use this form of navigation for their mobile sites, less choose to also use it on their desktop site. However, using a hamburger-activated navigation made perfect sense for the GLOS site. Not only did we want to keep the navigation experience consistent across platforms, but also by reducing the navigation to the hamburger icon, we were able to create greater emphasis on the beautiful Great Lakes photography that is used across the site.
Sticky Header
Sticky headers—navigation bars that remain static at the top of a page as you scroll—are great for sites where the navigation would otherwise be buried by the amount of vertical space on a page. We wanted the user to easily access the search and navigation, particularly on the mobile platform when the user is scrolling through the tile-based pages. However, screen real estate is incredibly limited on mobile platforms and sticky headers, if poorly implemented, can hog valuable space. Our solution was to make the sticky header as compact as possible, reducing the size of the logo and having the search bar appear below the navbar when activated. The result was an easy-to-navigate mobile experience that does not distract from the main content. Having access to the navigation at all times greatly improves usability for browsing the site and accessing data tools.
Accordion
The accordion of featured data tools is a great example of a web component that we wanted to use on the GLOS homepage, but only if it was just as functional on mobile as it was on desktop. We wanted this accordion to open and close three different tabs of information on GLOS’ data tools. Many of the horizontal accordions on the web either are not responsive or shrink to match the screen’s width, dramatically reducing visibility and usability on mobile. Because we wanted our accordions to feature text over an image, we struggled to find an example of an accordion that allowed for varying amounts of text and good readability. After some research, our design and development teams crafted a solution for a horizontal accordion that would collapse into a vertical format, preserving both readability and the photo-heavy aesthetic to remain intact regardless of screen size.
Summary of Our Solution
The Great Lakes Observing System site challenged us to craft a great site experience for both mobile and desktop platforms. By utilizing a mobile first strategy and focusing on how elements such as the navigation, sticky header, and accordion behaved on mobile devices, we believe that we succeeded in designing an excellent responsive website that accomplishes our goal of making data tools easy to find. We hope that this case study has showed you the importance of small details in mobile user experience design. If your site is lacking a solid mobile user experience, reach out to us to learn more about how we can help you improve your mobile first design strategy.
Visual storytelling is a powerful way of creating an encompassing a user experience that gives the user an understanding of your brand and impact. When the Great Lakes Observing System (GLOS) selected Manning to redesign their website, we immediately knew that their organization would benefit from visual storytelling.
GLOS monitors data on the Great Lakes including water temperature, wave height, fish population and pollution and makes its data available to all those who want to use it to study the waterways through data sets and web tools. Our goals with their new site were to create intuitive paths for users to find the data tools that they need and to make the data more accessible for new users. Beyond creating concise user flows, we also wanted to demonstrate GLOS’ impact on the Great Lakes community. Visual storytelling was the natural tool to accomplish this goal. The following three methods were used to build our GLOS experience:
- Strong imagery
- Precise typography
- Interactive elements.
Continue reading to learn about the specifics of our implementation of these three methods.
Photography & Visuals
In our initial strategizing of the GLOS site, we knew that we wanted to convey the Great Lake’s beauty through an atmospheric space. We saw the opportunity to push the site aesthetically further and to use NOAA’s incredible photo library to create an immersive digital experience. One of the most striking aspects of the Great Lakes is the way in which they respond the the seasons. In the winter, the Lakes are often partially frozen over; in the fall, they are surrounded by an abundance of red and orange foliage; in the summer and spring, they are accompanied by blue skies and gorgeous sunsets. We decided that the GLOS website should also shift with the seasons, so we implemented a large homepage header image that pulls from a library of images dependent upon the current season. Each refresh displays a different image so the homepage never feels stale.
Typography
Typography is an often forgotten detail that plays an important role in supporting the story that a website tells. When it came to choosing what typefaces should be used for the GLOS site, we immediately knew that a monospace font would be an appropriate way of signifying data and code. Inconsolata was our final choice as a header font—it both immediately connects the viewer to ideas of data, is highly legible, and has a slight human touch with its calligraphy-esque strokes. The typeface on top of the beautiful photographs of the Great Lakes immediately tells the user about GLOS—that it is an organization that organizes Great Lakes data—without verbal explanations.
Interactive Elements
The third piece of our visual story puzzle is interactive elements. Interactive web design is a great way to engage users’ curiosity and to create a fun digital experience. We conceived of a tile mosaic design for GLOS’s landing pages as a way to combine Great Lakes imagery and interactive elements. Each tile flips on mouse-over to reveal more information about its represented data tool or page. The flip effect is playful and encourages the user to enjoy exploring the site, instead of overwhelming them with long blocks of text.
On the homepage, we also utilized a responsive accordion slider that opens and closes to show information about different featured data tools. Not only does the accordion attract the user’s attention, it encases a large amount of information in an effective amount of space thus improving user experience.
Take Aways
Our implementation of the above three methods for GLOS shows how visual storytelling can improve the user experience of a website and brand. By combining dynamic images, thoughtful typography, and interactive elements, a website can become a platform for engaging with the user on a much more direct level.
To learn more about how great design can impact your users, reach out to us and let’s start a conversation.
Here at Manning Digital, we take a much different approach. Today, we have accumulated enough knowledge of how users browse the web to consider a different, much more effective method—user-driven, or customer-centric, web design. This methodology puts the user’s needs and desires first-and-foremost, creating a meaningful and easy-to-use experience. Below is a roadmap of considerations you should make when crafting a user-driven website.
1. Consider what the customer wants to know
Instead of thinking what your organization would like to tell its customers, dig into the psychology of your customer to determine what they want to know. A user should read through your content and feel as though you have read their mind. By proving to the user that you know their needs, not only will the user have a much more personal, meaningful experience on your website, but you will build rapport between you and your users.
2. Direct the user to what they want
Creating a path for the user to follow is the next step in creating a user-driven website. Think of the pages on your site that they would want to visit. Make an easy-to-follow trajectory from your homepage to those pages. One strategy that we often implement is placing visually striking calls-to-action on the homepage. Another method is using different sections act as launchpads into important pages. These sections should have visuals and content that tease the user into navigating to these pages. Regardless of how you choose to create these directions, make sure that the user has a clear way to navigate to important content on your website.
3. Keep the user engaged
You do not want the user to stray from the path that you have laid out for them. By burying pages many levels deep, using too much dry content, and not designing a visual hierarchy, you risk the user becoming bored with your website. Make your site easy for the user to digest; we at Manning recommend using strong visuals and succinct copy that is both easy for the user to quickly understand and is also highly engaging for the user. The user should be enticed to scroll and navigate to the next page of your site in order to avoid click-aways. Reducing the number of clicks and scrolls that a user must make to navigate to important content is also paramount—put your most important information above the page fold (where the user must begin to scroll) and make secondary pages easily accessible with one or two clicks.
4. Divide your users into multiple audience profiles
Not all users have the same motivations and you avoid making sweeping generalizations about the mind of all of your customers. Instead, think of the different sorts of users that will frequent your site; think of the various personas that make up your audience. What motivates each persona? What do they want from your organization? Craft a deep understanding of your audience members and their needs. In Manning’s Digital strategy process, this is one of our most important undertakings. Multiple paths should be laid for different sorts of users to get to the content that they want. Of course, not all users are as important as others, so you should prioritize some user groups’ needs over others.
5. Leave in some informational material
One of the reasons why a user might come to your website is so that they can learn more about you, so you should not eschew informative content all together. FAQ and About Us pages are great places to give your audience a better understanding of what your organization can do for them. However, your content in these sections should still be written with the question “what does the user want to know?” in mind.
User-driven web design is certainly the new standard in digital. We encourage you to think of how you can redesign your website with user experience at the forefront and to contact Manning Digital on your personalized steps towards a better web experience.
There are enumerable companies that use an ecommerce platform for their website. But what about companies that wish to display their range of products without the intention of making direct sales online?
We recently tackled this problem with the redesign of E S Foods’ website. When we were approached by E S Foods to revamp their site, we knew that their products—grab-n-go meals and frozen entrees for school children—had to be the focal point of our designs. E S Foods’ strength is in its diverse variety of innovative products, so we wanted to highlight just how many options they offer. We would like to offer the solutions that we crafted as advice for other companies that wish to create sites with similar functionality.
Show & Tell: Displaying Product Variety
When breadth of products is your strength, it’s imperative to visually show thet range of options without overwhelming the user. Our solution was to create a playful interactive interface to encourage the user to explore the product varieties such as for the company’s well-established Breakfast BREAKS meals.. The layout is responsive so that the user can have the same experience regardless of whether they are using a desktop or any mobile device. Creating an engaging interface that demonstrates your variety avoids boring the user and encourages them to explore the full list of products.
User-focused Navigation
We organized product information so food service staff can find and explore relevant products when searching by meal (Breakfast, Lunch, After School) as well as by product category. This approach provides improved user experience as well as enabling E S Foods to promote their hottest new product category Protein Innovations. Having different methods of browsing products allows the user to easily sort through products based on their own needs.
On Informative Pages, Reemphasize Your Products
The E S Foods website is not entirely contained to its products pages; they also have several pages that promote the educational benefits of the school breakfast program and how schools can take better advantage of available federal funding. On the non-product pages of the E S Foods website, we reemphasized their products both pictorially and verbally. The banner images prominently displayed E S Foods products and we frequently included links back to product pages. Think of your informative pages as supporting players that back up the value of your products.
Concluding Thoughts
Strategizing the most effective way to showcase your products is tough, especially for companies with a huge range of products such as E S Foods. We believe that these three solutions—displaying product variety, providing user-focused navigation, and reemphasizing products on informative pages—are excellent tips to keep in mind when planning out your website. If you would like a customized plan-of-action for your product site, get in touch with the Manning Digital team!
“When should I post to my social media platform?” Anyone managing a social media account has likely pondered this question in an attempt to create a larger audience for their content. Visibility is, after all, paramount to existence in the digital age. At Manning, we have our own methods of optimizing send-out times for emails on a client-by-client basis, but little formal research has been done on the quandary of when-to-post on social media—until now.
A recent paper published by Lithium Technologies and Klout tackled the time issue by studying half a million Facebook and Twitter users and over 144 million posts. By examining post-to-reaction times and comparing behavior for users in different cities, the researchers identified the best time of day and day of the week to post content by geographic location.
The results were partially as one might expect—people do not read their social media feeds as frequently during the weekends. Activity plummets during the weekends, especially on Twitter. Instead, the days of the week with highest engagement were found to be Tuesdays and Wednesdays. However, the drop-off in activity on Facebook during the weekend was not as severe; interestingly, Saturday actually had the most consistent activity throughout the day. Regardless, the study’s takeaway is that posting in the middle of the workweek is your best bet for optimizing viewership.
What about how the time of day affects your post’s visibility? Again, when not to post is fairly self-evident—post reaction is at its lowest in the middle of the night when most people are sleeping. Visibility instead peaks during working hours (9 a.m. to 5 p.m.) and has a secondary peak between 7-8 p.m. As was with day-to-day reactions, Twitter post reactions were found to be much more sensitive to the time-of-day than Facebook. These findings were near universal for the cities observed—San Francisco, New York City, London, Paris, and Tokyo—with one small caveat; San Francisco users tended to interact with posts made earlier in the day whereas New York users responded more to posts made in the afternoon.
This report gives you a good idea of when to push new content out to your Facebook and Twitter platforms, but what about figuring out how to fine-tune your emails? We understand that every company’s audience segment is different and requires specific optimization in order to maximize readership. At Manning, our approach is to use this study as a guide to set up our own controlled testing that gauges response to your organization’s content.
In particular, we often implement A/B Split Campaigns in order to determine the best delivery time, subject line, and from name. This testing involves sending out a small sample of emails to be sent with two different variables—for example, sending out half of the campaign’s emails at 9 a.m. and the other half emails that at 3 p.m. We can track which set of emails has the highest number of clicks in order to determine what variables work best for your company. As there may be variations in response based on the type of content that you’re pushing—such as discount coupons versus posts about new services or products—we make sure to test across all of these potential variables. If you’re ready to include email and social optimization in your digital strategy, get in touch.
Stuck in the hover-and-click mentality of desktop design, websites overwhelmingly ignore the touch-based interface of smartphones. Traditional scroll-over, drop-down menus do not translate well into a mobile environment; there is no way for a user to hover over a menu item using their finger and there is not enough screen space for a drop-down menu to adequately function. This sort of poorly-designed navigation can result in frustrated users clicking out of your website. Mobile-friendly sites require a more nuanced solution that considers how a user interacts with their device. Here at Manning Digital, we are extremely in-tune with how important it is to create modern navigation that will function on both desktop and mobile platforms. We’ve listed some of our favorite advance methods of responsive navigation that function perfectly, regardless of screen size.
Full Screen Overlay Navigation
For sites with only a first level navigation, full-screen overlay nav is an excellent way to combat a lack of screen-space on mobile devices. With this method, the navigation is triggered by the touch or click of a button—often the three-lined “hamburger” button—and is displayed on the entirety of the screen. Sites which do this well include HugeInc.com, a marketing agency. In their iteration, the full-screen overlay is semi-transparent, allowing the user to still see the main content on the page even when the nav is activated.
Tabbed Navigation
Another option for smaller sites that have very few pages, tabbed navigation is a unique, out-of-the-box choice. When the phone or tablet is flipped to landscape mode, the tabs can even switch to be lined up in a column on the side of the site instead of in a row on top. Tabbed navigation, as seen in Codyhouse’s demo, only proves effective in a very particular setting—one with few navigation options, only first level navigation, and succinct navigation category names.
Multi-Level Side Push Navigation
Another option for smaller sites that have very few pages, tabbed navigation is a unique, out-of-the-box choice. When the phone or tablet is flipped to landscape mode, the tabs can even switch to be lined up in a column on the side of the site instead of in a row on top. Tabbed navigation, as seen in Codyhouse’s demo, only proves effective in a very particular setting—one with few navigation options, only first level navigation, and succinct navigation category names.
Multi-Level Collapsable Navigation
Collapsable navigation is a common choice for sites that have multiple layers of navigation. This form of navigation can be pushed down from the top or side of the screen. Like push navigation, collapsable nav only shows the first level upon opening the navigation. When the user clicks on or hovers over a first level category, the second level navigation opens up. As the first level of navigation is still shown on the screen, this method of organizing navigation takes up more screen space than push nav; however, it has the benefit of previous levels being more readily accessible. An excellent example of collapsable navigation is the mobile version of Barack Obama’s website—his site also shows how a responsive site can transition from traditional dropdown navigation to mobile-friendly navigation.
Perspective Navigation
Lastly, there is perspective navigation—an experimental, visually-engaging animation that is a stand-out choice to use for websites with a single layer of navigation. Like the side-bar navigation, activating the menu pushes the main content elsewhere on the screen. As its name suggests, perspective nav moves the main content in a three-dimensional way in order to create the illusion of perspective and depth. Developed by Tympanus, there are several different ways in which the screen can move—pushed to the right or left, rotated up or down, or even “laid down” on the bottom of the screen. This form of navigation is fully responsive and, like overlay navigation, functions well on smaller screens by allowing for a large area to be used for displaying navigation.
In Conclusion
As more and more web users browse using mobile and tablet devices in lieu of a desktop, it becomes vital to develop forms of navigation that are viable on all platforms. Here at Manning, we consider how to optimize screen space, how to design for different levels of navigation, and how to create navigation functionality that seamlessly fits in with the rest of the website. We encourage you to get in touch with us if you would like to learn more on how we can help you to implement responsive navigation.