01. Context
Gulftech is a relatively unknown global brand that specializes in acquiring food processing companies throughout the world. Their five primary brands are Sinclair, Brown, Atlas, Magnuson, and Luthi, all of which underwent a complete brand overhaul. As a part of the re-branding effort, new websites needed to be created for each.
gyro customized its process to enable efficiencies across all brands. A discovery phase which included research and discovery, and strategic articulation was conducted simultaneously for all subsidiaries. The outputs of this first phase informed the production phase, in which each brand and website was developed independently. In order to maximize efficiencies, the decision was made to create a pattern library that could be shared across all subsidiaries. With changes to CSS styles for fonts, color palettes, buttons, iconography, and photography, each brand could tailor their own website to suit their unique brands and marketing needs, while retaining a degree of consistency to feel they are related.
02. UX Strategy
A Web Foundational Strategy (i.e. experience brief) was created to find synergies between all five brands. The Foundational Strategy synthesizes research findings to fulfill ultimate user experience goals. The deliverable helps client teams and internal gyro teams align on project objectives, and informs the remaining phases of the project.
To generate the Foundational Strategy a research plan was created, with significant investment on primary research which included: interviews with all CEO’s and upper management of the subsidiary companies as well as Gulftech, on-site feedback polls using HotJar, heatmaps, session recordings, and analysis of performance/traffic analytics through Google Analytics. Secondary research included competitor research analysis to identify best-in-class experiences in the food processing industry.
The Foundational Strategy informed and ranked solutions by subsidiary. Budget, technical feasibility, business need, and user experience impact were all taken into account to formulate recommendations to each subsidiary from a common pool of solutions. At the end of the Foundational Strategy, each subsidiary had an idea of the main problems that needed to be tackled, and an approach to be successful.
Summary of Key Insights
- User need states were common for all brands and included: The Solutions Seeker (prospects, operation managers, business leaders), The Answer Chaser (customers, operations, employees), The Service Seeker (operators, maintenance), The Optimizer (business leader, R&D), and Corporate Evaluator (business leader, recruits).
- All brands shared similar brand attributes which included: service organization (make the website an extension of our service experience our people deliver daily), expertise (show we possess unique expertise and knowledge of food processing markets), leadership (use the website as a platform demonstrative of our leadership position in the market).
- Competitors’ websites lack sophistication. They’re very engineering-focused rather than customer-focused.
- Marketing, sales, and service all own parts of the website. Therefore the CMS needs to be architected in a way that makes upkeep easy.
- Trade shows are the primary form of advertising for these companies. The website needs to support ad-hoc landing pages advertising trade show details.
Summary of Key Recommendations
- A pattern library needs to be built to support five different business with unique brands and marketing and sales objectives and structures. Inspiration was taken from Vail Resorts, which uses the same patterns and templates for each of their ski resorts, but changes colors, typography, buttons and imagery to fit each of their brands.
- Refresh equipment presentation to make the product feel more attractive, demonstrative of premium brands.
- Show the family and people behind the company, who make the value proposition real everyday.
- Shine a light on the unique aspects of service and added-value that each company provides as an extension of their service offering.
- Automate internal routing of emails to simplify lead generation and customer service requests.
- Promote attendance at events and trade shows to enable better engagement.
- Allow for multi-lingual capabilities.
03. Prototyping
A design system was wireframed in Axure with three categories of components: base components, layout components, and interactive components. A total of 20 components were designed for the shared pattern library.
Pattern library checklist
04. CMS Architecture
With the help of back-end engineers we put together a spreadsheet with all CMS elements for each component to make the content-authoring experience as seamless as possible. Each component had a list of CMS inputs, whether those inputs were required or optional, and additional notes on functionality, image sizes, data objects, etc.
Spreadsheet with CMS inputs
Want to see the full prototype?
05. Design System
One master Sketch file was created with all shared components. Every element within these components was tied to a shared layer style or a shared typography style with the intent of making “theme” updates as simple as possible. The editable styles were outlined on one master artboard (UI styleguide) so designers and developers understood the variables that were created and how they would be used. From there, designers use Sketch Overrides to replace imagery and copy for every symbol on a specific page.
UI style guide art board
- All typography, color, and button styles were outlined in the UI styleguide to make all re-skins of the UI for every brand as simple and quick as possible.
- Nested symbols were used to create consistency in button styles, iconography, and cards.
Component break-points and behaviors
- Four break-points were identified in order to create the most optimal experience across devices: 1920 – 1201, 1200 – 1024, 1023 – 768, 767 – 320.
- The responsive behaviors of all component elements were exemplified using the Auto-Layout plugin.
- Components were designed to be full-width, with a content container designed at 960px wide with 12 columns.
The Results
- Each instance of the CMS comes with its own set of typography, color, button, and icon styles.
Leave a Reply