Role: UI designer
Programs used: Photoshop / Adobe XD / Zeplin / Invision
Collaboration between: Design / Marketing / Development
Transparent.com was in need of a redesign. This included redesigning over 100 responsive pages, creating a style guide/design system, and checking for accessibility issues along the way.
A component library and a character style library were made so I could quickly and easily grab assets while keeping consistency with multiple designers working on the same project. As I designed new assets, I included them in the style guide while also thinking about hover and active states. I am working on moving all current assets to Adobe XD (and keeping close attention to the future of XD) for an even faster design process. There were many other components created besides buttons. This is just a sampling.
#FFFFFF
#7165AC
#FFFFFF
#43719c
#333333
#43719c
#FFFFFF
#428350
It was important to follow WCAG AA standards to make sure transparent.com was accessible to all. I made sure there was enough color contrast between background and foreground elements as well as making sure hover states were indicated with more than a color change. I checked the contrasts via webaim.org.
Transparent Language has so many different audiences and the languages available are different between them so we needed an easy way for users to see which languages were available to them before creating an account.
Transparent Language offers many free language resources. I redesigned this page to help promote all of their free resources.
Word of the Day is one of Transparent Language’s free resources. Everyday, a user receives an email with a word in the language of their choosing. They are brought to this page for more information about the word of the day.
During the redesign, the contained white wrapper and the gray background were removed for a more modern feel. Because one of Transparent Language’s biggest customers is the government, the blue color was brought in to the header to give Transparent Language a more serious feel. After the redesign, information was continuously collected through Google Analytics and Hotjar to inform us on changes that could be made to improve the usability and conversion rates of the site.
This led to a faster design process and I was able to make responsive versions of the site quickly while also keeping consistency across designer's files.
XD, Zeplin
