A redesign of my client’s online data science portfolio.
February 2023 — April 2023, Remote
Helping my client to better showcase her work and display her skillset.
My Roles
UX Researcher
UX + UI Designer
Product Tester
Timeline
Research — 2 weeks
Design — 2 weeks
Testing — 1 week
Tools
Figma
FaceTime
Maze
THE PROBLEM
My client’s current portfolio was not fully fleshed out or designed in the way that she had envisioned.
My client had an online portfolio that was not fully built out or designed in a way that she desired. With this redesign, she wants to showcase more of the why behind her projects and include more storytelling. She also wants to more clearly display the various services she offers in order to highlight them for potential employers or clients of her own. With all of that being said, she also needed help in improving the overall aesthetic of her portfolio and in organizing the content she was planning on including.
THE SOLUTION
A desktop-first online portfolio that highlights my client’s skills and projects while also showcasing her personality and interests.
Skills and services.
A scrollable marquee showcasing each of the programs she is proficient in as well as three blurbs to highlight the three key skills and services she offers.
In-depth case studies.
Comprehensive case studies detailing the background of each of her projects, what she did, as well as personal reflections.
Detailed about page.
A simple about page detailing both her professional experience and interests as well as personal interests and hobbies to help hiring managers learn more about her.
Adaptable to mobile.
The same portfolio, just optimized to be viewed seamlessly and in a similar fashion on mobile devices.
BACKGROUND RESEARCH
Online portfolios are becoming more common and, in effect, more essential.
In many industries nowadays, an online portfolio is something that many companies look for in potential employees. The reason behind this is that these portfolios help candidates showcase their work and the why behind said work. Online portfolios also give candidates the opportunity to sprinkle in elements of their personality which, in effect, can help recruiters or hiring managers view them as more of a person and less of a résumé.
Another reason someone may choose to create an online portfolio is for the opportunity to take on freelance work. Since freelancers tend to work from home, it is important for them to develop an online presence with strong SEO so that they can market themselves to potential clientele. They can also use their online portfolios to showcase work and back up the skills and services they offer.
THE BEFORE
Before going into the design process for this project, I decided to conduct an audit of my client’s current portfolio to get a better understanding of the situation.
Homepage
While her homepage is very straight to the point, it didn’t feel engaging or encourage the user to take any sort of action. It could definitely use a more personal touch and a CTA of some sort.
Projects Page
Although she clearly lists out her projects and includes links to view them on Github, this is pretty much all it does. One of my client’s main goals for this redesign is to showcase the why behind her projects which is something they currently lack.
About Page
I honestly think her about page is decent in the sense that it gives a brief overview of her experience, interests and hobbies. However, I think the structure could be improved and I think she could go into a little more detail about her experience and interests.
COMPETITIVE ANALYSIS
Having a mix of professionalism and personality helps you stand out.
In order to learn more about what other data scientists are putting on their online portfolios, I did some research and found some that were frequently referenced as good examples.
Claudia Ten Hoope
This portfolio really showcases Claudia’s personality while maintaining a solid level of professionalism. I think where this portfolio really shines is the home page where it lists out all of the information that someone would potentially be looking for. I also like that Claudia includes case studies for each project, but I do think the overall structure of them could be improved
Donne Martin
Donne’s portfolio has a lot less information than that of Claudia’s, but they include Github links to showcase each project that is listed on the portfolio. From my research, this seems common amongst data scientists as this website allows users to showcase coding work. I do think the portfolio could benefit from a bit more personality and information, however.
Hannah Yan Han
Hannah’s portfolio is a lot more visual than the others and that is likely due to the nature of the featured work. There is actually only one data science project on the portfolio with the majority being data visualization and creative coding. Each project also links out to a Medium article written by Hannah which I think is helpful in providing some insight into the inspiration or background of said project.
From my research, I found that there are pros and cons to having a more professional portfolio as well as a more personal one. I think when it comes down to it, it depends on the type of industry you are in and finding the right balance between the two.
THE BIG QUESTION
After some background and competitive research, I decided to begin thinking of the research question that I would use to help guide me throughout this project.
Having found that most online portfolios are vastly different from one another, I wanted to figure out a way to help my client design hers so that it remains professional but showcases her personality as well so I created a few POV statements:
I’d like to explore ways to help my client to showcase the skills and services that she offers because it can help her to be hired quicker.
I’d like to explore ways to help my client to include more storytelling in her portfolio because it will help future employers to get insight into her thought processes and the way she works.
I’d like to explore ways to help my client to update the UI design of her portfolio because it will help her to structure the content on the site more effectively.
From these POV statements, I developed some HMW questions to help guide me in forming my research question:
How might we find the balance between professionalism and fun?
How might we include more storytelling on a data science portfolio?
How might we highlight different skills and services in a visual manner?
How might we create a portfolio that is more desirable to employers?
With my POV statements and HMW questions formed, I finally decided to focus my project on helping create an online data science portfolio for my client that not only showcases her skills and work, but also her personality. I also decided on a more concrete research question that will be used to guide my design decisions throughout this project:
How might we create an online portfolio that effectively showcases my client’s skills and past work while incorporating elements of her personality?
USER INTERVIEWS
When looking at a portfolio for the first time, all participants said they would conduct a quick scan before reading it in more detail.
With my research question decided, I conducted 5 user interviews with individuals who have an online portfolio as well as individuals who have been a part of the hiring process and reviewed candidates’ portfolios. Through my interviews, I found that all participants noted that they would only spend a few minutes when first looking at a candidates portfolio. This is due to the fact that they likely have many more to review, so they would choose not to dedicate tons of time to them yet until they decide if they will move on to the next round. With this being said, it is important for individuals to make their portfolios easy to skim through so those who take a quick look can get the gist of what you’re all about.
A portfolio’s design and content is dependent on the industry it is for.
Through my interviews, I spoke to people in a variety of industries ranging from data science to public relations. From this, I found that different industries not only required different materials or projects, but there are different expectations. For those in more creative industries like graphic design, it’s more acceptable to be playful and fun with your portfolio, while industries like data science or analytics may require a certain level of professionalism and structure. All of my interviewees also agreed that they believe there should be a balance of personality and professionalism so that you can showcase your work and experience while expressing your personality and differentiating yourself from the competition.
USER PERSONAS
After completing my user interviews, I began to visualize who exactly I am designing this feature for.
From the insights I gathered through my research and user interviews, I created two user personas to help me better understand both aspects of the hiring process: the job seeker and the hiring manager. These two personas will help me in understanding how to best design a portfolio that accomplishes the goals of the job seeker while meeting (or hopefully exceeding) the expectations of the hiring manager.
SITE MAPPING
With my initial research completed, I decided to brainstorm some ideas as to how the portfolio would be laid out.
For my site maps, I created two versions and presented both to my client to see which she preferred. Ultimately, we both agreed that option 2 was the best direction for her portfolio.
Option 1
Option 2
INITIAL SKETCHES
Now that my client and I have decided on a site map, I began sketching a few ideas for potential design solutions.
In the end, my client and I decided to move forward with option 1 for the homepage. She liked how the projects were staggered and liked having her wordmark at the top of the page with no image next to it.
Homepage
I first sketched out some ideas for the homepage and provided variations on how certain elements could be laid out such as the value proposition, projects, skills and services, etc.
Case Studies
With one of my client’s main priorities being the case study pages, I sketched out a few designs on different ways sections could be laid out, different ways images could be layered into the case studies, as well as two variations for the header structure.
About Pages
I sketched out a few very basic about pages to get a sense of how much my client wanted to include as well as how she wanted it to be structured.
Mobile Screens
Lastly, I sketched out some ways the homepage could adapt to mobile screens. Here I condensed the top navigation bar into a hamburger menu and placed more of an emphasis on the CTA.
LO-FI WIREFRAMES
After getting some feedback from my client and mentor on my initial sketches, I moved forward with making my low-fidelity wireframes.
For my low-fidelity wireframes, I focused on different variations of the site layout and structure and then presented the various options to my client. I played around with a few different options for layout out the projects, the title and CTA, as well as a few different ways I can lay out different sections within the case study page.
HI-FI WIREFRAMES
After several rounds of iterations and feedback, my client and I settled on some high fidelity wireframes.
Going into the process of designing my high-fidelity wireframes, I wasn’t given too many guidelines other than the fact that my client’s favorite colors were baby blue and lavender. While having the creative freedom was nice as it allowed me to explore many different design solutions, it also proposed a challenge as to not knowing where to start and having almost too many options.
Below is a screenshot of my Figma file where I explored a variety of design solutions. Some weren’t used to not meeting accessibility standards while other design solutions just didn’t feel right to me. Due to this, I decided to keep on exploring my options and seeing if any design solution clicked.
Through all of this trial and error, my client and I landed on a design solution that aligned with both of our visions for how we wanted her online portfolio to look. I incorporated pops of color throughout the design so that it would stay true to her while maintaining a minimalistic look that portrayed a certain level of professionalism that was common in her industry.
USABILITY TESTING
Although the flows and layout made sense to my participants, there were a few minor tweaks that needed to be made.
For this project, I conducted 6 unmoderated usability tests to get a sense of how users felt about the flow of the site, the UI design, the visual hierarchy as well as the information architecture. I didn’t receive any feedback in terms of the portfolio’s overall flow, but I did receive some feedback on different ways to improve the site and give it a better user experience.
Contact Form
One of the key pieces of feedback I received was to include a quick and easy way to contact my client via her portfolio. Rather than linking out to her e-mail, I decided to create a dedicated screen in which users can submit queries or messages to her and my client can respond to them at her own convenience.
Page Differentiator
I also added in an underline on the top navigation bar to help users clearly see which page they are viewing. While my participants didn’t get confused about what tab they were on, they noted that this could cause for some confusion down the line.
Left-aligned text
The last change I made from the feedback I received during my testing phase was left-aligning the text on the portfolio. This change was made to help improve the overall readability of the portfolio due to the staggered elements and text heavy pages.
FINAL PROTOTYPE
With usability testing complete and feedback implemented, I created my final prototype for my client’s online portfolio.
After several rounds of iterations, several mentor calls and group crit sessions, as well as meetings with my client, we finally landed on a design solution that she was happy with and excited to create.
Desktop Prototype
Mobile Prototype
REFLECTION
Sometimes more guidelines make a project easier.
When working through this project for my client, I didn’t receive too many thing she was looking for specifically as she wanted me to have the creative freedom to use the my UX knowledge to help redesign her portfolio. While having this creative liberty was exciting, I found myself looking to find guidelines to help structure my design thought process. In order to resolve this, I hopped on a call with my client and discussed what kind of portfolio she was envisioning in her mind as well as conducted a little inspiration search with her on sites like Dribbble and Pinterest. This project has helped me learn more about my working style as a designer and am excited to continue learning more about it throughout my career.
Working with a client helped prepare me for the design industry.
For this project I really wanted to work with a real-life client and help create a responsive site for them that best suits their needs. When my client approached me asking for help with her portfolio, I was ecstatic. I really enjoyed being able to work with a client and walk them through the design process as well as my own personal thought process when it came to her portfolio. I learned how to communicate with a real-life client that although some design solutions might seem like the perfect fit for their specific project, those same design solutions might not be feasible or best practice. It also helped me to learn how to set deadlines and expectations to ensure that the design process was as efficient as it could be.
NEXT STEPS
Incorporating a chat bot feature to her portfolio.
In one of my calls with my client, she expressed interest in the idea of adding a chat bot feature to the bottom corner of her portfolio. This chat bot would be able to assist with sending inquiries to my client, scheduling meetings, or anything else that she believed would be helpful. I didn’t get a chance to explore this design solution in the current state of this project due to time constraints, but I think if my client is still interested that this would be a cool feature to do some research on and build out.
In addition to exploring other design solutions that I didn’t have a chance to flesh out, I also plan on helping my client finish adding in the rest of her project case studies to her portfolio so that it will be job search ready. I only created one for this project due to time constraints, but am excited to continue working with her and help her add the finishing touches to her new portfolio.