PACE Society: A UI Case Study
WARNING: Please be aware that this article contains sensitive material that may be offensive to some.
Introduction
For our fourth project at RED Academy, we worked with our second community partner to design a website based on our client’s requirements and their users’ needs. We worked within a team for this project consisting of both UX and UI students to redesign a responsive website for PACE Society, a Vancouver based organization specializing in the support and education of sex workers.
We had the pleasure of working with Kenzie and Lindsay who are both currently working for PACE and actively making a change in the sex worker community. We as a team did a complete redesign of their current website to make it more impactful, informative, and accessible to users.
PACE was initially started in a one-bedroom apartment in Vancouver, BC by a group of former sex workers in the 1990s. As a group, they recognized that there was a need for services and support for people of all genders within the community. Through their hard work, dedication and founding support from allies, PACE was officially created on March 10th of 1994.
PACE actively helps and promotes safety and advocacy for the sex worker community. They help to reduce harm and isolation through their support and education programs and believe that sex workers are valuable members of the community who deserve equal rights to all. They aim to create a violence-free future for sex workers where discrimination and stigmas surrounding sex work no longer exist, and a world where sex workers have the same rights as all other citizens.
The team is made up of a group of incredibly compassionate, driven, and dedicated individuals who are working towards this future for the sex worker community and actively making a difference.
Meet the Team
The team that I worked on to redesign the website for PACE consisted of three UX students and two UI Students. The UX team consisted of Denise, Natiea, & Shaeli and the UI of Lynn and myself, Jessica. Unfortunately, I do not have pictures of the whole team to show here.
After our initial client kickoff meeting, we had determined the business, project, and user goals and continued our further research to elaborate on these and move forward with the project.
For our initial UI research, our team used the key findings from our client kickoff meeting as well as our extended research to determine our initial direction and focus as a team. For our initial research, it was determined that the project goal was that we had to redesign and create an informative, accessible, and minimal website that’s simple to maintain and a website that PACE can take pride in directing people to. The business goals were to create a more modernized and appealing website that clearly communicates what PACE offers and provides a sense of community, while also raising awareness surrounding sex work. The main key findings in list form were:
Design a website that is informative, accessible, and minimal
Create a bold and empowering website that is impactful
Redesign the website to be warm and Inviting for new members to feel inclusive and to help recruit new members
Re-design a fresh, modernized website for appeal and clear communication of services and information about what the organization does including safety workshops/information, community updates, and relevant news.
Redesign a website that captures the attention of funders and the general public to raise awareness
After determining our main focus points, the UX team worked on creating personas based on user goals. A persona is a simple tool used for reference when creating a product or service and keeps the target audience in mind.
A persona helps to create a real product and focuses on the users’ goals and needs. It is essentially a fictional person created that represents an example of who the website will be designed for.
From there, UX created different scenarios for personas to give a better idea of who the persona is and their pain points, to aid the process and determine what is required on the website. Our two personas created as mentioned earlier were created by our wonderful UX team and are known as Cheri and Karen.
Cheri
A 26-year-old single woman living in Vancouver.
A professional escort and has been in the business for about five years.
Passionate about challenging the stereotypes and stigmatization that exists about sex workers and advocates for sex worker rights and policy changes whenever she can.
Cheri also prefers to support brands that support sex workers like MAC Cosmetics and Lush.
Pain Points
- Difficulty finding and connecting with other sex workers
- Tired of dealing with the stereotype that she is a victim of sex trafficking
- Struggles to stay on top of bad dates as the list is not posted online
Goals
- To connect with a supportive community of sex workers
- To stay on top of bad dates in my area
- To contribute to a bad date list easily and efficiently
Karen
A 34-year-old Community Outreach Worker at the YMCA who runs social engagement and physical activity programs for underprivileged youth.
Passionate about her work and social welfare in general.
Likes to donate to organizations doing meaningful work to improve the lives of those who are most struggling, and has read a lot about charities that misuse funds or that don’t go directly to support programming, so concerned whether an organization is reputable and trustworthy.
Relies on the website to determine whether they are a good fit to receive her donations as she doesn’t have time to investigate all organizations
Pain Points
- Difficulty finding organizations that align with their values
- Suspicious of whether her donations actually go to the people they serve or too bloated administrations
- Doesn’t have a lot of money to give but wants the donations to be effective
Goals
- To support organizations that serve marginalized communities
- To ensure that donations get used wisely by the organizations she gives to
- To help fight against the stigmatization of sex work
The UI Design Process
The gut test is a technique that was presented to our client in order to determine their aesthetic preferences and give the UI team a better idea for the visual design direction. We present 20 different images to our client and they will rate it on a scale of 1 (do not like) to 5 (love it). Each image is shown for 20 seconds and using their gut reaction, they rate it on the scale. This helps us to determine which directions we should take in terms of visual design.
When our clients were conducting the gut test we asked them to focus on the visual components of each example including colors, shapes, icons, typography, and overall composition. We told them not to focus on the content as it could possibly influence their decision, and that is not the intended purpose of the gut test.
After both Kenzie and Lindsay performed the gut test, the UI team analyzed the results with the client and the top results from the gut test were the two option pictured above. These choices were clean, simple, and straight to the point and both also made a bold statement.
The bottom choices, pictured above were much too dark and had a corporate feel which the clients were not looking for. They wanted the design to be more open, inviting, and powerful.
Design Inception
Creating the design inception sheet is the next step in the UI design process following the gut test. Using the results from the gut test and while keeping our personas/target audience in mind, we determine the “Why” or reasoning behind our project, followed by the mood which is conveyed through the moodboard, and finally visual language (shape, space, color, movement) which is conveyed through our style tiles. I will show these in the following steps.
A design inception sheet is a wonderful tool for designers as it sets a solid base for their decisions and is always something to fall back on and influence decisions when there are roadblocks in the process.
After we created our “why”, we created two different visual directions and created two design inception sheets. Each direction stemmed from the same “why”, but because the differed in terms of mood and visual direction, it was necessary to use two different design inception sheets.
After many renditions, we finalized our “why”. We wrote down many options and took into account PACE at all times of the process, including their goals, mission statement, and values/beliefs. We aimed to create a “why” that fully encompassed all that PACE has done and is currently doing to make a difference and wanted our why to essentially explain the core of the company and reasoning behind our project. The Why is very important as our team uses it as the base for all of our design decisions so it is essential to spend time and ensure it fully represents the company/organization’s goals.
Our why became,
“To Provide an empowering supportive service that increases compassion, awareness, and empathy for sex workers.”
We felt that this why fully embraced the purpose of this project and the organization itself while touching on the emotional aspects behind the project.
For our two directions, we used the gut test results and our why and decided to create a direction that was bold and empowering, and a direction that was warm, friendly and inviting.
For each direction that our team created, we included a moodboard and style tile. The moodboard is a visual representation of the mood meant to be conveyed through the design and the style tile is a representation of the visual components that will be included in the website design and provides an overall sense of what the website will look like.
Friendly Direction
Friendly Moodboard
The first moodboard we created is meant to convey a warm and inviting tone, with a sense of connection. The words conveyed through this moodboard are
Friendly, inviting, inclusive, warm, family, supportive, connection
Friendly Style Tile
The visual language section of our design inception sheet is portrayed through our style tiles. These are the visual language elements created for this design direction.
Shape — soft, professional
Space — open, white space
Color — muted, calm, neutral
Movement — smooth, straight, more static
Some additional elements of the moodboard that we focused on were:
App icons — simple, clean, rounded
Typeface — Helvetica for readability and ease of use
Bold Direction
Bold Moodboard
For our second direction, we created a moodboard with a bold, strong approach. This moodboard has a key focus on the idea of standing up for your rights, and a sense of power. The main keywords conveyed in this direction are:
Bold, badass, brave, supportive, strong, empowerment
Bold Style Tile
These are the visual language elements for the bold direction
Shape — bold, strong, square
Space — open, clean
Color — bright, solid, vivid
Movement — minimal, static
Again, here are some additional elements of the moodboard that we focused:
App icons — simple, clean, more square, bold fill
Typeface — Helvetica Neue for and Lato for readability and ease of use, and a condensed bold weight of Helvetica Neue used for the header to convey a bold empowering tone
After presenting our two different directions to our client, they came to a group consensus with the team and decided on the bold direction due to the accessibility and the bold & empowering tone that is conveyed. The typeface choices were straight to the point and easy to read, and the design was minimal and clean. They loved the idea of this design direction as it would be easy to use and understand for individuals who are not as experienced in using technology.
Final Style Tile
For the final style tile, we made some tweaks and added a photo of Sylvia Rivera.
“Sylvia Rivera was a Latina American gay liberation and transgender rights activist significant in the LGBT history of New York City and of the United States as a whole.” This information is obtained from Wikipedia. Read more about Sylvia here.
We felt that by including this it would set a positive and energizing tone and we found that Sylvia is a wonderful representation of the community and conveying an activist tone.
The main reason why we chose to use red as the main color in our direction was that it signifies the red umbrella. The red umbrella is a widely known symbol to represent the sex workers rights movement so we wanted to include this to provide a sense of community and connection. Read more about the movement here.
We adjusted some further elements and set up the style tile in a different format to have a more “badass” feel. The visual language represented through our final style tile is:
Shape — bold, strong, square
Space — open, clean, white space
Color — vivid, solid, bright, monochromatic reds
Movement — minimal, static, straight
Icons — simple, clean, bold fill, inviting and friendly
Other elements included:
Typeface — The typeface choice for this direction was Helvetica Neue for both header and body for readability, in a variety of weights for heads including condensed bold & black and light
Buttons — strong, clean, sharp, bold
Colors — Red tones and tints for simplicity and boldness and to represent the red umbrella, a symbol representing the sex workers rights movement
Final Icons/Illustrations
The icons created for the final directions we stylized in illustrator from their base, which was kindly passed onto us from one of our UX teammates. We added red elements for consistency and had a combination of both sharp and rounded edges to convey a strong sense as well and a calm inviting tone.
Our client also wanted to possibly include some sexy illustrations throughout the website but wanted to keep it very minimal. For the illustration process, we hand drew each design out on paper and digitized them in Adobe Illustrator. We had so much fun adding this touch to the design and found it added an additional sense of character to the design. The illustrations are above.
Another step in the design process was creating a new logo for the organization. After speaking to our client, we determined that the organization wanted to keep some historical context to the new logo by implementing some elements already in the current one. We decided to keep the daisy in the current logo and play with variations of this as well as the red color used in the design.
The logo process was very valuable to us as a team we worked to create a logo design that fully encompassed pace and represented who they are as an organization and the people that make PACE who they are today. This is a key part in Branding and Identity design so we spent a few days creating the perfect logo for this impactful organization! We had a wonderful time doing so.
First Step (logo sketches)
For the first step of the logo design process, Lynn (my UI partner) and I sat down together and drew out as many logo ideas as possible. We let our minds run free and drew as many options as we could without thinking too much into the process. This was a great way of starting the logo design process and we were able to get all of our ideas out on paper and as we did so, new ideas naturally came and influenced other ideas.
Second Step (detailed sketches)
The second step in our logo design process consisted of deciding on some logo design from our first step and drawing our more detailed versions on paper. Our client really enjoyed the hand-drawn style of logos so we decided to incorporate that into some of our logo options.
Third Step (digitizing variations)
The third step in the logo design process consisted of digitizing our logo designs through the Adobe Capture app on our phones and adding colors and detail in illustrator. We then came up with many versions of our logo and played with color, typography choices, placement, and spacing to determine the best versions of our logos. We asked for many opinions on our logo designs to get a sense of what options best fit PACE and their vision/culture. We decided to include the full name of the organization, PACE Society in the logo name as well as just “PACE” and found that the logo seemed more community-focused with the full name and we thought this accurately represented PACE.
Fourth Step (final logo options)
The final step in the logo design process was determining three final logo designs and presenting them to our client with the reasoning behind our decisions.
Final Logo
After these steps, the team finalized their logo decision after coming to a group consensus.
This final logo is pictured above and this creation could not have been done without the help of our wonderful instructors here at RED. We decided to use two typefaces instead of one as we felt that using just a script font seemed too feminine or fun, whereas using only a bold, condensed typeface was too serious and masculine. As we wanted to accurately represent that PACE is accepting of all genders, we felt diversity was required in the logo.
We included the red flower petals to stay true to the floral aspects of the original logo and included the red color palette to be representative of the red umbrella movement.
The final stage of our project consisted of skinning (visual design) the mid-fi wireframes the UX team passed onto us. We also created a style guide to pass onto the development stage but I will not feature this here due to the length and size. It is a large version of our style tile and consists of all visual components to be passed on to developers. In total, we had roughly 80 wireframes to design which consisted of both a web and responsive mobile version, as the majority of users will be using the website on a mobile device.
As there were many screens to design, I will feature a small amount of them in this case study and will also link both the web and mobile InVision prototypes below. I will show a comparison of the same pages between web and mobile and go over key features.
Landing Page Screens
The first is the landing page. The landing page consists of an overview of the entire website and what it offers. This includes links to other pages including learning more about what PACE does, events, and how to get involved with the organization. Another important piece of the landing page is the territorial acknowledgment. This acknowledges that PACE resides on first nations territory within Vancouver and we felt this deserves respect. Testimonials are also included on the home page to give first-time users and understanding of how PACE is making an impact within the sex worker community.
Finally, the footer included information about PACE, along with their history, mission, and vision. This footer remains consistent throughout the website.
We kept the design very clean, minimal, and accessible for users and included simple CTA’s (or call to actions) for users to easily navigate the website and understand where they are going. UX did such an amazing job of the navigation of this website and preparing the wireframes in such a polished format to make our UI job easier.
Features on the site include events, safety and support services, research and advocacy, how to donate, and most importantly a bad date list. This list would enable sex workers to easily access this list online for safety purposes which is extremely important.
Events Screens
Another featured screen is the events page. This page consists of a list of events the organization is holding and each link automatically redirects the user to Eventbrite for easy sign up/rsvp, as well as the ability to share to friends through social media.
Login Screens
Another key screen we designed is the login page, as well as the signup screen. They have similarities so I will feature the login screen here. We created clean and simple forms for the users and a visible CTA login button. To stylize this screen, we added a bold welcome message on the right, with a photo of the team smiling and laughing to promote a welcoming tone. We also added some illustrations on this page to add some character and fill some white space that felt quite empty.
These are the few screens I was able to feature but please take some time to support our work and view our prototypes below to have a further look into the design. Thank you!
In conclusion, this project was extremely eye-opening and I am absolutely honored to have worked with such an impactful organization and help them to make a difference. At times the context was heavy and hard to wrap our head around but it gave our team an outlook on a community people don’t regularly think of.
We were moved and uplifted by being able to do this design for PACE and are forever grateful for the kindness and support they are offering to this community. Keep up the amazing work PACE!
For future considerations, I think our team did a wonderful job overall, but I wish we had a longer time frame to work on the project and focus more on aspects including the bad date list and adjusting the design of this as I believe it is a really essential and important feature to include.
All in all, I had an amazing time working on this project and have gained so much knowledge and insight into the industry. Thank you to PACE for allowing us to help you in making an impact on the community.
Thank you for taking the time to read my case study and I hope you enjoyed. Thank you for your support.
