Published on | Prototyping: From UX to Front End — Medium Lee Anne Mercado

*I have no affiliation with the Walt Disney Company. I redesigned the Disney Careers website purely as a personal project.

Spoiler: The Final Redesign (Homepage)

Background

Through my internships and class projects, I have experienced my fair share of UX Design projects. BUT, I have always had the counsel of syllabus guidelines and step-by-step directions from leaders during the process. I felt like I grasped the design process really well, but I questioned if that was simply the consequence of always being guided. In order to both create a solid answer for myself and experience growth outside of these structured systems (school and work), I decided to do a personal project on the redesign of the Disney Careers website.

The Problem:

I specifically chose Disney’s career page because Disney is known for making their fans feel the magic; in other words, they prioritize people’s experiences through the Disney narrative. This website falls short of meeting the standards of Disney’s reputation because — coming from someone who has explored this page tons of times over the years— the experience of searching for jobs is confusing and frustrating.

Left: Homepage/ Right: Results page

User Research

Unsure about whether or not I was the only one experiencing small aggravations and misunderstandings with the website, I interviewed 18 of my friends. They were also appropriately part of the target audience which is: job searchers, likely between the ages of 18–35. I simply had them do a few typical tasks anyone would have on a career website:

Look for Software Engineering positions in California
Find Marketing Internships in California
Search for available positions in the Disney Interactive Games department
Find available marketing positions in the Disney Interactive Media department

From these user interviews I learned that my difficulties with the website were not merely personal problems; additionally, each person had his/her share of difficulties interacting with the website.

The user is clicking through the different filter headers, evidently confused about what types of information is under eachThe user has to enter the information three times because the system did not save at least one part of the information they inputted each time

Competitive Analysis

Before starting off the redesign, I did a competitive analysis between entertainment companies and their career website interfaces in order to compare where the Disney website was failing and excelling. Creating this analysis allowed me to also focus on the most important interactions with a career website.

From this analysis, I found that some of the most effective features included:

— keeping the filters to a limited number of less than 5 options makes it less overwhelming

— displaying the job positions under its respective department maximizes information space and maintains clarity for users

— using a search function as the main option for finding jobs is the least helpful feature

Analyzing the Data

Affinity Diagram

As a visual learner, my first step in organizing the data was to group the behaviors/ feelings that the users had during their experience.

As a quick aside, I just wanted to note that this was my first time using the affinity diagram and I found that it made the data analyzing process very fun (which, admittedly, is my least favorite part). It made my scattered thoughts feel organized and meaningful.

I first wrote down every note for each person and put it on individual sticky notes, distinguishing each person by a small sticker attached to the note. Afterwards, I grouped them by similarities, as shown below. This led to creating two overall categories: Overall Website and Details. These included four smaller clusters which I will refer to as: Hesitation in Exploration, Lack of Discoverability, Filter Box Issues, and Mental/ System Model Incongruences.

Two major categories: Overall Website and Details. Top left: Hesitation in Exploration; Top right: Lack of Discoverability. Bottom left: Filter Box Issues; Bottom right: System Model Incongruences.

Overall Website — Hesitation in Exploration

This first cluster of sticky notes revealed how hesitant users felt when looking for job positions based on department type, which really meant that users were feeling weary about having to specify their search. Consequently, there is evidently a lack of flexibility and clarity in the website that prevents users from easily understanding how to perform a typical task with specific requisites.

The notecard in the middle shows the similarities of these sticky notes. The notecard on the side with the green markings are immediate feelings that come to mind with this cluster’s problem.

Overall Website — Lack of Discoverability

This second cluster shows that most of the users tended to use only the search function to complete all the tasks (even the link-dominant users). This website has lots of information to offer, but those parts are either not inviting enough or are simply too overwhelming with information. For example, there are very tiny links at the bottom of the page, after all the trending news information, that allow the user to search by business type and job group type. The users typically missed these options and thus used the search bar instead. Additionally, the results produced by the search bar do not show all the desired options; it only produces the answers catered to the keywords the user has typed in. Therefore, the search bar deprives them of understanding all that this site has to offer.

Details — Filter Box Issues

This set of sticky notes reveal different types of issues with using the filter boxes. It seemed that because there were too many options, the filter feature was really more of a nuisance than a helpful tool.

Details — Mental/ System Model Incongruences

Finally, this cluster of sticky notes showed how the system model — or the way in which the system worked — did not match the users’s mental models — or the way in which they expected the system to work. This generally led to more time wasted and aggravated feelings for the users.

Double Diamond Technique

In order to decide what to do with the results and how to best improve upon these user struggles, I consulted the Double Diamond Technique.

These first set of pictures depict the process of how I listed all the possible problems and then narrowed those down to the root problems.

Left: initial problems/ Right: key problems

This second set of pictures shows how I wrote down all the possible solutions and then narrowed it down to the final, best ones. This consequently created the basis of my design (in words).

Left: initial solution ideas/ Right: focused solution

Personas

As a result of the data I gathered, I created these personas to model and connect with the users I’m designing for.

The Redesign

Paper Wireframes

In an effort to translate my post-its into visual plans, I quickly drew basic wireframes about how I imagined the layout of the main features of the website.

Quick sketches

Basic Prototypes

Left: Homepage/ Right: Choosing a tabLocation Filtered Results

Final Product: High-fidelity Prototype (INVISION)

My final redesign was highly inspired by Blizzard and Sony’s career website interfaces, namely the filter features and homepage display, simply because I think all career websites should standardize these intuitive layouts. I think the idea of not “reinventing the wheel” really applies here because in reality, we don’t need unique layouts for career websites, we need consistency.

The major changes:

As a result of both my competitive analysis and observation of user behavior during interviews, I took out the search bar as the main source of navigation. I instead made the different country categories the main attraction. What sets Disney apart from plenty of other companies is that they have job availability in many different countries, so I thought it was appropriate to immediately display the countries with available job positions. This new navigation option would surely help users like Jon and Kim (from my personas) find their desired results faster.

In order to diminish the issue of confusion with filters and avoid the stress that the users experienced during the usability tests, I narrowed it down to only three different options: businesses, states/region, and job types. Generally, these are the main things that job searchers typically sort through on career websites.

In order to prevent users from feeling too overwhelmed to perform a task during their job search like they did during the user interviews, I separated the careers website into three sections: Careers, Trending News, and Extra Information. I felt that it was necessary for the job search task to have its own section away from the other features so that users would be able to focus on finding their dream job.

The most important thing missing from the original design is that users were never really able to determine if the results page showed all the possible options with the appropriate criteria. This concept of having all the available positions in lists and tabs erases the idea that there may be hidden results that are only achievable with key words. With this layout, the user knows that he/she is seeing all the possible options. This improves the problem of the lack of discoverability in the original website.

In order to improve on the search bar for people (like the ones in my persona) who are going through several career websites at once during their job search, I added the feature of real-time suggestions as the user types. Oftentimes, different companies have different titles for the same type of role so it can be confusing to figure out what word will produce appropriate results. With the real-time suggestion, users are able to see the suggested job titles with their typed in letters. This saves time by allowing the user to quickly go through the different job title names in the search bar without having to go to the results page each time to see if any results show up.

Some interactions with the prototype:

The website is separated into three main tabs now (for the purpose of isolating the job searching task)Example of filtering the choices by business typeOpening up tabs to see available job positionsUsing the search function

Check out the final redesign for yourself here!

Conclusion

Overall, I enjoyed this project as much as my hobbies. It was so easy to keep going because I was constantly excited to face the latest challenge that would lead me to the next part of the solution. There is a world of possibilities in design while also so much guidance from user behavior, which makes this process so unique.

The largest challenge was truly restraining myself from immediately jumping into the design process without consulting any of the data organization techniques because the design steps are my favorite part. BUT, I wanted to take this project as seriously as I would any other one, so I knew I had to be thorough with each step. Luckily, I found that using sticky notes to interact with my data is a process I very much enjoy.

I’ll be the first one to admit that this redesign is not perfect, nor is it done, but that really goes with any design — it’s never finished.

Redesigning the Disney Careers Website was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redesigning the Disney Careers Website

Cool stuff, every week

More Articles