When the Cabrillo College Foundation came to Milano they had three specific requirements that needed to be met in order for us to win the job. The non profits primarily goal was to simplify the donation process and allow donors to make recurring donations for maximum ROI. The information collected from the donation form also needed to integrate with their razors edge database so that everything was seamless. And last but not least they wanted a beautiful looking website that was going to function as well as it looks for all devices and could easily be maintained through a Content Management System.
- UI/UX Design
- Stripe Integration
We started out by researching the latest tools that we could utilize to make this project come to fruition using modern API’s. Once our plan was intact we move into user flows and wire framing to ensure their story was being told in an elegant manner. After the wires were approved we did some minimal branding by altering their color pallet and typography but still keeping it within the realm of the rest of the college. We then laid a modern design on top of the wireframes and started to bring this project to life. Before moving into development we provided them with a clickable inVision prototype so they could approve the design and the flow of the site. Once they gave us the green light, we moved into development.
Normally, we get to explore more branding strategies but in this case we were only able to play around with modernizing the color pallet and typography. We introduced them to the use of gradients and diagonal sections and they instantly fell in love with these simple design elements which kept them on brand but game them new life.
Before jumping straight into designing we first planned out how this site was going to flow by simply sketching things out using not but a sharpie and graph paper to get the ball rolling. Once we have our basic concept laid out we then do a white board session and implement new ideas that arise. We then produce high-fidelity wireframes and put together a prototype for our client so they can see how things are mapped out.
This is always the fun part for us. We love designing interfaces that function as well as they look. Being a development and design studio we’re able to bounce ideas off one another to ensure and awesome experience for the end user. Often times while designing someone will walk by and say “what if it opens up like this? or slides like that?”. This often plays a huge role in how we design our digital goods and we feel like this is what separates us from design only studios.
It’s finally time for us to get nerdy and start building out our layouts and implement our API’s so that we can hand off a solid tool for the foundations business. We used foundation for sites to build out the layout and utilized flexbox, css grid and many other features. Tools like gulp and webpack make it easier to speed up our workflow so that we can use sass, live reload and minimize our files and images running a build command.
Once our templates were build we laid them on top of the WordPress platform using Advanced Custom Fields and Custom Post Types so that the client could easily make changes on the fly without breaking the site. After the CMS was built we integrated the stripe payment API for recurring donations and setup stripe to spit out the information received to their razors edge database.