why we did it
THe Challenge
My role: Within a small budget, create high fidelity wireframes and an interface to help the Capacitype team evolve their current web app for their expanding user base.
We started with a tool only made for internal recovery organizations but needed to create a tool that could be used by anyone, from a high school friend to a parent. Our solution provided a way for everyone to contribute and benefit from this recovery community.
Working with atomic design
Making life happier for designers and developers
Though having a small budget was one of the challenges for this project, it also presented an opportunity to work on an extremely small and efficient team. I set up my Sketch file up to mirror Pattern Lab, set up by our developer. We were able to create a comprehensive style guide which made handing off assets nearly painless.
The design came together by creating building blocks for basic page layouts which could then be reused easily across the web app. This allowed me to focus my time on the features that were most valuable to the project.
design considerations
The color purple
It's important to get the basics right, basics meaning typography and color.
The Capacitype team wanted to 'own' the color purple for recovery, just as pink has become a strong force against breast cancer. In a purple pallet, I needed to find colors that both complimented and contrasted to help users easily find action areas on the page. The 'action pink' tested well in both WGAC test and the not-to-be-underestimated, eye to screen tests.
I settled on Mukta Vaani for the website. The Typeface had rounded characters complimenting the Capacitype logo. It was attractive in larger styles for titles and was extremely legible in the smaller text on mobile devices.
in progress...
Capacitype.com launched recently in beta form. We are still working to improve features and smooth new experience requirements. An important thing to remember, a good product is never finished, and we look forward to evolving as our Capacitype community grows.