Codified: Website redesign

About the project

For my final project at Ironhack, I helped a real-world client re-design their company website. This project lasted 2 weeks.

Helping Codified stand out in a crowded market.

Codified needed help creating a new corporate site to reflect their rapid growth over the last 5 years. I worked independently on the design and was responsible for the UX and UI of the site. I reported into the founder of Codified and had regular check-ins with them throughout the process.

Codified helps leading brands create mobile apps. They needed me to design a website that reflected their strength in engineering and their professional approach to delivery. Codified are laser focussed on security and the quality of their code. It was also critical that in a very saturated market, the new site highlights the core USP’s of Codified and differentiates them from their competition.

How might we help Codified create a better website for their business?

Original website

The old Codified website does not represent a leading London app development agency. The design of the site looks like it was done quickly by someone that is not a professional designer. It turns out that the founder Martin had created the site himself in the early days of the business and had never had the time to update it.

Competitive analysis

I started the project by looking at five other mobile app agencies based in London who offer similar services to Codified. I wanted to get a better understanding of the industry and see how other agencies present themselves online.

As you would expect for agencies, their ‘services’ all formed a key part of their website. Most of the agencies I looked at also had a blog section and used images alongside the text to make the blog more visually pleasing.

User interviews

I conducted user interviews with some of Codified clients to have a better understanding of what they would look for in a website when they are looking for the service of an app development agency.

Insights

All the potential clients I spoke to where in agreement that the main thing they wanted to see when landing on a website like this is that the agency has worked with similar clients on similar projects. This ‘social proof’ was critical in getting their attention and helping them trust that the agency is a partner worth speaking with.

Potential clients also wanted an easy way to contact the agency. Ideally they want to see a phone number clearly visible above the fold so they can pick up the phone and start a conversation without the need to for filling in forms and waiting for a reply.

A good blog with relevant content is important to them when getting to know the company as it builds trust and shows that they are capable and experienced in what they do. However, most clients admitted they don’t tend to read more than one blog post and many just skim through the titles of the posts.

The main take away from all my conversation is that nobody wants to waste their time clicking through lots of pages to find information about what an agency does.

User persona

Meet George.
George is the CTO of ZAGAT in New York.

He is responsible for leading a team for mobile engineers and his current project is to create a new mobile app for Zagat.

· He is highly technical, he reads lots of blogs and articles about the latest mobile technologies and he is excited to work with the Codified team and learn more about React Native.

· His goal is to find a company to work with that he can trust. He needs to see that the agency has worked with similar clients on projects of a similar size.

· His project is time sensitive, and he wants to get in touch fast so he can talk about his project.

One of his current frustrations is a technical problem his team can’t solve. He wants to know if Codified have solved a similar problem before.

User Flow

The flow I designed for the site is very simple and reflects the fact that there is not a huge amount of content to be shown to users.

Users start on the landing page where they can scroll down to read about the history of the business. Once the user gets to the bottom of the page, they are able to get in touch through a contact form. This contact is a call-to-action that repeats at the bottom of every page, so the user is able to get in touch with ease.

The site header provides clear navigational direction to the other key content sections.

Low-mid fidelity

I started the project by creating a low-mid fidelity prototype and then conducting some user testing.

The initial feedback was positive. People commented that the structure was clean, and the navigation was easy. The only thing that confused people was the “Get a quote” feature as it felt too similar to the “Get in touch” feature.

At that stage I also presented the prototype to one of the project stakeholders. They were really happy with how the project was progressing. Their only suggestion was to remove the clients quotes section. A lot of the work Codified does is confidential and it can be tricky to ask their bigger clients to give quotes.

Mood board

As part of this project, Codified gave me a new brand to work with. I wanted the site to feel pacey and dynamic so that it reflects the fast-moving nature of the market Codified operates in. I chose strong, energetic images to complement their brand colours and looked for shots of the city of London to make the link back to their base.

Hi fidelity

Conclusion

The real challenge of this project was learning about an industry I knew nothing about and understanding their needs as a designer. It was very interesting to learn about the Codified business and their goals and exciting to get to work so closely with the founder.

Codified quickly got my designs into production and launched the new site within two weeks of me delivering the design files. We also worked together once it was live to make some final tweaks to the live site. The result can be found at getcodified.com