Redesigning the UXDX Experience

A Live UXDX Conference in Ireland.
Source

Intro the the Project

UXDX is the fastest-growing product conference in Europe, bringing UX, Design, Dev and Product together in multiple small-scale community events throughout Europe and finally a major event in Dublin, Ireland. They are also hosting events in Asia Pacific and USA. As a Product (UX/UI) Designer I had to redesign the UXDX experience by revisiting the brand experience, the website’s UX and UI, and building a design system focused on scalability and flexibility. My main tasks were:

  • refresh their brand design in terms of colour scheme and application
  • provide a new design direction for all their marketing efforts
  • review the website’s user experience and reflect it through a revamped UI

Project Scope

A website was already in place, however the user journey needed to be streamlined and the UI updated to match the experience. UXDX wanted their users to enjoy visiting and using the website not just when they wanted to buy tickets for their conferences, but to refer to it as a leading source of knowledge and guidance in product design, development and management.

The website’s roles needed to be:

  • Increase ticket sales
  • Make the UXDX framework and model of working when developing products available to everyone, easy to navigate and read.
  • Have a progressive, timeless design based on high usability
  • Have a scalable design and a structured, possibly server-less back-end

Current website shortcomings included:

  • No clear starting point for the user journey on the page.
  • No reason (functional or aesthetic) to visit the website unless you are really interested in getting tickets for the conference
  • No reason to subscribe unless you want to be notified of the tickets pre-sale (in the event)
  • Tickets page very unattractive
  • No access to certain pages from Homepage 
  • Missing pages and information
  • The Agenda, which is essential to get new leads convert into sales, is very hard to follow
  • No video gallery
  • No categorisation (cannot search the website by term and get relevant posts/videos)
  • The blog layout was a completely different style from the rest of the website
  • Website in general had a lot of scrolling and a lot of text.
  • The colour scheme looked childish; it did not reflect what the company truly stands for.
A sample of previous FB posts: There was no clear design direction.
A sample of previous FB posts: There was no clear design direction.
A sample of the new design for social media posts.
A sample of the new design for social media posts.
The new design for social media adverts - an event ad.
The new design for social media adverts – an event ad.

Competition and Target Audience

Main competitors:

  • Web Summit, Mind the Product, Saastock.
  • Competing for: Same/similar audience, sponsors
  • UXDX: Much smaller budget, less sponsors, a younger, less-known company (4 years)

Audience & Markets

  • Product teams: UX/UI/CX/Product Designers, Developers,  Product Owners, Product Managers, Digital Marketing persons, C-Suite
  • Markets/Themes: Tech, Product, Marketing, Start-ups, International events, online training & courses, career advancement and development, teamwork and collaboration

The UXDX Design System

This was my first experience building a design system for a website, and I enjoyed it, however I came to understand that it is also a big responsibility. I was working remotely with developers and used the REM system for more precision and easier development. I also adopted a system of redlining, wherein the design elements are carefully measured and shown like diagrams (refer to images further down).

The design system was especially required to be precise and clear since my position was on contract basis, therefore I had to make sure that any other designer, developer or product manager can understand the information in the system and how to continue building on it. As a small startup, we worked in quite an Agile manner: we had stand-ups everyday to bring each other up to speed, planned the weekly KPRs on Notion, and then analysed what has been achieved and how we can be more efficient at the end of each week. We planned our work in sprints, using Kanban boards to move actionable items from backlog, to design, development and then to testing.

Other backend considerations included using Bootstrap, SEO implementation, going serverless, and using the push and pull method for data implementation. We used Airtable as the main database and separate system for content management.

Bootstrap Grid
Bootstrap Grid
Redlining method: more work for UX/UI people, but life made easier for development.
Redlining method: more work for UX/UI people, but life made easier for development.
Initial redline application on the design system.
A sample of the design system showing colour scheme and fonts, also in REM.
A sample of the design system showing colour scheme and fonts, also in REM.

The new UXDX website

There were many design ideas, however many times you need to find a balance, and a compromise depending on the deadline and the development. For example, the hexagonal header was proving to be a bit of a challenge to develop, especially when sizing down the device, therefore – in the interest of time – we changed our decision and went for a simpler header layout. When viewing the final website, you will notice how much the design developed. The initial idea revolved around the shape of the logo, in order to integrate the organic side of the brand and make it more apparent throughout the website, however these ideas changed as other circumstances and factors were taken into consideration. The design was also further updated after the end of my contract.

There was also a lot of testing of different CTAs, headlines and descriptions – it is quite tricky to implement SEO on your website without making it obvious or robotic, however, together with the marketing manager, we managed to do so.

The designs below were made using Figma.

A sample of the screens, initial designs
A sample of the screens, initial designs
A sample of the agenda, initial design
A sample of the agenda, initial design
A sample of the Speakers page section, initial design.
A sample of the Speakers page section, initial design.

The new UXDX website led to a 3-fold increase in sales, even though the conferences were cancelled and moved online due to COVID-19. The team was less stressed with customer care calls for simple questions such as where is the conference agenda as now there were no more pages with endless, unorganised information and the user journey was much more clear and intuitive through the new website UI. The redesigned website was launched in June 2020.

The new design direction for both the digital marketing aspect (social media posts, adverts, banners, etc) and the website has provided the start-up with a fresh image and a completely transformed user and brand experience online, and is now reaching its target audience more effectively; successfully obtaining a better ROI as result.

Final design for Homepage, a section.
Final design for Homepage, a section.
Final design for Speakers list, a section. As you can see it retained the initial design for the major part.
Final design for Speakers list, a section. As you can see it retained the initial design for the major part.
A sample of the Agenda screen, a section. As you can see this also retained a lot from the initial design phase.
A sample of the Agenda screen, a section. As you can see this also retained a lot from the initial design phase.