TSP
A broadway producing team’s website.
Project:
Freelance
Timeline:
40 Hours
Role:
UX/UI Designer
Tools:
Figma
Briefing
The project overview.
The stakeholder is an award-winning theatre producing and management team that had an old website they wanted to update with a fresh look and ideally generate more leads from.
Result:
Increased lead generation by 50%.
Stakeholder quote:
“Definitely have had a lot of people reaching out to us via the contact form for sure... When we have made announcements, I have noticed an uptick in people being able to get ahold of us who other wise wouldn't have been able to either!”
Research
Finding the focus of the project.
Looking at competitors
Before meeting with the stakeholders, I did an evaluation of many of their competitors and contemporaries. I wanted to identify industry trends and any standout strengths that could help us.
I presented my findings to the stakeholders, with the key trends and strengths identified being:
List of productions with show posters
About page
Contact Information
Explanation of services
Show information
Performance videos and photos
Contemporary web design
Clear Call-to-Action
Defining the User
User Personas
After presenting the competitive analysis, I worked with the stakeholders to define their users, and we arrived at 3 distinct personas with wants, needs, and pains.
User Flows
I then made flows to share with the stakeholders, starting to paint the picture of how these users should flow through the website based on their needs, ultimately taking the call to action of our goal of connecting.
Information Architecture
Website Map
I combined my flows into one website map with the hierarchy of features and information so that I could begin creating wireframes.
Wireframes
Visual Design
Defining visual elements.
The stakeholders wanted purple and blue incorporated into the designs and I wanted to use a black text on white background palette (given the possible accessibility concerns for some users).
Colors, Typography, Buttons
First UI Design
This first design presented was intentionally simple for accessibility’s sake so that any users with vision issues or technical challenges could very easily read and navigate.
An earlier “brainstorm” version
Earlier in the process, after the competitive analysis, I had done a brainstorm of how their website could look. It was the dark version below. I did it as an exercise for fun with the stakeholders really liking it a lot, and frankly their reaction for the “brainstorm” version was bigger than my “accessibility” version above. So I tried thinking about ways to create a little more visual impact and character without compromising the accessibility goals.
UI Final Touches
Adjusting visual elements.
After getting feedback and first impressions from the stakeholders, I went back to my UI designs and made some adjustments for the final designs. I also had planned to build out this design for the stakeholders using SquaresSpace, so I knew there may be some small adjustments based on that platform as well.
Aside from the specifics outlined below, I added low opacity background images to have some of the scale and visual impact of the “brainstorm” version.
Adjusted Colors
The black actually had too much of a harsh contrast to me and I worried it would cause a little strain for some users reading the text, so I softened the black just a little from #222222 to #333333. Similarly wanted to simplify the CTA color (and I needed to because SquareSpace needed a solid color for buttons!) and so I changed the once metallic blue/purple gradient into soft violet.
Adjusted Fonts
The font I was using before wasn’t problematic, but I did believe that changing my Headers’ font could be a great way to introduce more character into visuals like I was aiming to do. Once I did that, I font a new body font to pair with the new header font.
I also separated the link styles so that there was one primary CTA solely for contact (the main goal of the website), and text links for everything else.
Final UI Designs
Delivery and Reflection
I built out all the screens on SquareSpace and turned it over to the stakeholders. This part was super smooth because they were happy with the final UI designs!
A few months later, I checked in with the stakeholders to see how the website was performing and if it was in fact generating more leads. This is when I found out about that it had increased their leads from their contact form by 50%! (same metric mentioned at top of case study)
This was special for me because it was my first client website that also had some sort of specific success metric attached to it.