The Team: Working in the small but amazing team at IPPF consisting of a Digital Manager, Content Creators including SEO and Social Media Specialists we created content targeted at IPPF's external audiences and online users. We had an informal Agile way of working with weekly ideation sessions, informal daily checkins, tracking our work using Trello Kanban. Working with external developers Agile Collective on the upkeep of the website and larger more complex development projects as well as smaller boutique agenecies or freelancers for Social Media campaigns.
My Role: As Digital Designer at IPPF I worked on the UI and UX of the IPPF websites. I was involved in the end to end user journey, story telling, creating user driven content with the team including designing with data, targeted landing pages, emails, social media graphics, short films and illustrations. This work involved ideation, sketching, components, updating and maintaining the design system and also the development of landing pages within the Drupal CMS. I also Project Managed larger pieces of work such as the Transforming Lives microsite.
The Challenge: The IPPF website was on a burning platform, the version of Drupal we were using had security issues and as IPPF has opposition to their vision and security can be an issue we needed to move to the latest version of the CMS. The budget for the project was secured on the basis of a lift and shift but we were encouraged by our Director to make the most of the opportunity and push the boundaries of the scope to redesign the website within the budget and without causing too many waves from internal stakeholders. The old website was not responsive, the user experience didn't flow, and the look was dated.
The Solution: Working with Agile Collective we pushed the boundaries of our scope first performing discovery phase workshops to explore and analyse our information, study our user profiles, organisational focus and project limitations.
My role in the website redesign: I was involved and contributed in the early discovery phase workshops, continuing to collaborate with Aglie Collective thereafter to develop our design system, fonts, colours, icons and components. Through a process of feedback and iteration I created the hi-fi designs based on the wireframes we produced in the workshops. The design to the left was the hi-fi design of the landing page provided to Agile Collective.
Programmes: At IPPF I used a combination of programmes to produce low-fi and hi-fi designs. The wireframes above were created in Google Drawing collaboratively with Agile Collective and the hi-fi designs to the left where built in Photoshop with the .svg icons created in Illustrator. As we evolved and improved our ways of working at IPPF I moved into using Figma.
Continuing improvement: Once the redesigned website was launched, we need to continue evaluating and evolving with our users. IPPF's Individual giving page is a good example. The problem was a very low conversion rate of 0.2% on the individual giving’s form and a high bounce rate on the page.
Improving donation conversions through user centered design: We used Hotjar to record and track the interaction of the users then anaylzed the users experience to understand the steps required for improving the interaction and experience. I produced a new user flow and low-fi design in Figma (pictured below) then developed the hi-fi design in HTML, CSS and Javascript, providing these files to Agile Collective to plug in to the backend of the site. After the research, analysis and redesign of the page we had a successful 3% increase in conversion from when the new journey and interaction was implemented in May until June. You can read more about this process on this presentation I created and delivered about the process designing with data.
Dontation page journey mapping:
Donation page improved user flow:
Driving traffic to the website: At IPPF we ran social media campaigns hooked to Global Days to push traffic to our website. These campaigns may consist of a short film, quiz and associated graphics. My next instalment to this page will be more information about these campaigns so please visit again to find out more about my experience at IPPF.
