Topcon_Logo_Wide_Blue_White_RGB
ICLogoWhite_Web
Accelerating Success
Machine Control Innovation
Research
UX Design
UI Design
Branding
Topcon provides precision measurement technology for the agriculture and infrastructure industries. Our task was to redesign the external facing website and migrate it to Adobe Experience Manager. The breadth of this project spanned research, interviews, branding, and UX and UI design.

Research and Discovery

Stakeholder Interviews

The project was kicked off with internal stakeholder interviews. Our team sought to understand the current state of the website, business goals short and long term, known issues, what’s currently working, and the purpose of the website. This process allowed us to diagnose problems and form requirements and goals.

The Next Step

Site Audit and IA

Using data from heatmaps and page traffic, we performed a site audit and presented our findings with the client. One salient finding was poor navigation. In redesigning the information architecture, we made a crucial improvement in adding descriptive level one’s, such as “infrastructure” and “agriculture” for their products. This was in contrast to their existing and ambiguous “products” label.

Our Foundation

Templates and Component Mapping

In this phase we identified required templates, mapped content and core AEM components to these templates, and created low-fidelity wireframes. Content strategy and story was also added to provide context to our decision making.

Iterating and Iterating

Mid-Fidelity Wireframes

After rounds of revisions for each template we arrived at final mid-fidelity wireframes. We took our requirements gathered from the previous phase and established components and layout.

The Final Product

Hi-fidelity Design

Building on research and wireframes, we delivered hi-fidelity designs fit with Topcon branding, official image assets and patterns, and preliminary content.

Staying Organized

The Design System

All styles and components were organized into a design system with collaboration from architects to ensure a smooth build. A notable mention in the system is the mega-menu navigation to fit the new information architecture, as well as app menu, footer, and responsive designs.

Post Design

Supporting Dev

In the last stretch of the project I provided design support to developers and architects, answering questions and collaborating to hash out responsive behaviors, component functionality, and more.