Website Redesign - UFC
Process: Competitive Analysis, Stakeholder Interviews, User Testing, Analytics Reviews, Surveys, NPS, Remote Usability Tests, Scenarios, Experience Mapping, Wireframes, Development Roadmaps, Q&A, A/B testing, Voice of the Customer, Optimization Testing
Platforms: Desktop (responsive website) and mobile web, iPhone & Android app, connected devices
My involvement in the UFC Fight Pass redesign began at the end of the Strategy stage and the beginning of the Research + Analysis stage. UFC stakeholders knew WHY they wanted to redesign the site, but they didn’t know HOW to guarantee that the new design would solve all of their problems. That became my job.
Testers wanted a new look, as well, but wanted more content, and easier-to-find content. As a result of all of the actions taken during the Strategy Page, I created these 3 goals:
1. Reduce number of errors and friction points for top 3 UFC Fight Pass Experience tasks by 40%.
2. Improve the IA of the website to improve findability to 3 major tasks and beyond.
3. Update aesthetic to match the new UFC rebranding.
- Stakeholder interviews – I met with several members of the UFC team to discover the business goals behind the redesign.
- Analytics review – I looked at analytics to find red flags, abandonments, errors, and friction points.
- Competitive Analysis– I did research on competitors pages to see what they were doing.
- User/Usability Testing- I began testing users on the old website to illustrate friction points.I conducted both in-person user tests, as well as unmoderated remote tests. I also tested competitive sites to gain insight.Testing occurred across all devices (iPhone/Android mobile web & apps, Desktop web,Connected Devices: Apple TV, Fire Stick, X-Box, PlayStation, etc.).
Stakeholder interviews showed me that the business wanted a cleaner look and easier IA. Analytics showedmajor friction points throughout the old site. Competitive analysis showed a cleaner design from others, butshowed that others also experienced confusing IA. Analytics showed our painpoints on the previous design. Competitive analysis showed us that we had an opportunity to lead our industry in experience.
Purpose: To illustrate the UX process utilized throughout the UFC Fight Pass redesign
I recorded ﬁndings in Google Docs to keep organized & to share with the team
Research + Analysis phase
During the Research + Analysis phase of the UFP website redesign, we put our ideas to make changes tothe test. I worked with a 3rd party UX firm who took my tests and we collaborated on new design.Iterations were made to get the website in the best place possible before a launch.-
- Surveys– I asked customers what they liked / didn’t like about the new/old design/prototypes.-
- Competitive analysis – When we discovered more friction points, we checked to see if ourcompetitors had the same friction points. We also looked to see how others fixed the friction points.-
- User Testing -We tested the new design using prototypes in Invision (I converted paper prototypes into digital prototypes, then wireframes into digital prototypes for a quick turnaround).I tested across all devices, and with multiple sets of demographics (i.e. UFP current subscribers, previous subscribers, non-subscribers, Mac users, Mobile users, Connected Device users, etc.)-
- Remote Usability Tests – I sent tests with key tasks to hundreds of users to see if task completion improved over previous designs.-
- Scenarios– I wrote scenarios for the developers for improvements to the development roadmap.-
- Experience Map – I created an experience map and mapped out IA for the entire UFP experience.
Please note: Research + Analysis stage occurs simutaneously during part of the design stage.
Example of Improvement:
Prior to release, we learned that there were several points in the design that were flawed. 100% of desktop testers failed to complete the onboarding process in under 1 minute. When compared to the mobile number of completion in a much faster time, I uncovered a friction point. The original design of the onboarding included a large header. Since the page was responsive, if the user’s monitor was larger than a specific size, the break point was too large, and the header covered the entire page, causing confusion of how to move to the next step.
I re-designed the header to be much smaller, and improved the breakpoints for the responsive design. The site was released with the new design, and analytics proved that the improvement worked!
During the Design Stage, I worked hand-in-hand with developers, assisting them with all translationbetween wireframes to development. I also continued conducting research.-
- Wireframes – Full, hi-res wireframes were created by the 3rd party UX firm with our team’s help. Icreated all wireframes after the firm had handed off its final designs (pre-dev).
- User Interviews/ Usability Tests (Remote) - I ran more tests on each design iteration.-
- Diary Study – I had users document their days & any UFC touchpoints (digital or non-digital) toensure that we had all bases covered with the new design.
- Development Roadmap Creation - I created a document to keep track of all changes to the designboth pre & post development.-
- Card Sorting - I conducted several card sorting activities to determine a more-improved IA.
Production + Optimization
- Optimization Testing
- Usability Testing
- Remote Usability Testing
- Development Backlog Management