When: July 2018
Length: 8 weeks
Role: UI/UX Intern, later UI Developer
Team: UI/UX Intern (myself), Design Lead, 2 UX Designers, and 1 UI Developer
Task: Create a design system and code component library for use by distributed Freeman Co. development teams
When I started at Freeman as a UI/UX Intern the first problem we set out to solve was how we would go about managing all the styles and design components. Freeman is a large 7,000+ employee company with development offices around the world. We set out to create a component library that would be used by the Freeman Digital team in Boise and could be adapted by other teams within the company.
For this case study when I refer to the team or 'we', I am referring to myself, my design manager, and two other UI/UX designers. My role in this group was accessibility auditing, design recommendations, and some UI coding.
During the ideation we identified four primary components that were needed:
We would work with the engineers and UI developers to create the development pieces. I would create the accessibility auditing reports. The design team would collaborate to design the various components and specifications.
To create reusable accessibility audits, I would have to find a way to distill the complexities of WCAG into a format that any Freeman designer or developer could easily use. I created a template report that instructed the user how to sequentially audit an app for each of the WCAG sections and subsections. It included tips and examples as well as places to input offending code so the report could be immediately added to a backlog.
Around the time that we started work on the development pieces of Tangible I was promoted from an intern to a UI Developer. This meant that I would now be working with the team that we had tasked to create these reusable UI components. We created a developer site and built code components in React JS. This site contained all the usual UI elements as well as their different states and code examples so that a developer could copy and paste.
The next steps for this project would include a roll-out to the extended digital teams. There's no doubt that this process would have caused us to iterate and adapt the component library as it was exposed to new use cases. Not to say we would have adapted each component ad hoc but rather worked to adjust the pattern so it was more extensible in the future.
What I liked:
What I learned:
What I would do differently: