2016 closerlook had recently started their UX practice when I joined them as a freelancer. All projects for one of their clients were developed with WEM (Web Experience Manager); a CMS with specific constraints. Design leadership was looking for a way to apply time-saving strategies to the UX phase and asked me to create a wireframe library.
Project Goals
- Document all relevant components and modules
- Organize all components and modules into a easily usable Sketch library
- Decrease the amount of hours needed on a project for the UX team
- Provide efficiencies that allow site authoring to start sooner
Team Overview
An internal project for closerlook, I teamed up with a Senior Designer/WEM Author early in the process for an orientation. I would then have periodic check-ins with the Director of the UX to receive feedback and modify priorities.
My role
UX Lead
My responsibilities
- Achieve a basic understanding of WEM
- Organize a schema that accounts for all components and modules
- Create a robust wireframe library that includes all relevant components and modules
- Document the wireframe library for future designers
Design process
This process is simplified due to each project having its own specifications and needs. No project has been purely linear for me; instead they are a web of relationships that impact one another in complex ways.
However, most projects align to the following steps.
1. Understand the problem
Discover, Define
2. Design the experience
Design, Feedback, and Iteration
3. Deliver a solution
Develop, Deploy
1. Understand the problem
- WEM introduction
- Research
WEM introduction
I sat with a WEM author and was given the tour of the system I would be feeding into. The CMS is complex, but it was quickly apparent that many structural elements (navigation, hero elements, etc) were re-used from client to client; the product of a previous process efficiency strategy. My colleague was able to give me the tools I needed to explore and the context I needed to get started.
Research
Before I started designing, I looked into:
- how this instance of WEM was structured
- how other companies structured their libraries
WEM’s structure
Many elements were already organized into a working IA. Instead of recreating an optimized structure (which would require many hours of approval and implementation), I leaned into what was there. And so these became my parent categories:
- Container
- Content
- Navigation
- Forms
- Templates
I then continued to audit all existing components, from all projects, while cataloguing similarities, differences, and ways to combine them so I could include distinct components for future projects.
WEM’s working component structure helped inform the library’s architecture.
An example of a Home page created in WEM that helped feed the components and modules list.
Other structures
Atomic design was so hot around this time, and it’s still a great way to structure a design system. The most important principle is to think about a collection of components as a system, knowing that each piece should exist in harmony with the next.
As I built the library, I made sure to leverage atoms, molecules, organisms, and templates. This would allow future designers to easily combine the elements, making page construction easier and faster.
Copied directly from bradfrost.com. Definitely worth checking out.
Result
I had already worked on a project or two that used WEM, so I knew how that cycle worked. Now being equipped with a larger knowledge of the tool itself, and some basic research that informed my IA and design strategies, I was ready to start designing.
2. Design the experience
- IA catalog
- Wireframe transcription
IA catalog
In order to correctly audit all components and modules for this client’s projects, I needed to be methodical. I logged all elements and their characteristics in a spreadsheet. I associated each of them with screenshots of existing elements and would de-dupe and combine similarities so as not to be redundant.
The IA catalog served as my “to do” list once I started wireframing and consisted of over 300 unique components (desktop and mobile). As new projects would come up, relevant modules would also be added to the library.
A partial view of the structure that created the library
Wireframe transcription
While marching through my IA catalog, I worked through the 300+ items until Desktop and Mobile components were created and organized as reusable, editable symbols in Sketch.
Since the symbol library is largely opaque in Sketch (along with the typography values), I created a static style guide to greet designers who hadn’t used this system before. If they had trouble navigating the symbol’s tree structure, they could browse and copy what they needed directly from the art boards.
In addition to the symbols (components and modules), typography, grid system, and robust form elements, I was able to create Templates that could be applied to a new project “as-is”, used for discussion, or easily modified for a specific use-case.
The output from the Wirefame Library project; organized, reusable components
Example of Home Page template, ready for body copy and basic color updates
3. Deliver a solution
- Executive approval
- Rollout
Executive approval
I had been meeting with the Director of UX throughout the design process, but we needed to meet with executive leadership before rolling out the new tool. I gave an overview of the problem and methodology, and then showed two things:
- How to build a custom page with an array of symbols.
- How to, with one selection, drop an entire Template onto an art board.
Both were well received, but the latter elicited the following response…
“I feel like this is the Christmas morning I’ve been waiting for for five years.” Ryan Mason, Chief Creative Officer. May 04, 2016. After Sandra (Director of UX) and I gave him our presentation of the Wireframe Tool in Sketch.
Rollout
I was asked to present the wireframe library to the larger Design team; giving a demo and encouraging its use. Sketch was relatively new so it was a bit of knowledge share on the application itself and the power of symbols. I continued to use, and expand on, the library for the entirety of my time at closerlook.
Dropping in the nav and a hero. All body copy is editable and breaking any symbol allows for tweaks.
Final Result
I worked on more glamorous projects while at closerlook, but this one helped a real and present need. I created an efficient, reusable, and scalable tool for a large design agency. Used in conjunction with the process for the client, we were able to save time, money, and free up UX resources for more aspirational projects.
Wins
- Successfully cataloged WEM components in use through 2016
- Decreased hours needed during the UX phase for WEM projects
- Established the first UX pattern library at closerlook