Case study: UX & UI redesign of a corporate website.
Secrets of the design process, effective tools and key learnings.
The beginning.
Strong digital presence is the key in our highly competitive environment and this story is about a 3-month journey we took as designers to reimagine the old website for a big corporate — Octopus Group.
Octopus Group doesn’t think like most companies. The whole ethos, for their inception 17 years ago, is based on building a better tomorrow through challenging convention — whether that’s through investments, healthcare, fintech or renewable energy. Their underlying goal is to create friendly and innovative services to UK citizens.
And the design challenge was
Their website, however, didn’t reflect this dynamic. Aesthetically it was a visual dumping ground which didn’t do justice to the brand purpose. There was no structure to the content. It amplified confusion rather than coherency.
The solution: a website redesign.
We needed to create a system and that could logically to represent a wide breadth of content they started producing, including e.g. leadership blogs, research and reports, articles, etc. Also, to this it was important to come up with a modern and appealing visual style that will shine a light on the brand personality.
Make it easy to understand the company value and facilitate positive user experience through informative and relevant content to navigate potential clients in the right direction.
Design process
When you have a myriads of business requirements, constraints and politics, a systematic approach is paramount. Design thinking with a proper kick-off allowed us to define a business vision. This was followed by discovery and delivery phases. This article highlights key learnings.
Discovery phase aimed to understand and frame a problem area, collect requirements and analysing the context of use. Deliverables: user segments, sitemaps, wireframes.
Delivery phase is the solution space that makes ideas tangible, usable and beautiful. Deliverables: UI & interaction design, design system.
“The greatest challenge to any thinker [designer] is stating the problem in a way that will allow a solution.” — Bertrand Russell.
Discovery phase
I strongly believe that defining how any solution should work, what problems to solve and what gains to focus on are the core and fundamental aspect of any successful design process. Even if it feels like you know what is the answer to a brief are, take a step back and dive into research to define whether you’re focusing on the right problem to solve. Here, the beginner, ‘curious’ mindset plays a big part in revealing correct business objectives, real user needs and technological possibilities.
Therefore, we started our project by investigating internal (company) and external (users) drivers to crystallise the area of a potential solution, outlining how the website should work, but not how it should look. The process was divided into five steps:
Step 1 — Kick off to refine business requirements.
“Requirements cannot be “gathered” from your stakeholders like Easter eggs — they must be defined, through research and scenarios.” — Alan Cooper.
First things first, it took us a few workshops with key stakeholders (the business) to understand brand vision, overall goals and challenges. We needed their perspective on:
- internal: business needs, requirements, goals;
- external: context, competitors, best practices;
Documenting insights is important as this becomes a single source of truth which will inform the decision-making process and foster team alignment.
Step 2 — Site and Content Audit
To provide users with an enjoyable experience on the website it’s important to anticipate their needs to provide relevant information on each step. Therefore, different user types and their journeys informed the site structure. Based on this, it was possible to simplify user-flows between pages by removing unnecessary pages, merging existing and adding new when needed.
Step 3— Context exploration. When we had a general idea of the purpose of the website, we needed a system for presenting different content. Here, we got an inspiration from BBC, The Guardian, etc.
Step 4— Modular system. Following initial discussions about building a flexible modular system to represent various content, for our wireframes we created various elements based on the same logic and style with different hierarchy, balancing between images, headlines, and various supporting copy. Ultimately, we managed to create the whole website by using the elements presented below 👇
Step 4 — Wireframes
Finally, once all of the planning and foundation was built, we were ready to play with wireframes for the core desktop experience. Once you know WHY and WHAT we are doing in the written form constructing pages is a piece of cake. Of course, we went through circles of feedback, but it was pretty easy to move things around without involving design ego for graphics.
The main point: each page needs to convey the goal and present main user questions and concerns. This information needs to be structured logically to allow users to scan the page quickly.
Content always comes first, once you know what the page needs to achieve you can then focus on elements and graphical composition.
- Start your design process only after you’ve idenitified business goals, user problems and a roadmap — where deadlines and deliverables are clearly outlined and agreed with all stakeholders.
- Document all the key points from day one: business needs, problems, stages of design, feedback and discussions in one document (which become our single source of truth).
- Think business, understand their revenue stream and learn their language. Listen to any feedback given from business (you know how to do your business, they know their business!). Don’t fall in love with your design ideas — listen carefully to what business says. The best ideas can come from anywhere.
- Involve main stakeholders and especially developers at the beginning of a project to co-create ideas together.
Delivery phase
Once logic and functionality are defined, the visual design process doesn’t take long, and turns into an enjoyable meditation on aesthetic and design quality. Using wireframes and the modular system, the UI was created, following brand visual guidelines.
During this stage, a well-developed digital design guidelines helps you justify design decisions and deal with alternative opinions within the team.
Another important aspect was to provide all necessary materials, guidelines and recommendations for developers. Create this project together as a team. Don’t just hand over the designs and leave lots of decisions to a dev team. On the contrary — be a driving force to maintain high design quality to make your live project pixel perfect.
👉 Live website Octopus Group.
Delivery phase: key learnings
- Designers own a live result, therefore, we need to guide and support developers whilst they’re working on the project.
- Define your design patterns and language first. Consistency — is what defines good design.
Final say
Overall, reflecting on this process helped us to extract the key pivots that helped us, blockers that we should eliminate and all the learnings that we can use to improve our process next time.
Key takeaways:
- Never start design process until you get all business requirements
- Never jump in the visual design until you happy with your how solution works (UX).
- Always spend time during discovery process, to put some thinking on whether you are doing the right thing…And validate all assumptions before any line of code is written.
🚫 The process that we followed was great but still far from being perfect:
🎉 Ideal process —more time for problem definition and research:
Let’s talk
Questions, ideas, projects or just a deep chat about design as a process?
Find me here: Facebook, Linked In, Instagram.
Or join my design channel — Design Insights in Telegram.
