CASE STUDY

The UX Process

1. Gather Customer Data and Develop Personas

I worked closely with the analyst on my team to gather user data points from various sources with the goal of building user personas. Being part of an internal team, people are familiar with the makeup of our customers, however, the communicate their traits in a narrative, tangible way — this is how we would be empathy and understanding across the organization. These personas served as an anchor when tangential discussions in meetings would occur, proving to be more valuable than we could have imagined. They were used not only to keep designers and developers focused on the task at hand but also executives and important stakeholders.

2. Form Taskforce and Create Design Brief

Speaking of stakeholders, it was time to form an all-star group of people from around the university to collaborate and drive this project. The benefit of working on an internal team is that you know almost inherently who the big decision makers are. Two groups were formed: the “big” group, consisting of a few integral executives, a small cross-discipline team, and a handful of service area members. The second “small” group consistent of just the cross-discipline team. The small group was made up of digital designers/developers from the Web Team, graphic designers and copywriters from marketing, and analysts.

The small group met first to conduct competitor analysis, flesh out a design brief, and properly scope the project, breaking it down into small chunks.

3. Organize and Conduct Design Studio Collaboration

Next, we had an “all-hands-on-deck” collaboration session called a “Design Studio”. I learned about this method from Jared Spool of UIE and the conferences he organizes. Essentially, it’s an all-day sprint where non-designers and designers work together to brainstorm solutions to problems and create MVPs(minimum viable products). I share the belief that anyone who has influence over a project is a designer, the design process doesn’t have to be pretty, you don’t have to know how to sketch beautiful UIs, anyone can do it with a little training.

4. In this design studio, we tackled the three problems identified earlier:

• Bring focus to prospective student calls to action.
• Improve the discovery and presentation of the university’s products and services (degrees and unique differentiators)
• Effectively tell the WilmU story.

Participants were provided with personas and divided into small groups to tackle one of their problems above. Again, I used moderation techniques I learned from the UI22 conference (Jared Spool) to avoid issues like group-think, confirmation bias, and wasting valuable time.

Everyone from a C-level executive, to copywriters, and graphic designers sketched and critiqued, argued, and debated. I didn’t expect the groups to solve every single problem (or even one if I’m being honest) but the outcome was even better than I could have imagined. The design studio created a sense of ownership across business units, made people feel like they’re part of the process, and demystified design and digital experiences. At the end, we were able to leverage some really good ideas and incorporate them into a prototype.

5. Distill Outcomes from Design Studio into Concept Prototypes

The team was really impressed with the creativity and collaboration of the group during the design studio. We distilled the exercise into 3 or 4 approaches to solve problems. Interestingly enough, I mixed and matched ideas from the different groups for various components. Using Adobe XD for the first time, I developed a clickable prototype to share with the small workgroup. We kicked the tires on it during a working meeting and made improvements on the fly. At this point we were ready to start testing our hypotheses with real people.

6. Usability Testing (in-house and external)

Before setting testers loose on the MVP, it had to be crystal clear what we were testing for. How would we evaluate the performance of the prototype? We came up with a list of tasks that demonstrated a user’s fluency of the three 3 key goals we had for the homepage. Once the test script was finalized, we recruited users to do a combination of in-house, moderated testing and remote, unmoderated testing.

Results from user testing are always uncomfortable and insightful. Even if everything goes to plan, there’s always that one person that makes you say in your head, “Wait, wait, don’t do that!”.

7. Iterate Homepage Prototype Based on Test Insights

The results showed we were on the right track and only had to make a few tweaks to the user interface to make some components more obviously interactive, encourage scrolling more, and reduce visual noise.

8. Configure Analytics and Dashboards to Measure KPIs

The web analyst on the team developed dashboards that allowed us to easily share performance of the homepage to executives and stakeholders across the university. A performance dashboard that effectively communicates the performance of key interactions and behaviors in a simple way is critical.

9. Present to Executive Team (VPs & President)

I was asked to present the results of this project to the executive cabinet of the university, it had to short, clear, and to the point. Honestly, although there were a few familiar faces and I had done this type of presentation before, IT’S NEVER EASY. I learned I would be presenting to the group right before their lunch arrived, so that there’s nothing like talking in front of a group of ravenous execs, right?!

The presentation went way smoother than I could have dreamed. There were some great questions from a few of the VPs and the president had very positive reactions to not only the finished product but the process. We got the green light to proceed with the final stages and launch.

10. Launch

The last stage of the production process was to refactor the code and continue testing across various browsers, devices, and resolutions. I used the CSS preprocessor, SCSS for the first time in production on this project. It really helped to operationalize and systematize branding elements like color, typeography, as well as UI components. The website’s design system, by the end of this whole thing, was really rebuilt from the ground up.

Four of us from the Web Team stayed late one night and pushed out all of the code, uncached the servers, and made a few last minute adjustments to improve performance.

The Surprising Results

• Bounce Rate: Reduced from ~50% to ~11%
• Exit Rate: Reduced from ~38% to %12%
• Time on Page: Reduced from 1:47 to 0:45
• Increased Sessions on All High Value Landing Pages