Global Templates

Objective

Create a set of templates that will work across multiple departments’ business requirements and multiple languages while maintaining a singular style and a uniform flow.

Process

BRAINSTORM & SKETCH

Though each template differs, they all started by identifying the business requirements of the various departments that would utilize the template. After those requirements were identified, I start by imagining what types of components would resolve the various business requirements and look for industry practices of those components. I sketch possible template layouts (starting with mobile) and refine the components along the way.

WIREFRAMING

Once an idea is initiated in sketches, I bring these sketches to my developers to discuss possibilities and opportunities. With their input, I refine the components and template and create wireframes.

A small group was tasked with creating templates for various departments within The Church of Jesus Christ of Latter-day Saints organization to use.

As these global templates are adopted by the various departments the user will have a more consistent experience while navigating through the site. Templates help increase the The Church of Jesus Christ of Latter-day Saints brand’s defensibility and provides consistency throughout the global website.

ChurchOfJesusChrist.org is a site that is translated into over 100 languages and is viewed worldwide.

Wireframes.png
Support-Wireframe.png

USABILITY TESTING

With a wireframe and interactions defined, I would meet with the user research team. Together, we would establish what we wanted to specifically test and create scenarios that would test those interactions, layout, etc. Once a script was created, I would expand the wireframes and defined interactions into a basic prototype.

At one of our locations we had a room built out specifically for testing, utilizing a two way mirror, computer programs, and cameras. Depending on my availability, I would either be on site (on the other side of the mirror) to watch the testing or sign in to watch the live broadcast version. By attending the testing we could help refine bugs that may pop up and encourage the moderators to ask certain questions. As well as being able to actually watch how a person interacted with our prototypes and to be able to see their facial reactions to the prototype.

After a sequence of user tests, the user research team would write a report of their findings. This report combined with my own insights as I watched the testing would help me to refine the prototypes. Depending on the project, we would be able to test multiple times following this same process. Regardless, each template I worked on was tested and refined (based on the test’s results) at least once. Testing is critical to my process.

EVOLUTION

The templates were often built around one department’s business requirements but as more departments desired to use the templates there was a need for growth. I would work with these other departments to see if they could either use the template “out of the box” or if there was a need for evolution. Basing the decision to evolve or not around business requirements streamlined the process.

Evolving the templates meant working with other designers, that are assigned to different departments, to align the new components with the global style we put into place. To be successful, both parties required compromise and patience. Ultimately, it better helped the designers to be united in focusing on the global initiative of the design and help align various departments to the vision.

The left (the tile we already had) didn’t meet the requirement to have a more prominent meta (price), the variation to the right was created to meet that requirement.

Final

By using global templates we created a more recognizable brand that, as the templates are adopted, a user can easily identify what is and what isn’t made by the organization.

The goal is to have an organizational 80% adoption rate. As of a 2017 audit performed across the organization’s sites, 69% of the organization needs are satisfied by the templates currently designed. The remaining 11% will be satisfied by additional components and templates designed.

A few images of the final UI.