UX/UI I MARKETING I NEW MEDIA I ID (LOGOS) I ALL
Challenge
I was brought in by the Cannonball team mid-project—after a partial set of conceptual wireframes, visual designs and style guide had already been established. Initial UX goals involved filling in gaps where necessary to produce a complete set of functional detailed designs that met content, accessibility and technical requirements. From a UI perspective, the current visual language needed to be properly codified and expanded upon to fill out the majority of untouched pages, components and visual assets—including a full set of customized icons.
​
Duration: Engagement to launch—2 months. Design ongoing.
​
All designs support WCAG AA requirements.
Roles
Art Director
UX/UI Designer
Illustrator
Presentation
Methods
Accessibility Audit
Content Assessment
Design System
Wire-framing
Paper Prototyping
Annotated Mockups
Tools
Sketch
Zeplin
Photoshop
Illustrator
Keynote
pencil/sharpie + paper
Requirements Audit
An initial multi-level requirements audit that covered content, accessibility and tech standards helped expose numerous design deficiencies that required significant sections of the prior work to be largely reconsidered and restructured.
Moving forward was an exercise in assessing what could be patched up and bolstered and what was necessary to jettison and rebuild—all the while largely maintaining the integrity and direction of the original conceptual designs.
Design System
The initial “style guide” was largely a brand exercise so stress testing each element uncovered various areas that needed optimizing and altering. For color, most updates were minor, such as expanding the palette to describe text links and system feedback. A major change was required when the two primary colors (red #FF0000 and blue #009BD0) only partially met WAC AA standards. Ultimately, we simply shifted the primary colors to darker alternatives for smaller elements but for some brands this is not necessarily an acceptable solution.
For type I was able to simply extrapolate a more comprehensive type hierarchy that included notes on mobile responsiveness. Interactive elements needed to be greatly expanded to include all functional components and a full range of corresponding states. And because this was to be a platform driven site—I spec’d and built a library of all necessary components. The urgency around this initial phase was driven by a plan to keep development working in a parallel path so cementing the building blocks gave me more flexibility to make design changes where necessary. Delaying these changes would possibly mean time spent undoing completed development.
Refining UX Fidelity
The next stage involved toning and broadening the wireframes and establishing a solid set of templates. While there were ample wireframes, they lacked depth and detail and focused mainly on the desktop experience. My first step was to map all proposed pages and content to wireframes, distilling down layouts into unique templates—then expanding that template base where necessary to fit the needs of the content that had not been accounted for.
This process also applied to functionality and micro-interactions. Because this was a component-based system we wanted to be as efficient as possible and reuse when applicable. On occasion if was necessary to revisit pages to assess effectiveness. One case was the Production Selector page. Initial wireframe defined a widget that vaguely instructed a user to answer an undefined number of questions. As a user would answer each question the product modules displayed on the page would dynamically filter. There was a non-negotiable set of nine questions, but the wires provided no specs for contextual indicators and limited navigation. In addition, there was no importance to the order of the questions so a user would have to navigate through the long queue of questions until they hit upon one that pertained to their search criteria. I suggested a basic window shading system that would allow a user to view all questions at once so they could simply choose which were most relevant to them. A further iteration replaced check boxes with large buttons, but we settled on the former in order to avoid button text that may push the boundaries of the button as may be the case in the event the site was translated into another language—better to keep the design flexible and adaptable.
ORIGINAL WIRE
NEW SKETCH
FINAL DESIGN
Another instance that called for more exploration involved the Blog section. The original wires accounted for a single level of limited categorization. I expanded the filtering to include multiple levels of categorization and added in tagging data. I also redesigned the blog detail page to better reflect the system functionality and stream-line content. Once functionality and templates were properly acquitted, all pages needed to have the wires brought to life by applying visual styles, designing hero banners and choosing imagery to meet brand standards.
Responsive Design
The initial wireframes covered a wide range of desktop applications but only lightly touched on how that would translate in mobile. Once the desktop experience was complete and approved, I expanded the wires to encompass the full range of content, components and functionality within multiple mobile environment.
Custom Icons
The original visual designs contained six icons, but this needed to be expanded to encompass the additional fifty concepts that were necessary for completion. All needed to communicate with an easy-to-understand, consistent, modern visual language.
Wrap
A beautiful, modern, functional, platform-driven site that progresses Fujitsu’s ambitious goal of helping to “enable the world’s leading companies to deliver world-leading imaging solutions.”
Launched: 2021
Thoughts, Learnings and Beyond
-
Content is usually given only high-level consideration throughout the course of UX/UI design—only drilling down into the details after visual design is complete. This often means that content creators feel stuck with requirements that don't meet content needs and this in turn can lead to rework in UX/UI or "the story" to be compromised. Pushing for content to be more fully formed early in the design process can help avoid these problems.
​
-
Conceptual Design are great for creating vision and direction but usually fall short in providing enough information and guidance for Style Guides and Functional Designs. It's best to wait until detailed designs are more evolved to proceed with the establishing a design system and codification of guidelines.
​
-
Accessibility considerations should inform design decisions from the jump.