In the run-up to January 2023 we migrated our first site – SDI.co.uk – to our new Design System.
Just under 3 years of research, design, build and, finally, the migration of content from the old site to the new site. This is a huge milestone in the development and success of our future websites for Scottish Enterprise.
What’s the value?
We created a new Design System to help deliver a better user experience for our internal and external users, as well as providing for more efficient digital change.
Some of the benefits of the new Design System:
- Improve how our content team use our system and add content to our sites
- Improve the UI inconsistencies for users
- Add flexibility to a library of components
- Provide a library of templates for ease of use
- Improve accessibility, core web vitals and reduce digital carbon emissions
- Our new design system isn’t just a component library it’s a full CMS web building platform
- The use of Figma tokens from design to code to allow us greater scalability across different brand sites
- An upgraded content management system (moving from Umbraco 7 to 11) that is more robust and secure, providing improved layers of security, particularly around our publishing process
New features include:
Modifiers
In addition to the above, we reduced the number of components we created as our audit highlighted that some components in our old library weren’t being used (for various reasons).
One of the main findings of the audit was that our components weren’t flexible enough. The new modifiers in Umbraco 11 give us extra flexibility that we didn’t have before.
Content designers can change colours, padding, margin and control display across all breakpoints (desktop/tablet/mobile etc) on most components.
In addition to modifiers, buttons, links and headlines can also be added to most components. During our co-design workshops, the content team highlighted that this lack of flexibility with the old system caused issues when creating pages.
Templates
To help the content team work more efficiently we built a library of templates. These can be added to containers to build up a page. This reduces the amount of time spent creating pages and helps to maintain consistency across the site which, ultimately, improves the user experience.
Cookie modal
To give our users control over how we use their data, we updated our cookie journey and how they interact:
- Strictly necessary – you can’t opt out of these cookies.
- Users have the option to opt into Performance, functional and marketing cookies with a clear and deliberate action to give consent.
- The option to edit cookie settings is available to the user from the footer of the site.
- We user tested the interaction and journey; users preferred the use of toggles and a pop up rather than a banner on the site.
Migration
The migration project brought together a cross-functional team and included colleagues from:
- UX & Service Design
- Content Marketing
- Marketing Analytics & SEO
- Development
- SDI trade and investment experts
Ahead of the migration starting, we carried out a full content audit of the existing site. The audit involved reviewing all site content, helping to identify what we needed to keep, reduce, redo or remove.
Based on the audit, we developed a refreshed information architecture. User testing was carried out to validate the changes we were making. All of this helped to deliver an improved site structure and navigation that better reflects the needs of our users
Following the content audit, we worked at pace over a 6-month period to migrate over 300 pages of content. We worked closely with SDI colleagues to review and update content, whilst also identifying sections or pages that required more substantial content changes post-migration.
Time to reflect
We ran some retros to review all the work we have done from a development and migration perspective, lots of good stuff, some interesting areas to improve and some key actions to take forward.
What went well?
- Communication, working closely with other teams and having regular short catch up meetings
- Project planning
- Support, positivity and creativity from colleagues
- The Design System itself
What could be improved
- Having information in multiple places (multiple Teams channels and conversations)
- Training
- The content team creating the site while development was ongoing caused a lot of rework
- Template naming conventions
Actions
- Further training for the content team
- Guidelines website
- Templates review
- Clarify roles and responsibilities from get-go for next migration
- Realistic timescales
- Greater transparency on development activity and bug fixes
- Make releases more visible to all teams
Next steps for the Design System
We have further enhanced features to build to support our next site migration:
- Cards with attributes (event listings, success stories, guides and publications)
- Enhanced Filtering
- Content review within Umbraco
Ongoing work to improve our accessibility, core web vital scores and to reduce digital carbon emissions from our sites.
We have just finished our analysis on reducing carbon emissions on SDI, more about that in a future blog.