The work in this case study went on to form the basis of Lumen, the new World Vision Canada design system. You can find a case study of the full project on the OstModern website.

1/5

Brief

2/5

Challenges & Objectives

The project faced a multi-faceted challenge stemming from siloed project teams, divergent experience levels among design and product staff, and the absence of a unified product strategy. These issues, exacerbated by reactive decision-making from senior stakeholders, was hindering a cohesive vision on what to build and in what order. This had set development of their new website on a path to a fragmented user experience that would be difficult to update and maintain, with elements already being hard coded rather than being made to be modular and reusable.

The root of these issues lay with the way the teams had been set up. Three teams were tasked with different sections of the new site, but there was a lack of clear and effective communication between them. New sections of the site had already started to be designed and built with little consistency between them.

To start to address these issues, I suggested and took ownership of creating a UX component library of reusable design elements. Imposing a system here would mean a more cohesive experience for the user as well as time and money saved in both design and development.

3/5

Process

My process for this piece of work was firstly to do an audit of all the existing designs, which were a mixture of UX & UI screens from across the different work streams going on in the project. This included listing them out, giving them names and describing what they are used for.

I then started to categorise them and break them down into more generic UX components.

Afterwards I set about adding annotations, detailing any rules and guidelines around the use of the components. Here is an example of what the article page tempate components looked like when documented like this:

4/5

Implementation

Once the structure of the document was in place, the standardised components were immediately useful in achieving increased design consistency - a good example was identifying and replacing an article carousel that had been designed in silo that was different to other instances:

With all the components categorised and given their own unique codes for reference elsewhere in the documentation, the usefulness of the library was expanded further with the addition of status labels to show where components and pages had reached in the product development pipeline:

5/5

Results & Next Steps

The UX component library grew to become a foundational element of the design and development workflow of the project. With a smaller number of reusable components, the site immediately starts to feel more cohesive and there was a notable reduction in the time taken for both our team and the client's own designer to create designs for new pages.

Furthermore, with components clearly labelled and categorised it became straightforward for the client's development team to see when something was an existing design being reused elsewhere, resulting in a much more streamlined process overall.