BHF requested my services to redesign and refresh their website with a key focus on increasing their income via donations and event participation.
Tasks
I ran feedback sessions with the content team to help gain a better understanding of the issues they were facing, this gave me a good internal perspective of what each component was struggling to deliver.
I also gathered feedback from users to better understand their perspective, ensuring the site was developed with a user-centred design approach, taking their needs into consideration was the utmost priority and key to improving the site.
With a clear understanding of the direction, I was then able to sit with the rest of the design team to set out a schedule of work, focusing on the timescales each component would require.
Each component was given a time slot for completion, this ensured the design and development team had a consistent flow of work and gave both teams enough time to complete each component.
Actions
Based on the component briefs I then began my competitor research, this helped me understand how other charities focused their components and design systems on increasing donations and event participation.
With a clear direction now forming, and after a feasibility call with developers, I began redesigning the components in Figma. I like to put each component through it’s paces, pushing each iteration to failure to ensure the final design is robust and responsive on all platforms. I explored layout, font sizes, content limits, colour combinations, images etc, all iteration stages provided a design I could progress to the next stage, with an eventual final design, this process was repeated for each component.
Each component was built using our evolving design system, the base structure of primitive tokens was to define the underlying colours, spacing and sizing. On-top of this layer was semantic tokens, this helped us define states and specific uses such as primary and secondary brand colours and success, error and focus states. The final layer was the component tokens, this helped us to apply specific tokens to each component, enabling us to modify multiple component instances easily if the design changed.
As each component was nearing completion, I would run a design critique session, this consisted of our team of UI and UX designers joining a Miro board together in a timed session, to review and give feedback on a component. This feedback was then incorporated into the final design.
The next stage was to handover the designs to developers, this was done using FigDev mode in Figma, each component was annotated and clearly labelled to ensure accuracy. It was important they understood the designs and token usage and the reasons behind our design decisions.
Results
The final outcome was a clear redesigned website focusing on all the wonderful work the British Heart Foundation does, promoting events and giving the user a clear and simple way to donate. Our work on the website increased the donation rate by 15% and participation to events was up by 20%. I am very proud of the work we did as a team and really enjoyed working with everyone on this project.
