Updating career page: UX case study

I’ve been working in Swiss Re for quite some time in the marketing team when I got a chance to join a really cool UX project. The goal was to come up with an updated career website which should be:

  • modern mobile friendly website
  • attractive for everyone, doesn’t matter their level of experience and age
  • easy to navigate
  • without crappy text and with easy-to-find information
  • changed easily by anyone in the company

The old career website was made in…I don’t know…when the internet started…and gave job hunters lots of frustrations. I know from my own experience. Here is how I intended to run the UX design process focusing on the main page and a few consecutive features to make both, business and users them happy.

UX design process I ended up going through:

Analyzing User Data

I gathered data from Google analytics. These are the qualitative data, which tells what is happening, but it was harder to understand why.

Pain points and personas

The data from Google analytics helped identify several pain points. We brainstormed and used our understanding of people who we knew that used Swiss Re career page to prioritize the pain points. The following three were the most crucial.

Pain points:

  • Mobile friendly version missing. Data showed that 1/3 of users used their phone to browse the positions. The mobile version of the site was, however, super-limited and not compatible.
  • Too much filter options and hard to navigate. Job filter options were relatively well chosen, providing relevant options to filter. Experience level was however missing and the number of filter options was too big and showed in a dropdown menu which is hard to navigate, even hareder on phone.
  • Missing option to stay up to date about new relevant positions. It was not possible to create a reminder when a new job opportunity matching the skills or interest showed up. The missing feature is a huge opportunity to improve.

Personas

To better understand users and provide them with the solutions to their pain points, I created three personas. From Google Analytics, I was able to identify representative groups of users and based on several assumptions and brainstorming with HR, we identified goals and priorities of these groups.

Ideation & Review of ideas

Based on revealed pain points and personas, I came up with several sketches of how the main page and the interaction can look like.

Then, we reviewed the sketches with the HR team and other stakeholders. We tested the interactions with them and review personas and pain points and decided for the option which:

  • Has a carousel on the top of the page with quick links to most often requested links, including job information for applicants with different levels of categories.
  • Has a search bar located below the carrousel and will allow:
    • filter jobs based on location and keyword (these two can be entered manually)
    • after clicking “more” filter based on Location, Level, Function will show up. (Analysis of keywords most frequently entered into the search bar in past identified these. Also, its more clear and at first shows only the most relevant functions.)
  • Has a map showing locations where jobs are available. After clicking the location, the page with information about the offices and jobs available opens up.
  • Has CTA button – Crate job alert. After clicking it, the applicant will enter the categories of jobs he or she was interested in, enter email and subscribes to alert.
  • Will be easy to create mobile-friendly.

Based on the agreement, I created a lo-fi wireframe, to be presented to stakeholders.

Once upon agreed with everyone, I created a hi-fi prototype to have an idea about what is going to be made. The library of the elements was provided by the CMS company and was similar to Material design. This was an important point for me, as Swiss Re uses Material design when developing new apps, software or web.

After that, I joined a training about the CMS system where the site was about to be built and started to build it.

Homepage filter

Create alert

Video

After the high fidelity prototypes were shown again to all the departments, team members and HR, I moved to the CMS to put it together.

Here is my biggest trouble I had to deal with:

The system is able to by itself transform the elements from desktop to mobile. Well…to certain degree. Unfortunately, I have quickly learned that the widgets available are limited and only a few of them are responsive and look good on the mobile – so here is the moment when I understood what designing mobile first mean. You can see the final result typing Swiss Re career website into the browser.

Validation?

Unfortunately not. The product was already launched and no one had time or budget or willing to check how is SR new career website going and compare the old data with the new ones. I left the project and had to move to the new one. The website is now maintained only based on the feedback from the business and various teams, so I can see plenty of not relevant and crappy text is being added.

Outcomes

This was fun. It took us about a month to prepare and about two weeks to build. I’ve learned a lot during this project.

  • The overall UX process in general. I read through lots of articles and UX case studies which helped me get into it.
  • How to use the new Prototype option in Sketch to design interations
  • Save enough time and money for the validation of your process. It’s important to keep getting better. Perhaps it would help if at the beginning we would set some metrics on how to measure our goals. (efficiency – time to complete a task, effectiveness – reduction in errors, satisfaction – happiness with the system)
  • Always keep technical options and limitations in mind. Stay creative and don’t stick with your original version. You will, in the end, have to change it to look as much similar as possible.