Pink Triangle Press Website Redesign
Helping to shine a spotlight on one of the longest-publishing LGBTQ2S+ media groups in the world for its 50th anniversary.
BACKSTORY
Media company Pink Triangle Press (PTP) was approaching its 50th anniversary, however, its website neither reflected its robust history nor properly showcased its many popular products and brands. The content was outdated, it wasn't optimized for different screen sizes, and it was off-putting for job hunters who wanted a peek into the company's amazing work environment. It was time for a complete overhaul.
OVERVIEW
Problem: Website does not properly reflect the company at large.
Objective: Create a modern, user-friendly, and accessible responsive website that showcases the brands and provides a space to list job opportunities.
Deliverable: Wireframes from lo-fi to hi-fi for various breakpoints, animations of any micro-interactions, and prototypes with developer specs.
SITE AUDIT
The first thing I did was conduct a site audit of the current website. Key questions I asked myself were:
-
Was it responsive? (Spoiler alert: nope)
-
Was it accessible, meeting Web Content Accessibility Guidelines? (nope)
-
Was it organized in a logical fashion? (nope)
I also started creating questions to ask key stakeholders, the main ones being:
-
What current sections are important moving forward?
-
What content is dated?
And some for myself to investigate further:
-
How do current sections/content compare to competitors?
-
What content do we need to add to stay competitive and appealing to new talent?
Pink Triangle Press website, early 2021
COMPETITIVE ANALYSIS
With these questions in mind, I looked at other company websites to take stock of what they include, what they do well and perhaps not so well, and what they all have in common. Since Pink Triangle Press owns dating websites and apps, I looked at companies such as the Meet Group, Match Group, Grindr, Scruff, etc., and since PTP also owns online news magazine Xtra, I took some time looking at media companies like Conde Nast.
I took screengrabs of these sites and added them all to a Miro board. From here, I could add post-it notes with initial thoughts in regards to navigation, groupings of categories, etc. This was also an easy way to walk through these sites with stakeholders to get their opinions of what they might want to see or not see for the new PTP website.
The major takeaway was what these sites all have in common, and they seemed to mostly follow similar structures: a general Home page, an About Us, a space for Job Openings, and of course some sort of contact information.
CARD SORTING
Now that I had gathered what was on the PTP site and what the competitors had in common, I started doing a card sorting exercise.
Again in Miro, I created post-its with versions of the generic headings that the competitors were all using as well as post-its with the various sections of the current PTP website. The idea was to see if I could logically place the PTP content under these generic headings. Once I thought I had it all completed, I walked through the same exercise with some of the stakeholders. We seemed to agree on most, however some needed some compromise. In the end we ended up with a structure that felt logical and organized.
IDEATION & LO-FI WIREFRAMING
A loose structure was finally in place! Using this information, I started working on some lo-fi wireframes, seeing how these content blocks could be placed within the various pages of the specific headings. I used these wireframes to get feedback from stakeholders and continued to get feedback until it was at a place where the stakeholders agreed on content sections and their placement within the content hierarchy.
BRANDING
Before jumping to hi-fi wireframes, I had to nail down some unanswered questions in regards to branding. Of course the various PTP products had clear branding guidelines of their own, however what was the actual brand of PTP itself? Sure it had a logo and font, but it also had an outdated website and didn't necessarily have its own voice and tone.
Luckily, the marketing team had already been recently working on this, however it was with a focus on print materials, such as business cards and letterheads, etc. So using their print material design decisions, I started applying them to digital.
However, it wasn't as simple as taking the pink from the triangle in the logo and start using it everywhere (believe me, I tried that). Turns out, the logo pink did not work well as a text or button colour since it did not pass accessibility contrast ratio guidelines. So with a blessing from the marketing team, I darkened the pink so that it passed WCAG 2.1 guidelines and we came up with font choices (Gibson) and an appropriate colour palette to use throughout the site.
HI-FI WIREFRAMING
I could finally start putting all the pieces together. I had my lo-fi wireframes to use as a template, my fonts, typography scale, and colour palettes. Now it was a matter of pushing some pixels and to see if they all played nicely with one another. After playing around with some options, the site started to come alive.
Some sample hi-fi wireframes for various breakpoints
HAND-OFF
Throughout this design process, the Product Owner and I created user stories in JIRA which were then presented to the devs and sized accordingly.
One possibly large story was that of the robust PTP company timeline of the last 50 years. On the previous site, this historical timeline was available as a simple PDF. My suggestion was to modernize it a bit and to turn it into an interactive timeline. I demoed the desired functionality with some animations (made with Principle). Here an example of the desktop design:
Although admittedly this animation wasn't perfect, it proved to be a powerful tool in demonstrating to stakeholders and devs a complicated vision.
However, this particular vision proved to be a bit too lofty given the tight deadline of the project. As the development process began, it became clear that some desired features needed to be scaled back. Meaning, for launch, this fancier timeline didn't make the cut. Instead, the PDF version remained and the interactive timeline stories (along with a few others) continue to sit in the JIRA backlog to be worked on in the very near future.
This means that the current live version of the website is not the full version that I had created wireframes and prototypes for, but the live site continues to be a work in progress.
LESSONS LEARNED
1. Get everyone on the same page, literally. It was my first time working with this particular team (which consisted of a scrum master, product owner, and small group of devs). As I was prototyping in InVision, the devs were looking at older wireframe uploads that had been added to JIRA stories. At one point, this created a bit of confusion. What was the final version and ultimate source of truth: the InVision prototype? Or JIRA uploads? Unbeknownst to me, at one point, the PO, devs, and QAs were all looking at different versions of the designs. It taught me that it is important to (a) clarify where the final versions of the design live, (b) make sure everyone has easy access to those, and (c) alert everyone when a new update has been made.
2. Where does my job end and that of QA begin? This is what I found myself struggling with as finished pages were being pushed to production. Am I being helpful and just taking ownership of my designs if I start doing my own QA work? Or am I just being nit-picky and possibly stepping on the toes of the QA team? I try my best to be cognizant of other people's roles and duties, therefore this sort of thing is often top of mind for me. But in this particular case, clarity was eventually gained through keeping the lines of communication open. Turns out, if you're unsure of something, ask. Funny how that works. Who knew!
Thanks for coming with me on this journey. There are additional designs and suggestions that I made for this project, however I haven't included them all in this case study. If you would like more info or have any further questions, please don't hesitate to get in touch!