A case study by mrozilla.cz
Refreshing a startup competition
Vodafone Idea of the Year is the oldest startup competition in Czech Republic involving feedback from experienced entrepreneurs, valuable prizes, and up to €3.75M investment.
After flying under the same style for multiple years, I was asked to extend the visual style and restructure the digital presence in September 2016. We’ve agreed on the following:
- Extending the visual identity
- Revisiting the information architecture and communication style
- Launching a new website
The visual identity
There’s no need to change the logo just because we’re updating the visual identity. I know, it’s tempting. But it’s not necessary to change the logo at every possible instance.
Looking into where we could actually bring value—the first step was the technical execution of the existing materials and how they were used by external designers.
We’ve redrawn the logo from scratch, fixed the proportions, colours, and stuff. Created a handcrafted black and a white version (surprisingly, opacity-based designs don’t translate into black-and-white too well), and generated all the different file formats to be used.
Next, we’ve used the elements of the logo to extrapolate a full visual style for the project, including colours, typography, and imagery style.
And then we started producing templates. Tons and tons of templates. Everything from high-end layout templates for posters/rollups/etc. to be used by external DTP designers to simple document templates to be used by employees within the organisation.
All of the designs were delivered in a live Dropbox folder to ensure the client always has the most up-to-date version.
The information architecture
Moving to the digital world, we’ve mapped the user journeys, the benefits, and the information needed in each step of the funnel which ultimately ends with sending an application for the competition.
Each step in the funnel later corresponds to a page on the website, with blocks of information represented only by their topic and next corresponding step in the funnel.
This works magic in discussions with the client, allowing them to focus on the structure without any visual distractions.
When the structure is agreed upon and set in stone (well, it never is, but at least for that step), it’s time to decide on how to visually represent the blocks of information (e.g. hero image with overlaid text, image with text on the side, lists, etc.)
Still no actual design involved, apart from usage of the brand colour in the to-be-interactive elements. It makes the client happy to see the colours they know in a mockup.
At this moment, I’m already preparing reusable building blocks for later, they will come in handy when actually coding the designs.
The website
With the information architecture done, it’s time to put together a data model and finally build the website. I don’t do high-fidelity mockups, it saves so much time designing directly in the code.
Defining the website data model is just going a little deeper into the information architecture. Agreed to show a timeline of the competition on the website? Great, to show it we need a date, a milestone, and an applicable year. Next. It quickly becomes a drill.
We’ve moved the website from an obscure custom-made CMS to Wordpress. You know, because there are more people in the world who know how to use/maintain Wordpress than your obscure CMS.
Then the classics, custom-build a Wordpress theme (I prefer not to use someone else’s blackbox). Every building block got its own custom shortcode to enable quick-and-easy Lego-like building of new pages. It speeds up my work and it enables the client to make changes on their own. Everyone wins.
Then we iterated the design. Way faster being in the coding stage already.
We’ve built a Wordpress-based application system (shoutout to https://twitter.com/tomwaw for helping), including email reminders, filtered exports, and some other fancy things.
Migrated all the old blog data (manually, because SQL versioning sucks) and deployed.
Of course it broke at first but that’s why we deploy to a test system before going public.
Wanna read some more? Don’t worry, I’ve got you covered — more case studies (and some other cool stuff) on my website:
Also, you should totally follow me on ️https://twitter.com/mrozilla
Or just leave a comment below, that’s fine as well.
If you’d like to hire me to do something similar for you, drop me a message at jan@mrozilla.cz
