Website Redesign for Patrick Chang
OVERVIEW
Patrick Chang is an actor who uses his website to showcase his work & upcoming projects.
His website aims to show his brand and visually communicate his range.
My Role
UX research and design
UI Design
Branding
Tools
Figma
Invision
Paper, pencil, post-it
Client
Patrick Chang, Actor
Timeframe
2 weeks
February 2021
Goals
Create a clean, streamlined layout
Established Hierarchy
Easy to find relevant information
The Problem
Maligned information
Low contrasting colors
Inconsistent look and feel
Too many pictures and videos
Research & Discovery
To understand the current everyday user experience, I surveyed a group of people to see how they move through the product and recorded their reactions. Here are some of their observations.
PERSONA
Meet Amy.
As a talent agent she visits multiple actors and talent websites daily.
Has limited time.
She just needs to find information quickly.
Make quick decisions whether or not to hire talent.
Sketches
Over the course of a few days, I sketched out several potential solutions. Keeping the user’s availability in mind, my focus turned to designing a website where all the information can be seen as one page.
I quickly sketched out various ideas to boost creativity.
More sketching
Sketched 8 distinct ideas in 8 minutes to push me beyond my first idea.
IDEATION
Task flow
The main goal of a user coming to Patrick's site is to find relevant information. Thus, making the journey as efficient, simple, and pleasant as possible is important.
Keeping our persona, Amy, in mind, I created a task flow to visualize to the steps she needs to take and the choices she can make.
It allowed me to see where a frustration or a pain may arise and possibly lead Kristin to exit out without finding what she needs.
Prototype
After multiple sketches, I designed a one page website. The look and feel is simplified, modern, organized.
Thinking of the user (who needs pertinent information fast) and the client (who needs to be distinguishable and increase bookings).
EVALUATE
Usability Testing
After hours and days with the wireframes, I fall in love with my own design and neglect the stumbling blocks the users may have. So it was important to put the prototype to usability testing and find out the success and failures of the user flow, navigation, and visual presentation.
Due to COVID-19, I faced limitations to conduct in-person usability tests. Instead, I used video-chat applications to observe and communicate with the test participants.
The participant pool was open to anyone with access to the web. I asked the participants to share their screen with me and play with the prototype for ten minutes. Afterward, I received their feedback on the first impression, navigation flow, and any questions they may have.
Based on the results, I iterated the design further to to deliver a a product that aligns better with the goals.
Final Thoughts
My goal for the project was to take ownership of the entire end-to-end design process, and present a project I am proud of. It was both daunting and exciting to start a project from scratch, but ultimately I grew as a designer by addressing ambiguities head-on and seeking advice from peers and mentors.
I had some doubt that I would have enough time to bring to life potential outcomes that would satisfy the client. Yet, the website is clean, would pass WCAG compliance, and shows the actor’s brand- Who he is and the work he is capable of doing.
It displays just the right information needed to book the right roles and has enough space to add and improve as the actor succeeds in his field. For the next steps, I would like to see the hero image be converted to a carousel or rolling image as the actor obtains more on the set images, or behind the scenes-- to recapitulate his brand. As well as adding news and events the Actor would be a part of.
In the end, I feel more confident in my abilities to advocate for users and create clear and delightful design.