Redesigning UX Playground's website


Personal note

Working with a content strategy was the most valuable learning I had with this project. Starting the design process with words alone was a very effective approach to communicating ideas and concepts quickly. We were able to clearly define the goals early and had the flexibility to refine and remove anything irrelevant. Using real content also provided better context and storytelling, which reduced the development time of the website and therefore a faster launch of the new website redesign.

Overview

UX Playground is a design community for professionals, experts and industry partners to collaboratively learn about User Experience Design. The community is about connecting people and knowledge sharing through events, courses, workshops and client projects.

Redesigning the website

Our goal was to create a new website design using UXPG's new branding guidelines and with the following requirements:

Team

Natalie H. Man, UX Designer, Freelance
Chakib Labidi, UX Consultant and UX Playground founder

Creating the content structure

Using the Priority Guide framework, we identified the goals for each page of the website. As a team, we would review and refine the structure according to the defined goals.

Personally, this process made content creation more efficient and enjoyable because the goals are defined early and I was constantly considering whether what I write is relevant to the page. Additionally, starting with content first enabled us to quickly validate the information and reprioritise if we find anything that is irrelevant or too much. We were also more focused on the business and user goals, and not getting distracted by the visual elements/layouts.

A high level priority guide for the homepage

A high level priority guide for the homepage. We used this as the blueprint to start creating content for the pages.

Details added under each topic of the priority guide

Details added under each content topic of the priority guide. We also leave feedback and suggestions for the person working on the content. This is an iterative process so content can be added/removed depending on relevance.

Wireframing with content

Whilst my team works on the content, I focused on creating low fidelity prototypes of the new pages using Adobe XD’s wireframe kit. This process was unexpectedly easier when using the content we created. With clearly defined goals and context, multiple variations of a page design can be created quickly. The reviewing process was also efficient and allowed us to start the development process sooner once the final design was selected.

Wireframe variations for the Project UX landing page

Wireframe variations for the Project UX landing page. The same content was used but positioned differently for each layout.

Creating user flows

One of the requirements was to enable people to register for Project UX. To understand how the process may work, I have created the following user flows:

They were useful in highlighting any considerations we may have missed e.g. what happens after a user registers, additional pages etc. For website development, it was used to determine what plugins/tools was required and for planning the processes.

High level flow to show how we can create the registration process on the website

High level flow to show how we can create the registration process on the website.

High level flow to show the process of community members joining Project UX with a discount

High level flow to show the process of community members joining Project UX with a discount.

This flow shows the process of adding a new contact into Mailchimp when someone fills in a form

This flow shows the process of adding a new contact into Mailchimp when someone fills in a form.

Developing the website

For the website, the following were implemented:

My previous experience in web design and front-end development made this process easier. Researching plugins/tools needed to implement the functionalities above is a common task (including communicating with third party support and troubleshooting issues). Since the website was built on Wix, we were limited in developing sophisticated processes e.g. payment system, so we only use supported third party plugins and platforms.

High level flow to show how we can create the registration process on the website

Creating the pages of the website in Wix.

High level flow to show the process of community members joining Project UX with a discount

Payment form for project UX using Jotform and Stripe.

This flow shows the process of adding a new contact into Mailchimp when someone fills in a form

A form created in Powr for people to register their interest before Project UX launches.

This flow shows the process of adding a new contact into Mailchimp when someone fills in a form

Settings for creating a welcome email campaign for Project UX in Mailchimp.

A preview of the welcome email in Mailchimp

A preview of the welcome email in Mailchimp.

Website relaunch with the new design

After implementing the website functionalities and finalising the content, the pages were created based on the new brand guidelines. View the website here.

UX Playground's new homepage

UX Playground's new homepage.

Product page of Project UX

Product page of Project UX.

Sign up page for Project UX

Sign up page for Project UX.