For this business site mobile adaptive redesign project, we worked closely with the client via their internal marketing and web development teams to completely redesign the B2B section of their external website. The redesign included a full navigation redesign, reorganization, and behavior, as well as all considerations for mobile menu interactive behavior. Banner and content regions of the site pages were also completely reorganized and redesigned to better meet the needs of business customers.
Design UI Patterns & Best Practices
This business site redesign project began with strategy meetings to identify the primary goals for the site redesign, key audiences and personas, and anticipating the best opportunities for the business looking ahead 12-18 months. UI patterns that stand out in this site redesign feature large, full-width images, subtle interactive animations and elements throughout the site pages, large buttons and “Calls to Action” (CTA’s), mobile responsive/adaptive design, long scrolling with significant negative space in the design for improved readability, interactive content “panels” that expose additional content with interaction, and streaming HTML 5 video in page sections.
Another important aspect of this redesign project was simplifying content headlines and subtitles, and featuring those content headings in a compelling way throughout sections within a long-scrolling page, and across the entire site design. This is important for the audience in this specific case because it’s made up of both decision-makers, as well as technical teams, and needed to be both easily understood and meaningful to industry experts.
Site images were chosen from stock photo sites, but heavily modified to create a technical and unique look across the site redesign. The hero block images were selected and custom designed for each page on the site to connect directly with the page content and messaging while maintaining a clean, modern, and primarily flat appearance on the site pages. Elements within the site include parallax scrolling, alternating content sections with both light and dark imagery, and iconography throughout the site design.
Mobile Responsive/Adaptive Design Considerations
Mobile responsive/adaptive design is always a critical component of any site redesign project, especially when we are only handling the design aspects of the project. The overall designs and intended behavior needed to be easily interpreted and understood by the development team to ensure a streamlined process and accurate implementation of the designs. Mobile navigation was a key component of this redesign project, and uses standard UI elements to indicate the collapsed or expanded states of the menu items and sub-items. The main navigation is expandable via touch or click on the “hamburger” menu icon to expand or collapse the navigation content.
Internal pages of the site also conform to a standard 12-column responsive grid framework so that the mobile behavior flows naturally into the device being used to browse the site. Additionally, the page content is customized to serve mobile users with the most relevant content based on mobile analytics data from Google Analytics.