PlaceSpeak Consultation
Edit & Create

client

PlaceSpeak

Skills

UX Design
UI Design

UX Design
UI Design

Summary

I helped redesign PlaceSpeak's online consultation create and edit feature.

company

PlaceSpeak is a web application that facilitates legitimate and defensible online citizen engagement processes by connecting the digital identity of participants to their physical location.

PlaceSpeak

problem statement

As part of Placespeak’s redesign of their consultation editor page, they needed to also redesign their process for setting up and publishing an online consultation, using this as an opportunity to improve a noticeably outdated and complicated experience.

Analyzing problems with old consultation editor page

*

There is no instruction to guide what the client needs to do in order to publish.

*

The list of settings are not listed in a logical order.

Organize websites in a way that is efficient for both prospective clients and sales department to find what they need

*

Clients are presented with too many options at once.

*

Does not promote the client to notify their participants on updates

*

Styling for similar interactions are inconsistent from setting to setting.

old 1

Old consultation editor page

old map

User flow for creating and publishing an online consultation

Understanding placespeak as a whole

To understand Placespeak hollistically by create a sitemap of the entire product and gather insights on the current consultation editor from current and potential customers, as well as staff, to see how it fits into the whole product.

site map copy

Colour-coded site map to see which pages will be affected by changes made in the consultation edit page

Redesign Goals

1. Streamline user flow for publishing and maintaining a consultation

approach

In order to streamline the publishing and consultation maintenance flow, I needed to understand their goals at each touch point so that I could match the settings that is being presented to them.

Through interviews, I gained the following insights on client goals and which settings they use before and after publishing, or both.

goals before adn after

Goals before and after publishing a consultation

settings before and after

Settings used before and after publishing

2. Group settings in a meaningful way to increasing their findability.

approach

With collaboration with the customer success, sales, and development department, I came up with 4 sections based on their experiences with the users; we defined them in the following way.

general flow before and after publish

General flow of settings before and after publishing consultation

card sorting exercise to group settings

To validate those sections and see which section the settings should be placed, I conducted a closed card sorting exercise with users.

I gave 20 of my participants a list of tasks/settings and told them to place them into the 4 groupings as mentioned above.

Groups of settings

Card sorting method results

3.  Make similar interactions in different settings the same and keep a consistent visual language.

approach

Below is the page structure that every settings page will follow. They will have a progression bar that doubles as a navigation for the setting groups at the top, the individual settings on left and the content of those settings on the right boxes. The circular check mark icons will signify which sections are mandatory.

structure 02
structure 01

General Page Structure for all the pages

Applying the template to each settings page
As you can see, everything has the same visual language. The template needs to flexible enough to accomodate for a vast array of setting types such as polygon selecting on a map to survey creation.

Portfolio_2019 screens

Page structure applied on selected setting pages

Summary

This was the first large UX/UI project that I had to self direct and manage. The scope was quite high as the timeline was 4 months. Through this project, I interview clients and other departments to see their involvement in the consultation editor page. I was able to create a consistent visual and interaction style that worked for all 23 settings and placed them into easily findable groups based of user insight and card sorting. This created a much easier and intuitive userflow for both creating and maintaining an online consultation.

Further Considerations
- We need to test at how easy it is for users to create and maintain an online consultation
- Due to the timeline, efforts and efficiency was given to the overal flow of the product; I believe the next phase would be to tackle each setting individually to see how we can improve them
- For areas of too much text, I would look for ways to include iconography to help make the content more easily understood

For a more detailed case study, read my Medium article

Other Projects

AvenueHQ WebsitesUI + Web Design + Branding

SOPA Square WebsiteUI + Web Design + Branding

Proximity - Digital & Print DesignGraphic Design + Web Design + Branding

SAGA Science Marketing DesignGraphic Design + Branding + Social Media

Cavalier CaninesGraphic Design + Branding + Packaging

Allure Fishing HooksGraphic Design + Branding + Packaging

Interested in working with me?
Shoot me an email!