How we ran a sprint to refresh our design website, Part 2

This is Part 2 in the series about our website Design sprint. View Part 1 if you haven’t already!

At Canonical, our design team is dedicated to providing valuable resources and insights into designing for open source, especially when it comes to complex products. Recently, we started a project to refresh our online presence, organizing a sprint to redesign our website. This article is the second part of a two-part series that takes you through the methods and tools we used to streamline and redefine our design team’s digital footprint.

In part 2, you will read about:

• Executing the sprint – Day-by-day insights into the methods and tools used during the sprint, including how the team collaborated to implement changes.
• Post-sprint actions and delivery – A reflection on what we achieved, how the team communicated updates, and the next steps for maintaining a cohesive online presence.

For each section, you will find reflections on how our team experienced each exercise, the biggest obstacles, and lessons learned for next time. I hope you find valuable insights and can learn from our experience to organize your own sprint.

Note: Be sure to check out part 1, where we dive into the preparation phase!

Executing the sprint

Day 1 – Information architecture, acceptance criteria, user needs, page outlines

The goals

Day one was all about setting the tone for the rest of the week. We kicked it off with a presentation on our motivation for this project and our mission statement, followed by an overview of the agenda for the week and the main goals we wanted to hit:

• Set the tone for the week with a kick-off covering the:
  • Goals for the week:
    • Create content and wireframes for priority pages
    • Create a plan for remaining deliverables (spreadsheet with assignees, deliverables, and timelines to hand over to project management)
  • Mission statement
  • Future website information architecture
  • Ownership of website sections to maintain and create content for
• Present sprint structure
  • Walk through resources and where to find them

The journey

For day 1, we wanted our participants to understand the big-picture idea for the website. 

The kick-off meeting focused on a couple of points to set the tone for the week: 

• The outcomes of the information architecture workshop, to show how the different areas of the website would relate to each other.
• The mission statement, to give an idea of the tone we wanted to see throughout the pages.
• Insights from our Head of Design, to give the team more information on the type of people he was hoping we would reach with our website, and what he was excited to see at the end of the week.

Once we established the big picture, it was time to focus on individual sections. We divided the team into groups of 2 or 3 and assigned a section of the website to work on. Each group was tasked with understanding the type of people we wanted to reach with our content and the questions they might have. We also shared links to existing content for participants to reference, reuse, or mark as outdated to avoid duplicating work when possible. 

To ensure consistency across all groups, we provided a template for each group to complete, which could later be used as the foundation for the page’s meta description.

Most groups did some version of affinity mapping to work through their ideas.

Open design working group: what questions should we address with our content?

The outcome

By the end of day one, all teams had completed their template documents, outlining their target audience, content needs, and a few headline ideas. 

Day 2 – Headlines, connections, content

The goals

• Refine headlines and add content bullet points under each
• Work out connections to other pages
• Include basis for visuals in content planning

The journey

With clear outlines for everyone, we moved on to refining headlines, expanding on key content, and working out the connections between the different pages to facilitate future navigation. The goal was to enhance usability while laying the groundwork for future growth.

We also wanted to spend time finding media to support key points. Our visual design team gave a refresher on brand guidelines and shared examples of successful pages. This helped spark ideas and inspired ways to make pages more impactful and engaging. 

Visuals and content designers work together to create engaging and easy-to-digest pages, so it was crucial to plan so the visual team had time to develop high-quality assets. Crafting great visuals takes time, and identifying where visuals can enhance the narrative or break up the page improves the outcome for everyone.

Following the brand presentation, the attendees audited existing content to find what could be linked, reused, or repurposed. Additionally, we asked participants to include external resources that would add depth to their content. There is a lot of great information out there, and we want to amplify valuable resources and voices so our audience can find them more easily. 

The rest of the day was spent writing more detailed bullet points under each headline, ensuring the content addressed key topics concisely and effectively. Teams were also asked to provide ideas on the types of visual assets (images, infographics, and videos), their place on the page, and a short description for them. 

The outcome

By the end of the day, we had skeletons for all priority pages ready to be expanded into fully fleshed-out content and some ideas for illustrations or pictures to add to the pages.

Overall, this second day highlighted the benefits of layout templates for structuring pages and the motivational power of pair work, though the need for breaks and a more evenly distributed workload became clear.

Day 3 – Content, assets

The goals

• Refine bullet points
• Start writing full sentences
• Format your document to be a proper copy doc

The journey

We focused on refining content and ensuring it was structured for effective web use. Our content expert gave the team a presentation on our copy style guide and our tone of voice to help set the stage. Writing for the web requires an emphasis on clarity and formatting, making this day essential for resolving any content-related issues before moving into the visual design phase.

We also provided templates to help teams format their text files according to the web team guidelines. This was key to keep things consistent and make implementation faster. 

Organizing the pages according to internal text formatting practices provided valuable insights into discrepancies between groups. It highlighted areas where some pages were too dense and needed to be streamlined or supplemented with visuals to improve clarity, and areas where additional depth was needed to be valuable. This structured approach also made it easier to review content in context, offering a clear sense of how it would ultimately appear on the site without visual distractions. It allowed teams to refine phrasing and style effectively while keeping in mind the overall page layout and flow.

The outcome

By the end of day 3, all groups had finalized the content for their pages and developed a clear vision of the overall layout.

At that stage, keeping motivation high through recognition of achievements was crucial, as the intense focus had left many participants feeling drained. Concerns about consistency and standards highlighted the need for clearer expectations, particularly regarding the level of detail required in the content. To maintain momentum, we addressed these concerns in the next day’s kick-off session. 

Using the open design page as an example of how we use Google Docs formatting to experiment with layouts at the copy stage

Day 4 – Layout, wireframes, final content touches

The goals

• Finalize content writing
• Create low-fidelity wireframes

The journey

With the content and basic layout in mind, we started this day with a presentation from our visual team on how to effectively balance layouts using our grid systems and examples of best practices when designing layouts in Figma. The idea was to get the teams in a creative mood to experiment with visuals and focus on the overall flow of their pages. 

From there, we guided the teams on how to transfer their work from Docs to Figma using components from our low-fi webpage library, encouraging them to experiment with different layout options to find the best structure for each page. This process gave us a clearer sense of the final product and allowed us to refine the visuals and overall flow. The Round Robin review exercise was particularly valuable at that stage. It allowed the different teams to examine other groups’ work, offering inspiration and identifying areas for improvement.

The outcome

At the end of that day, we had low-fi wireframes for all the priority pages. Some teams also started experimenting with higher fidelity wireframes, using pictures they took during our in-person sprints to liven up the pages.

Extract of the low-fi prototype for the open design page

Day 5 – Wrap-up, finalizing planning sheet

The goals

• Refine wireframes from the previous day
• Fill out the planning spreadsheet

The journey

The final day was planning-heavy. Teams focused on refining the wireframes created earlier and compiling all necessary information for the web team into the planning spreadsheet. The goal was to ensure that the person responsible for delivering the website could access all the details needed to build the pages without being familiar with each one. To streamline communication, groups assigned a point of contact for each page, ensuring the project owner knew who to ask for additional information or clarification. If further work was required on a page, the designated contact person would also be responsible for tracking progress and keeping the project owner updated.

The outcome

By the end of the week, most of the pages were close to a final, high-fidelity version. A few pages still required additional visual refinement, and these were flagged for completion after the sprint. The planning spreadsheet was helpful to clarify responsibilities and served as a final progress checklist to wrap up the sprint effectively.

Seeing all the work coming together was incredibly rewarding and showed the significant progress made throughout the process. 

Extract of one of the high-fidelity wireframe options for the open design page 

Post-sprint actions and delivery

A snapshot of what our pages looked like on the final day

The goals

• Finalize leftover work
• Arrange a handover to the web team
• Gather feedback 
• Communicate success to other teams

The journey

Handing over the pages

After completing the sprint, we reviewed the high-fidelity wireframes and copy documents to ensure they were aligned. One key detail we focused on was verifying links and their intended destinations. Once we finalized each page, we cross-referenced the planning sheet with the Figma files and coordinated with the Web team to hand over the work. The structure was helpful to make sure we didn’t forget anything and expedite the briefing process.

Gathering feedback

At the end of the week, we sent a survey to the participants to gather feedback on the sprint’s organization and outcomes. The responses showed that despite an initial adjustment period, participants had a great time collaborating on a project that benefited the entire team. Many noted that the results exceeded their expectations, with the deliverables alone justifying the time commitment. Interestingly though, participants noted that the most meaningful outcome was the strengthened connections among team members.

Communicating success

Given the significant time investment required to execute this sprint, it was important to show a clear return on that investment.

We organized a presentation for the entire Design team to showcase the work attendees completed throughout the week, with special thanks to our moderators and in-house experts. Additionally, we shared the feedback gathered during the week, highlighting the broader impact of the exercise, strengthening team cohesion, and fostering a renewed appreciation for the incredible work our content team does every day.

We also decided to write this very series! The effort that went into planning and executing this sprint is worth sharing and celebrating, and hopefully, if you’ve made it this far, you’ll find it valuable too.

The takeaways

I was glad to see the positive reactions about connections, as this was an intentional focus from the start. As the team grows, building strong relationships becomes more challenging. We naturally tend to orbit around the same groups of people and have limited opportunities to collaborate with designers outside our product teams. With this in mind, I carefully paired people with different skill sets and seniority levels to encourage fresh perspectives and stronger bonds. This was tricky, as we didn’t receive the final attendee list until the sprint began, but we did our best to organize ahead of time. Seeing it pay off was one of my personal highlights.

On the flip side, we received a lot of feedback about the intensity of the week. In hindsight, we could have been even more cautious about how much we scheduled. Despite factoring in breaks, our agenda was still too ambitious, and midway through, we realized we should have scaled back further. Content creation demands deep focus and creativity, which can be exhausting without proper downtime. It’s tempting to maximize every available moment, but in the long run, this approach can be counterproductive. Breaks are essential for recharging and sparking new ideas, and without enough breathing room, engagement is more likely to drop.

Key takeaways and final thoughts

The sprint week was an intense but rewarding experience, filled with valuable lessons and achievements. Overall, the experience highlighted the importance of proactive communication, realistic pacing, and collaboration to create a successful and sustainable workflow. 

Here are some of my takeaways from the experience:

• Spotlight your experts
  Providing a platform for team members to share their expertise with the rest of the team was a great way to recognize our internal talents and for everyone to build empathy with one another.  
• Round-robin exercises are the best
  The round-robin reviews were instrumental in accelerating the review process, offering multiple perspectives that helped identify inconsistencies and actionable improvements more quickly.
• Keep it real
  Recognizing progress and setbacks was important to avoid people becoming overwhelmed or disengaged. The recap session at the end of each day helped with keeping the energy up as the week went on. It provided a space for the teams to chat and share advice or ideas, or just appreciate one another. 
• Under-plan and over-communicate
  Clearer and more proactive communication ahead of the sprint would have been helpful to gather more participants. Even with a conservative approach, our goals were ambitious. Having more hands on deck would have allowed us to lighten the workload and ensure a more balanced experience for all participants.
• Plan twice as many breaks as you think you may need
  Building in breaks is essential to avoid burnout and maintain productivity. It is especially important when working on brain-intensive work like copywriting, which requires a lot of focus. 

This article is the spiritual successor of this great article published years ago. I found it helpful when I worked on setting up this whole thing. Check it out next for more planning inspiration!

And if you missed Part 1 of this series, you can find it here!