CitizenMe Account Tiers

UX/UI Design · Design System Updating · Product Design

May 2022 — Jul 2022

Project Overview

I was tasked with moving the CitizenMe marketplace platform to a self service option. Designing all elements of the users journey, from website signup to different user permissions within the platform.

My Contributions

I updated the UI based on multiple user journeys through the platform depending on their SaaS tier and individual permissions. This included a new pricing page for the new tiers, a full interface update on the platform to showcase the new branding, and the designs of all marketing materials.

Workshops and Wireframes

I worked with the product manager and developers to understand the current survey platform. Initially, I lead internal workshops where we walked through the marketplace and the team explained to me how it worked and how they would like it to be improved.

I had a secondary workshop with the project manager who received feedback from his clients regarding the platform and explained his vision of the platform moving forward.

I then, categorised all the issues that had arisen from the workshops into future updates which could be worked on later and current issues that fit in with the UI update and quick wins. I then moved on and created the wireframes and initial designs.

User flows were not created for this project as the systems flow was already in place and this was used to create the updated designs.

User Research

I then used the initial designs to carry out some user research using interactive prototypes. The user research was carried out via video calls where I set out a scenario for the users to achieve and viewed how they reached this, followed by a series of questions about their experience with the prototype.

The CitizenMe platform is a survey based app so I had the luxury of using the app to test micro elements of my designs to get quick feedback from a range of audiences. This was a vital part of testing the updated branding before the release on both the marketplace and on the app.

Previous iterations of the branding had used a multiple of different shapes within the marketplace and app. We decided to ask the citizens which shape they preferred and showed them a mockup of the designs using the different shapes. Our results showed that they preferred the use of circles and from this research we decided to phase out the use of any other shapes on the platforms and use circles moving forward.

Hi Fidelity Design Phase

Following the research findings, I created the hi-fidelity designs based on the feedback received. The updates were successfully received within the team. The user journey within the platform for creating a survey has been well received by the CitizenMe clients since the release of the new tiers.

Here are some examples of the changes that have been made:

New Pricing Page

The release of the new tiers meant that we needed an updated pricing page on the website to reflect this. I used Google Analytics to see what was working on the current webpage to help me see what features were needed.
I created a few low fidelity mockups to show stakeholders and management and see which direction they wanted to go into.

After receiving feedback, I turned the chosen design into a hi-fidelity design with some amendments from the previous version. I took the design and handed this over to the dev team and uploaded the design from Figma into Zeplin for the developers to work with.