California College of Arts: Center for Impact
The Center for Impact needed an easy-to-update website to attract investors to the California College of Arts work. They didn't have the budget for a custom-coded site and needed something that would be very easy to update. Unfortunately, college was not prepared to create a site for them, so they had to go it alone. They didn't have a vision for achieving this when they approached Carbon Five, the agency I worked with at the time.
My Carbon Five teammates knew that this was a perfect project because I could take on the bulk of the project, acting as a product manager and strategist. I was a bit rusty at WordPress, but I have always been fast on my feet to relearn technology like this. I leaned on recommendations from my peers and research to provide an initial scope to the client and a recommended direction. I suggested we use Flywheel to build the local staging version and a front-end editor like WPBakery to produce the site. I was assigned an intern designer for this project and an engineering contact that could provide me small CSS recommendations and help as needed to limit the human resources devoted to this project.
During our kickoff, we mapped out 4 different user types along a funnel: Awareness > Exploration > Taking action > Retention -> Advocate.
We visualised the journy maps that were produced in the kickoff meeting - so that our stakeholders could have a nice reminder of the work we’d done in their future work.
Kicking off together
A well-planned kickoff is crucial for any project like this to fully understand the business goals, the user needs, and the visual design direction.
I find that it’s the most crucial step to avoiding scope creep or traveling down a path that doesn’t serve the business or the users.
There was no existing branding beyond a logo and a few old videos and case studies from the Center for Impact. So I pulled together a team that included stakeholders from CCA, an Engineering representative to help with scope, and the design intern. We held a one-day intensive kickoff that included mapping sessions, value proposition brainstorms, user scenario mapping, and wireframe sketching.
This was SUCH a fun day, and it set the tone for the project in the future. The clients were super engaged & the engineer was incredibly grateful to be included early on.
Testing early prototypes with user
Immediately after our workshops, we had a set of VERY rough sketches and a better sense of the overall vision and direction.
We got to work creating a set of very simple wireframed prototypes to learn how CCA students and investors might navigate the Center for Impact website.
We iterated on our prototype many times, and in our final rounds, we were testing on a local version of the WordPress site, which I built in advance of the final designs being completed.
User Sessions with investors and Students. We began these session 1 week after our initial kickoff meeting, and iterated on designs as we spoke more with users.
Early wireframes - built iteratatevly as I validated these layouts could work in our wordpress template.
Final Style Guide
Early Design Exploration of possible photo treatments and font styles
Designing Center for Impact
I worked with my intern designer to create some proposed design directions that played off of the word "impact."
She had the fantastic idea of using "Tangrams" to play off the logo, and our client loved this. Next, we worked on a set of photo treatments that applied subtle jagged shapes "impacting" the photography in exciting ways.
It's worth noting that while I was directing our inter on the visual look and feel, I was building the framework of the WordPress site locally on my machine using FlyWheel, so we could validate that our proposed design recommendations would, in fact, be doable in the WordPress template we had selected.
Delivering process videos
WordPress can be tricky.
I made sure to include a set of handoff videos to help the Center for Impact’s small team hit the ground running with the site.
I made sure to record process videos of the frontend process to make this new robust experience work for them!
Results
At this time, the Center for Impact no longer has to manage its WordPress site because the primary college finally launched a real hub for them to host their projects.
The Center for Impact found WordPress to be beneficial to them while it was live. Their team was happy to have an easy to update, unique and attractive website that attracted investors to the Center for Impact’s work. In addition, the stakeholders at CCA enjoyed collaborating with our small, scrappy team!
