Logo

Moxa

Moxa official site revamp

Moxa provides a full spectrum of quality products for industrial networking, computing, and automation, which design solutions that operate securely and consistently under critical conditions. Striving to understand customers needs, providing service that exceeds expectations that reach in more than 70 countries.

Primary Research:
Discover phase

While in the design and industry research phase, we've looked into all the computing and networking related companies that listed in the Fortune 500. After finding out that due to the target audiences and industries character, to arrange massive products and solutions in a well-structured information architecture also implementing a precisely feasible design system to unify visual is a critical. However, it is undoubtedly a challenge to both client and us to settle the design system guideline in a global organisation. On the other hand, by emphasising success stories, case studies to increasing reliable brand image and the variety of product applications is another strategy we intended.

A complicated megamenu without a responsive website
A complicated megamenu without a responsive website
Without a union design system, Moxa had 9 headers on one site
Without a union design system, Moxa had 9 headers on one site

Challenges

A transformation needs a breakthrough. By looking back to the sitemap, we adjust the structure of the website fundamentally. By putting a lot of efforts and studies on product section- which is one of the most important section within site; through the arrangement of the product model table, users now can easily see the differences between specifications. Furthermore, along with a comparison function added, each product category layer offering a filter feature with their own criteria which can also obtain the miscellaneous products.

Sitemap
Sitemap
Flowchart
Flowchart
Wireframe
Wireframe
A demonstration of product section
A demonstration of product section
A quoation userflow design workshop with client
A quoation userflow design workshop with client

My Moxa section is another challenge. After going through several design versions and wireframe communications, finally reached to a consensus of the UX flow with the behaviour of bookmarking, tagging and following product updates with the client. Another significant feature is to integrate the support application cases with support form submission, not only optimising the submission flow with helpful hints and front-end effects but also smooths the operation, making the experience painless to the user.

Sketch
Sketch
Sketch
Sketch
Flow
Flow
Flow
Flow
Flow
Flow
Inner pages
Inner pages
Inner pages
Inner pages
Inner pages
Inner pages
Inner pages
Inner pages

Design Sytem and Style guide

To make explicitly visual guidelines, we started with the design of essential components. By following the methodology which Brad Frost proposed in his book “Atomic Design”, we overhauled complex pages into pieces. After a clear definition of atomic component usage, a do and don’ts banner design guidelines and colour palettes as our foundation; front-end developers rearrange these components to a fabricator. Centred around the Moxa standard colour, we eliminated and focused on bright, clean linear segments; Not only do these emphasise a vivid image of the corporation, but they also provide sorting information to users. Moxa Design is not only a portal to corporate visual identity, but also a portal to official site design system, official site style guide, and campaign site style guide which drives discoverability and engages users to learn and apply to the Moxa digital contents.

Design system
Design system
Style guide
Style guide

Breathe new life to convention

Users now have a more intuitive experience while visiting the Moxa website. After two years of production, working closely with the client and the team, the revamp website leverages the new face while emphasising the ingenuity. The brand underscores that innovation does not occur in a vacuum; it arises from the deep bonds with clients, cemented through global communications, which enable Moxa to create breakthrough solutions that meet evolving client needs.

Tools: Adobe Photoshop, Adobe Illustrator, Adobe Acrobat, Invision, Zoom, Skype, G Suite, Jira, Confluence, Sketchapp.