May 2022|Adrenalin

Six Phases of a Successful Website Redesign

Your website is your most important digital asset and where a majority of today’s digitally savyy consumers will learn more about your product or service. An effective website strengthens customer trust and loyalty and is a vital source of new business, but redesigning a website is no small task, especially for enterprise organisations. In this blog, we’ve outlined a proven 6-step process that your organisation can use to guide your website upgrade and ensure it has a solid foundation of usability.

Step 1: Discovery

You’ve got an idea of why your organisation’s website needs an upgrade, but to home in on the issues that plague it, you need evidence and data. The Discovery phase is often used in UX and product design to ensure you have a defined problem space and clear direction ahead of any project. When it comes to your website upgrade, a Discovery phase will provide solid evidence and strategic direction to your project and even help you re-evaluate whether your website needs an overhaul.

At Adrenalin, we apply the Discovery phase to enterprise web projects by conducting reviews of existing industry and user research, analytics data and website usability.

Additionally, we conduct SEO reports and content audits with the purpose of boosting website performance. All these steps have helped our team ensure we are making data-driven and strategic decisions throughout a project.

Overall, the key deliverable during the discovery phase will be a clear, evidence-based problem statement and supporting evidence.

Step 2: Research

At the end of the Discovery phase, it’s likely that you will have identified knowledge gaps and problems that require more information – this is where the Research phase comes in.

At Adrenalin we use research to gain firsthand understanding of our client’s problem and increase the amount of knowledge we have of the client’s industry, competitors and their users. Our typical Research phase includes:

Competitor research: Reviewing competitors and identifying ‘category conventions’ I.e. the competing products or services that share similar characteristics with your brand.
Immersions: Taking on the role of a user and engaging in their day-to-day activities first-hand.
Interviews: Interviews with end users, followed by a summary report outlining key learnings and recommendations.
Shadowing: A target audience user or client stakeholder is followed (‘shadowed’) around for a day to gain an understanding of their day-to-day world.
Surveys: Online surveys are used to gain quantitative data.
Card sorting: Information architecture items are written on cards so that participants can sort, group and name the cards based on personal preference.
Market and behavioural research: A summary of general consumer trends or consumer behaviour research is collated.

Step 3: Plan

In the Planning phase you are distilling all the learnings from the Discovery and Research phases into an actionable plan for your website upgrade.

Goal setting is the first step in the Planning stage. The goals you set for your website upgrade should be specific, measurable, and time-based. For example, perhaps your Discovery phase has uncovered that, although organic traffic is high, lead generation and conversion rates are relatively low. A goal in this instance could be to increase your website’s conversion rate by 2% within eight months of the website upgrade. Specific, measurable, achievable, relevant, time-bound.

Whatever goals you set, ensure that they’re visible for the entire team to see and time-based, with deadlines set. Internally, we produce a number of assets to help document high-level strategy and goals, including a digital strategy report, which provides research findings and a vision for how to meet business objectives through a website upgrade. This is further detailed in the Digital Product Roadmap, a one-page summary outlining future improvements or new features for digital products, which meet short & long term business goals.

Step 4: Ideation

Once your team is fully informed of the problem statement and high-level plan, you can begin framing ideas for the solution. Ideation will help you bring together different perspectives from your team to ultimately produce more innovative solutions. Workshops such as Brainstorming sessions are an effective way to promote creativity and generate, compare and discuss ideas.

In order to facilitate focused effective Ideation sessions, you need a clear area of focus, set time limits and defer judgement. The initial focus is quantity.

Brainstorming styles such as Brain Writing ensure all voices are heard by combining individual brainstorming followed by group collaboration.

Once ideas have been laid out, frameworks like S.C.A.M.P.E.R allow you to prioritise and improve certain ideas be evaluating them from different angles as below:

Substitute (What would happen if we switched A for B?)
Combine (What would happen if we combined A and B?)
Adapt (Can we adapt this to a different context?)
Modify (How can we modify this idea/product to add value?)
Put to Another Use (What other uses does this project have?)
Eliminate (What can we eliminate?)
Reverse (How might we reorganise this project to make it more effective?).

Visual aids are also helpful to communicate ideas and can be produced through ‘Sketch sessions,’ where team members create low fidelity sketches in timed rounds and subsequently validate them with frequent and consistent feedback cycles

Step 5: Design and Development

The first stage of the Design and Development phase is the UX Design stage which takes the ideas generated in previous steps and brings them to life through the creation of a Sitemap, Wireframes and Interactive Prototypes.

Your sitemap should provide your website with a strong Information Architecture (IA) foundation, defining key pages, primary navigation items and child pages. A single-page tree diagram that includes all page names along with short descriptions and bullet points for content is an effective way to lay out your IA and define content hierarchy.

Once you know what pages to design and where they sit, you can begin the wireframing process. Wireframes are a simplified visual representation of a digital product, showing interface, functionality and content hierarchy but without branding and visual design. They allow you to explore functionality and layout as well as gain feedback before committing to visual design. Collaborative prototyping and design software such as Sketch is a great place to create a low fidelity site interface and layouts for desktop and mobile.

Following this, an interactive prototype acts as a wireframe with interactive states and content, showing key user flows and functionality. In an interactive prototype, different frames will need to linked together to showcase user flows and simple animation transitions may be required to demonstrate interactions and transition states. This prototype can be shown to a small group of potential users for UX testing where users will be asked to complete a set of tasks to test how usable the design is.

These interactive prototypes can then be transferred to Visual Design to produce final, branded mockups before being transferred to a web development team. During the web development phase there are a number of technical requirements to fulfil before your site can go live. Whether you have you outsourcing this process or doing it in-house, a project roadmap and go-live readiness checklist will help you ensure that your website is well-built and has seamless functionality. Some considerations during this phase will depend on whether or not you are migrating your website, what tracking and analytics you need installed, as well as security and SEO.

Step 6: Measure

Ongoing monitoring of asset performance after launch is key for to maintain your website and identify opportunities for improvement. We like to conduct these activities should be at 3-month intervals to provide a measure of project success for the project team and the client. They can also act as a launchpad for further improvements.

There are two high-level types of performance reviews you can use. Milestone reviews are KPI performance reviews that check how a digital product has performed against its KPIs at key project milestones. Digital Health Checks can also be used as a more in-depth performance review, which also reviews competitors and consumers to identify broader strategic opportunities.

Consumers today expect a seamless online experience and the ability to provide this “frictionless” experience on your owned website is critical to driving brand loyalty. By taking a leaf out of the UX and product design handbook it’s possible to place end users at the centre of your website redesign strategy.