Brandon Baun

Topcon_Logo_Wide_Blue_White_RGB
ICLogoWhite_Web
Accelerating Success
Machine Control Innovation
UX Design
UI Design
Research
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.

High Fidelity

Final Template Designs

A core requirement of hotel templates was author-ability. In other words, content authors needed to leverage the design for their unique hotel content. The challenge was creating components and layouts that could serve this purpose. Design needed to be flexible to account for unique content needs while retaining boundaries to ensure solid user experience.

Building for Mobile

Responsive Design

Retaining functionality and clean design, from small screens to big. The InterContinenal site was built to be responsive.