Placemaking Week Website Redesign (C)

Placemaking Week Website Redesign

 
 
OVERVIEW

A website revamp to provide easy access to information and entice potential attendees

Placemaking Week (a subset of Project for Public Spaces) is a weeklong global gathering of placemakers that emphasizes hands-on learning and innovative social events, while leaving behind a public space legacy in local and international host cities.

I was part of this ambitious project to redesign the desktop and mobile website with focus on restructuring and refreshing the website's visual identity in order to attract potential student attendees (new and returning).

CLIENT

Project for Public Spaces’ Placemaking Week (worked with Pratt Institute’s Center for Digital Experiences)

TEAM

Hiral Parekh, Jonathan Duxbury, Xi Yang, Ian Gregory

GUIDE

Prof. Nancy Smith

TOOLS

Figma, Balsamiq, Optimal Workshop

TIMELINE

14 weeks, Spring 2020

 

 
 
PROBLEM

Inconsistent information structure and excess of information - an obstacle in event sign-ups

The Placemaking Week website is currently bogged down with substandard user experience causing confusion in providing website visitors an easy access to valuable information.

This discourages users to sign-up for and attend the organization’s thought-provoking international and local events.

Existing Placemaking Week website

My Role

I collaborated with the team members at every step of the project from the beginning.

Jonathan and I were jointly responsible for designing the web and mobile onboarding experience, the About Page and the mobile Navigation Page for the website.

I individually worked on the persona, conducted 5 in-person user interviews and 3 remote usability tests, derived the new color palette and image representation, designed the Events Schedule on the Events Page along with the Call to Action buttons and read more/read less option.

Solution

A responsive website with structured event information, thereby attracting potential attendees

As an educational tool, Placemaking Week should provide the event attendees with the information they need with as little friction as possible.

This redesign is built on the idea that Placemaking Week should entice more website visitors to become event attendees with clarity of information.

 
 


APPROACH

Research + Design + Test + Iterate

We relied on the questionnaire analytics in conjunction with 15 interviews and 8 usability tests. This allowed us to gain deeper understanding through combining both qualitative and quantitative information and iterate further. Here’s how it all started -

KICK OFF

Initial insights from client meeting

At the outset of the project we didn’t have a clear mission or specific goals for the redesign. The client's main aim was to increase the number of potential attendees for the international event and fix the confusing navigation.

USER GROUP

Students with a background in Architecture and interested in Urban Placemaking

We realized we should target the academic sector. Architecture students are an important user group because they already have a basic idea of what placemaking is and would be curious in delving deeper into the field through the medium of the placemaking week events.

Research Method

Online questionnaire, user interviews and user testings

We conducted a user survey along with user interviews and tested the existing website with 15 participants. Our goals were to better understand their usage and the challenges they face using placemakingweek.org.

 
 
 

User Persona

With the research so far, I identified a persona whose user experience is likely to improve after the redesign.

Aaria Verma
25 years
Urban Placemaking and Design Management student

- Outgoing, curious, organizer, and an explorer
- Enjoys networking and being exposed to new ideas
- Would like to attend a placemaking event to gain knowledge, interact with speakers and enhance her presentation skills
- Hopes that the event is affordable for her

So, an important requirement is also for such events to be affordable. This guided us in highlighting the Scholarship information about the event and also making the overall information clearer.

 
 


Pain Points

The website’s consistent inconsistency and
excess information

Although users were able to sign-up for events, they continued to struggle with excess of information and a confusing navigation.

 
 
 
“This website is off-putting…I know placemaking and everything about PPS is so interactive but this placemaking week website lacks that soul. It has too-much text and it doesn’t very loudly tell you that read the conference report. I could have easily missed that.”
 
 
 

Discussions with users revealed the following loopholes in the current design:


Delay in understanding what is the website about

The landing page does not talk about what Placemaking Week is and so it took a while for some users to understand what the organization did and what the purpose of the website was.



Inconsistent navigation leading to unorganized content and confusion

The website navigation did not follow the same structure. There was a point where the navigation was lost altogether and the user was forced to use the ‘back’ button instead.


Excess of information making the user grasp too-much at one glance

The website at first glance is very text-heavy and seems exhausting. Not all users wanted to spare so much of time.


Easily missed Call to Action button

The Call to Action buttons throughout are not eye catchy enough. They can go easily unnoticed.

 
The Makeover

Organization is key

It was clear that fixing the existing site map was a priority. Our high level goals were to -

  1. Group categories as per user’s mental model
  2. Make it fast and easy to use for everyone
  3. Avoid having too many categories that will confuse the users


Card Sorting

So, we created 42 cards to be sorted into categories by users and conducted an online card-sorting exercise to find the user's mental model of content categorization.


Tree Testing

Using the data from card sorting, we laid out 5 tasks to be performed as a part of tree testing to further refine the site map. This helped with the categorizing of the FAQ section.

Navigation Tree laid out for the testing

Tree Testing results for the 5 tasks

Analysis of Tree Testing


New Information Architecture - A sequential structure

Placemaking week’s redesigned information architecture uses a sequential structure. The users go step-by-step through content to accomplish the task they need. The aim was to inform the users first and then encourage them to register for the event.

 
 

Redesigned information architecture based on card sorting and tree testing

 
 
MIND ON PAPER

Sketches

Based on research, I knew an onboarding experience would be necessary along with a sleek and minimal design, so I sketched out basic wireframes accordingly.

 

Initial sketches

 
User Testing

Low-fidelity wireframes

In building wireframes, we wanted to ensure a consistent and user-centric flow of movement throughout the process.We used Balsamiq Mockups to quickly create low-fidelity mobile and desktop prototypes.

 
 

Low-fidelity desktop prototypes by Jonathan and myself, mobile prototypes by Cassie

 
 
 

Usability Testing

We tested the following tasks remotely with 8 users using Steve Krug's think-aloud method.

 
 

Desktop Prototype Testing -

  1. Get onboarded to Placemaking Week website
  2. Find out how to apply for a scholarship to attend the 4th International Placemaking Week
 
 
 

Mobile Prototype Testing -

  1. Get event details on the Opening Reception + Mayor’s Welcome
  2. Register to attend the 4th International Placemaking Week
  3. Find information about the 2017 International Placemaking Week in Amsterdam
 
 


New Insights

In the new design, the users were able to find content without getting confused or lost at any step. Additionally, the following new insights inspired further improvements -

  1. 5 users found the on-boarding experience informative and enticing while the rest found it disruptive

  2. Sub-navigation bar on the desktop home page was confusing

  3. The Upcoming Events Page on the mobile version was quite successful and helpful for the users

  4. More contrast between Learn More button and the image behind it suggested


SETTING THE MOOD

Revamping the Visual Design

The website was redesigned with the aim of reviving the original identity of the organization with minor revisions in categories like layout, color palette, typography and iconography.

(Presentation Style Reference: Google Material Guidelines)




Responsive Grid System

All pages use the same responsive grid, which has flexible columns and padding that can resize depending on the screen width (such as mobile or desktop).


Color

The new design has adopted a color theme with three primary colors - orange, black , white, and 2 secondary colors - dark blue and light blue. This theme allows Placemaking Week to stay close to its parent brand PPS and still have it’s own identity and present readable, distinct information.

Placemaking Week’s color theme

Color and Image

There are two types of color and image renders. One is a full bleed image with a semi-transparent black fill and white text. Other ones are images accompanied with a light blue background for enhancement.

1. Full bleed images with a semi-transparent black fill and text
2. Images with a light blue background


Typefaces

The new design uses two typefaces:
1. Nexa Bold
2. Open Sans

1. Nexa Bold
2. Open Sans

Type Scale

This type scale provides the typographic variety necessary for the mobile and desktop content. Most copy is set in Open Sans, though Nexa Bold is used for headlines, sub headlines, quotes and buttons.

Placemaking Week’s mobile and desktop type scale



Iconography

We took the approach of using recognizable, functional icons that don’t have customized, distinguishing characteristics or ornament. By not giving their icons branding or distinct style, they can be paired with any content of any tone.

1. To create consistency, all of Placemaking Week’s icons share the same underlying grid structure
2. A collection of Placemaking Week’s icons

TRIAL & ERROR

Initial failed designs

Focusing on the feedback from the onboarding experience, I started working on a couple of iterations for the the initial mobile screens. Some of them seemed confusing, some were difficult to read.

 
 

Iterations

 
 
 
FINAL Avatar

Mobile first, Desktop second

After an extensive groundwork process and couple of iterations, we moved on to creating the final design for the mobile version first and then adapted the layout to desktop version. Below are the hi-fidelity screens for the same.

 
 
 
New Users

Welcome the new users and onboard them to the website features and purpose

 
 
 
 
Home Page

Explain what is Placemaking and Placemaking Week along with Events and FAQs

 
 
Upcoming Events

Upcoming Events Page with an option to look at the itinerary, attendees list and a prompt to register

 
 
Past Events
Conference Reports

Show Past Events through Conference Reports

 
 
Registration Page

Guide through the Registration Process along with Scholarship Details and Refund Policy

 
 
Thank You Page

A Thank You Message after registering for the event along with details for a Virtual Introductory Session

 
 
Before/After

Desktop Version

 
 

Before

After

 
 
Client Face Off

Onboarding - the Show-Stopper

During the final meeting with the client, we presented our redesign as a team. The onboarding feature stole the show. The clients appreciated that feature, especially the ‘Events near you’ concept along with the subtle change in the color palette and well thought-out navigation.

Learnings and Takeaways

Great beginning, lots to do more

It was incredibly rewarding to take on a problem and create a solution for a website that so many users will benefit from. This redesign is just the beginning. I would like to still improve upon the UX and app features based on further user research and testing.

Creating a Design System

Redesigning placemaking week website pushed me to create a whole design system from start to end: an ongoing onboarding experience, several core pages and a mobile and desktop interaction.

Less is more

With this project I learned how necessary it is to understand the user's goals to know which information is the most important. Identifying what causes confusion and realizing when to weed it out allows for ultimate ease and functionality.

Don’t let the constraints constrain you

Time was a constraint and the Covid-19 situation in the middle of the project didn’t make things easy either. But I learnt an important lesson - Do not let the constraints constrain you! We took advantage of the digital tools we had and continued to work hard and achieve results.

Collaboration

I had the opportunity to work with an excellent team and realize the importance of group co-ordination, especially at difficult times.