ReDI CV BUILDER

UX/UI

INTRO

I participated in this very impactful project for ReDI school, to provide their students with a platform that allow them to connect with companies after their digital studies.

A part of it was a CV Builder. The aim was to design three templates for the MVP of the app.

I participated for 4 weeks in the team, contributing in delivering those templates.

  • Team: @Sergio Pratz
  • Role: Research, UI, Design Handoff
  • Tools: Adobe XD, Figma
  • Timeline: 4 weeks

CHALLENGE

"Design three templates for the MVP of the app, trying to offer the users options that can fulfill their needs, as well as offer a competitive and professional look when applying for a job."

RESEARCH

Our research was focused on finding out the most three relevant CV templates that our MVP should have. In order to do that we went in two directions:

  • Checking the previous interviews with users and recruiters, taking into consideration our user persona
  • Benchmarking the existing CV Builders in the market
ReDI user persona

After our research we decided three kinds of CVs as the most representatives: minimal, the modern and the stylish. The differences between the modern and the stylish were stilistic, while their design was almost the same. That is why while my colleague focused on those two, I focused in the UI design of the minimal CV template.

THE MINIMAL CV

The characteristics we found for the minimal CV template were:

  • Tendency to straight lines (no diagonals or curves).
  • The only possible addition is an “upper bar” or header- this means no additional columns or boxes.
  • Usually they don't use “bold”, high contrast colors (sometimes they even go monochrome, with no highlight color)

Although this types of CVs allow more than one page, our scope (due to our research) was to always keep the CV as a one-pager.

UI DESIGN

The coding languages to be used in the automatic construction of the CVs were HTML & CSS. This meant that the way of designing it, after discussing with the designer team, was as blocks that had to stock one over the other. The problem of the maximum and minimum information CV arised during this stage, and the decision was: the CV design has to be able to accomodate the information in a professional way, but trying to find the balance between professionalism and visual appeal, and the amount the information it could hold. If the information was to be less, at the stage of the MVP there was no problem with dealing with blank space in the bottom part.

Here we can check some of the example blocks I designed for the minimal template

Some initial block designs for the minimal CV

FINAL RESULTS

I came up with three different models for the minimal template. I focused the general guidelines described before, and I introduced the brand highlight color.

three templates for the minimal CV

We did some A/B testing at this point, gathering the results of the minimum, the modern and the stylish designs and showing them to some recruiters, in order to decide wich ones were the prefered for each type. With that valuable feedback, we moved to have one template for each type that could be handed off to the programmers so they could use them in the MVP.

THE HANDING OFF

I prepared the material to be handed off to the programmers team, with all the necessary information for its coding.

Handing off info

NEXT STEPS

The CV Builder was only a small part of the product to be launched. There are several other features to complete. What is for sure is that the focus for the project was into the process of the CV building, and not into the variety of visual options for those CVs. Users should feel guided and sure during the whole process of building their CV, and feel that when they have completed the process, they have on the screen a very competitive CV that could allow them to seek for a job with guarantees. Therefore, the next steps would be:

  • Focus on the building process of the CV, making the user journey the easiest for them to have satisfaction and a good result by the end.
  • Research on how to guide better the users in this process.
  • Make the process understanding, not tedious and visually appealing, while branded, professional and trustworthy.

LEARNINGS

  • Working hand in hand with other fellow designers, programmers and scrum master was a revelation for me of a different way of working.
  • Putting the UX lens over the CV building was good for me ata personal level, since the analysis of it and the takeaways would impact my future personal CVs.
  • First time preparing a hand off made me feel the programmers shoes. It was easier since I also know HTML & CSS, and I was aware of what would be necessary, but still it was a very good experience to put it down on writing to realize how it is done and how it works.

Thanks for reading!