Working as a Lead Designer at Five, I got a chance to work on a redesign of company's website. With a fast growing team and a lot of exciting projects across the world, we needed a more modern website with focus on projects and our expertise shared through popular blog posts.
We knew our site had to responsive and mobile, as mobile runs in our blood. Website needed to showcase our best projects with in-depth case studies and have a blog to present interesting articles about design and development. Also, there had to be a careers section as we are hiring great people constantly.
Sketching and wireframing
Our previous experience showed that there is just too much subjectivity when designing for yourself. So, we decided to avoid that as much as possible, and approach it as we do all our client work. Also, we didn’t want to start with any visuals before we settled on the information hierarchy and basic layout.
We started with paper sketches and wireframes, communicating constantly with the management team and getting input from as much people as possible. We iterated on wireframes for a long time, going through different ideas, and sometimes even getting back to the old ones. At the same time, we were working on a new branding and thinking about ways we would communicate our values, which would later define the copy.
At some point, we had to pick up the best ideas and stick to the decisions we made. Only then, we started with visual design. Even though we included developers from the start, to be sure we are going in a right direction and that we will be able to implement all our ideas, we didn't start with any development until we were sure there are no big issues that might emerge during development phase. As we know, these can be very expensive.
We started with a styleguide. We had a few different directions and finally picked one. From there, we worked on all the screens, designing with responsiveness in mind. Well thought-through wireframes helped a lot at this point.
The big idea was to create a truly device agnostic interface. That meant we couldn’t rely on hover states and similar visual cues you get when you use mouse. Today, even desktop computers have touch screens, so everything had to be optimized for touch. In the end, some of that got lost and final website doesn't follow the initial idea, but it’s still extremely usable on touch screens.
Because of the thorough design phase, development and QA was done in a record time. Only couple of smaller issues emerged during development, so we were very proud with what we've achieved with this project.
Everyone is really happy with the final release. It took us some time, but it was worth the effort. There are still some issues, but the foundations are strong and it can be polished during time.
Additional credits: Andrej Radišić (DES), Domagoj Kapulica (DES), Mario Radonić (DEV), Bojana Mandić (COPY)