Flex Technologies
Flex Technologies was struggling with outdated site which needed a major UX re-haul. Multiple navigations, confusing CTA’s and layout not suited to the individual viewport were obstacles for the user to understand the wide range of services offered by this industrial tech giant. In collaboration with a team of a UX partner, Business Analyst, Developers and Product Manager we were able to bring an entirely new experience which is fun to navigate and brings the viewer to the exact field of Flex’s many areas of expertise- ready to reach out and begin partnership with a clear understanding of the capabilities of Flex.
A Creative Navigation
The reimagined navigation for Flex’s 5 phase Sketch-to-Scale process was thoroughly considered for any device at all breakpoints to work seamlessly. Below I outline the design thinking, process and final outcome.
Sketch-to-Scale Mobile
The reimagined navigation for Flex’s Sketch-to-Scale concept to meet their customer at any point in the process of product development from ideation to managing product long after delivery.
Sketch-to-Scale Build
Build is the 3rd step in the Sketch-to-Scale process, and I chose to represent this with an exciting photo of a drill spinning with lubrication in the same direction as the wheel spins for a cool visual coming together of elements.
Sketch-to-Scale Deliver
Deliver is the 4th step in the Sketch-to-Scale process, and I chose to represent this with a cargo ship on the wide open ocean bringing your product to market.
Sketch-to-Scale Manage
Manage is the 4th step in the Sketch-to-Scale process, and I chose to represent this with a partner having received their order and partnering with Flex on distribution.
Initial Wire Frames
We worked out all wire frames for the user flow on the white board before putting anything into Figma.
User flow from homepage to "Innovate"
Wire frames showing how one would locate a condensed preview of the Producr Lifecycle offered by Flex on the homepage and move on to the full description page.
Homepage
Desktop, Tablet and Mobile views
Component Mapping
Listing out components that will be available in the content management system for client to use to build more pages. Showing breakpoints and how components will translate.
Flex News Story Template
Template for a News Story utilizing a rich text editor which has been designed to have an easy CMS for the client to be able to publish with ease and get the story to their audience as it’s happening.
Accessibility Compliance
We did a quick accessibility test on components and found them to be not legible. A solution of adding the Flex colors filter over images helped solve the issue and added some visual interest to the component.
Template with components mapped
For the client to understand the intention of all components designed and recommended on the homepage we mapped them with detailed explanation.