PORTFOLIO WEBSITE

Reimagining a professional portfolio for a prospective audience

BACKGROUND

Jordanconner.com the portfolio of Jordan Conner (this is so meta) that needs a redesign to better align with UX-centric design portfolios.

ROLE

Judge, jury, executioner = myself 💁🏽‍♀️

RESULTS

New strategy approach
Current portfolio revision end-to-end to fully resonate with UX and Graphic design hiring managers and clients alike.

A refresh of existing pages
Refined documentation of processes and lift of accompanying graphics will further align with the role of a senior UX designer and their capabilities.

A UI lift that aligns with my visual identity
The new site features updated components to enhance the user experience, and is able to compete with other modernized UX/UI and senior level graphic designer portfolios visually.

What defines a successful UX portfolio to hiring managers and other design-interested users?

Research & strategy

DEFINING OPPORTUNITIES

Simplify the process definition and adapt other UX projects to meet case study criteria.
Identify the key points of interest for hiring managers and prioritize highlighting those aspects on the website to quickly capture the user's attention and increase the likelihood of being selected for job opportunities.
Conduct comprehensive research, covering topics such as what hiring managers seek in UX and product design portfolios, the optimal architecture of these portfolios, and the elements required for a successful case study.

Research findings

I do not have access to UX hiring managers, but do have feedback from a few Art and Creative Directors that were able to review my old site through a UI lens. Since I need more UX perspectives, I searched forums such as the ux design subreddit as well as medium articles to note relevant information.

User-centered design

“Your goal is to hook companies as quickly as possible. Save your resume until later by creating a dedicated About page. Avoid including your resume on your landing page.”

“Around 80% of users check out my about me page before visiting a case study according to analytics.”

“Include greatest hits on cover.”

“Use the title and an opportunity to explain what you did, the goal, or even the impact you had.”

Information Architecture

“Don’t make people go back to your projects page to find your next relevant case study. Provide them a link at the end each of your case study’s that guides them to the next project.”

“Outline exactly what your role was in the project, especially if was done as part of team.”

Accessibility

“Whenever my company hires, I also check things like color contrast and basic accessibility features. If your imagery doesn't have Alt Tags, and your text has a 2.9:1 contrast ratio, I can tell you're not paying attention to the small details of usability.”

Key Insights

Recruiters have limited time to review and do not want to be spend a long time searching through a website for key targets.

Recruiters should be able to visualize and see the process clearly outlined in the case study.

Recruiters should be able to identify the specific role on a project.

Recruiters should be able to tell the designer has strong UI skills as well as UX research and storytelling experience.

User journeys crafted from findings

Using the findings mentioned above, I developed user personas to shape my final product.

Person A

Does not have a UX background but is familiar with hiring senior level designers.

They are looking for: strong UI skills and if the designer can interestingly narrate their process. They want to see personality in the writing and visuals.

(Interested in flashy visuals to draw in but wants the case to be engaging enough that the length isn’t the focus)

Says

“Your goal is to hook companies as quickly as possible. Save your resume until later by creating a dedicated About page. Avoid including your resume on your landing page.”

“Around 80% of users check out my about me page before visiting a case study according to analytics.”

“Include greatest hits on cover”

“Use the title and an opportunity to explain what you did, the goal, or even the impact you had.”

Does

This user immediately clicks through to the About Me page and scans project overview pages for the most visually interesting graphics. These will be the projects they choose to click on.

Thinks

A lot of portfolios lack personality. In the hopes of choosing a designer that would also be a good culture fit, they are drawn to portfolios that are visually clean, but have subtle elements that are interesting to the user and show a sense of character.

Feels

The user feels that a successful portfolio is a balance of UX to UI: typography, color, and other UI elements are tasteful and intentional, and do not outweigh the research and human experience aspect. The user is excited when they see fun animations in a portfolio.

Person B

This person is reviewing hundreds of UX portfolios and day, and has limited their focus to a set of points that will determine if the portfolio is successful.

Says

“Don’t make people go back to your projects page to find your next relevant case study. Provide them a link at the end each of your case study’s that guides them to the next project.”

“Outline exactly what your role was in the project, especially if was done as part of team.”

“Visuals / modern-looking design and good UI treatments carry a lot these days…Tough market. Make yours look as good as possible. Big clean modern typography, clear designs.”

“I'm a hiring manager, and when I evaluate a portfolio I look for the following:”

Understanding of the goals and how they tie into the solution
Process and methodology
Creative problem solving
Communication skills
Aesthetic (optional - role depended)

Does

This user is focused on the basics to include in a portfolio, as well as the basic items to include in a case study. This user is scanning the portfolio projects quickly and want to easily be able to identify what the major points of a project are: the project brief, individual responsibilities, and final results.

Thinks

It is mind-numbing to scan hundreds of portfolios. They are thinking that it needs to be obvious how to navigate through projects, as well as other pain points including how to easily scroll to the top of the page and get back to the home page from any page on the site.

Feels

The user feels that a lot of portfolios are not clear in their findings. Communication is a huge aspect of design and it is important for a designer to effectively communicate their design process in a documented manner. It is also important for a portfolio to stand out. Be bold.

Person C

Person C is interested in seeing how designers work through projects with significant constraints, including what to do if the designer does not have enough real-world UX / product design experience, or if the project end did not meet the original scope.

(Values the journey, finds the lessons / what a designer could do differently more important than the final product)

Says

“I like the personal projects also because they add variety to one's portfolio. They show me what you can do if you are given more autonomy. They often show the breath of one's skills because they don't get the restrictions you get working on something where someone else is the stakeholder.”

“The only important thing is to clearly walk through your thought process. What was the original problem you solved, how you solved it, who did you collaborate with, and what was the end result.”

“Combining storytelling and intentionality will show the recruiter that not only have you considered everything, but you can justify your decisions and explain everything succinctly.”

Does

The user encourages the designer to try to start new personal UX projects to add to their portfolio. They also tell the designer to include worthwhile projects that may not have an end result. Instead rely on qualitative data to effectively demonstrate their design process and contribution to the project.

Thinks

It is more interesting to see how designers are able to demonstrate flexibility in “impossible” situations. Focus on the journey rather than the final result. A project is never fully complete and a design challenge is never fully solved. There is merit in being able to identify missteps and pain points, and provide alternative solutions to a “failed” first solution.

Feels

The user feels some sympathy for designers who are in a tough position career-wise and are ambitiously trying to widen their design expertise.

Analysis

What worked well

Site is clearly defined in three pages: Home page, Projects, About Me.
Contact CTA is prominent.
Simple navigation system
Projects include eye-catching imagery and copy that clearly outlines the basics: background/ overview, my role, type of design and the final deliverable.

What needs improvement

The design lacks visual appeal and feels mundane. The final revision was rushed, resulting in imagery and copy that could benefit from more thoughtful consideration.
Encourage earlier user interaction to eliminate the need for users to click to another page in order to access the projects.
The "About Me" section could benefit from refinement, and adjustments to the layout could help streamline its presentation.
Mobile-first: Current site is fine, but it could be improved by making minor UI adjustments to the overall layout.

2021 Portfolio

Competitor Analysis

Research included:
- Utilizing Linkedin as a search tool to identify companies I’d like to work for, finding current employees and viewing their portfolios.
- Viewing portfolio site aggregators
Success metrics are defined as:
- Clean and modern aesthetics
- Effective case studies documenting the process
- Clear navigation
- Short and concise personal descriptions

Possible solutions & implementation

Key target goals

Two separated project modules

Offering UX projects prominently on the home page will satisfy UX hiring managers and offering other projects below will limit searching and click-off page for other users.

Secondary navigation

The user doesn’t have a way to get to the next project without scrolling and clicking back to the top. Make the journey easier for the user.

Added visual interest

Adding updated components and fun and simple UI aspects such as hover interactions and a unique visual identity will aid to the lift and user interest to keep clicking on the site.

Site map

To make it simple for the user, I decided to place all my projects on the home page.

The Selected Works link in the navigation bar is an anchor link that leads back to that section on the home page.

There is a sub-navigation and scroll to top function on all interior project pages to easily guide the user to the next project.

Wireframes

I designed three sets of wireframes that all fit my target goals. My website is built on Wordpress drag and drop tool, so I wanted to plan ahead in case any components weren't easily buildable.

To reiterate, the platform dictates the final layouts.

Final product

UI Changes

Halfway through the design process I realized the initial design was not what I was envisioning for my final product. My color choices and imagery were a bit too experimental, so they were simplified to a more neutral color palette to not take away from the scope of work.

Usability study

Due to time constraints, I redesigned the new portfolio and developed a usability survey that would allow non-UX designers to assess my site to meet my goals. While this has not been shared, I would be interested in conducting this study in the future.

METHODOLOGY

Type: Moderated Usability Study
Location: United States
Date: Sessions include a survey sent to participants
Length: 10-15 minutes depending on user

RESEARCH QUESTIONS

Is the user able to easily navigate to find UX case studies?
Is the user able to easily navigate to find non- UX case studies?
Do users find the portfolio graphics visually interesting and are willing to click into the project based solely on the graphic?
Are key points easily identifiable on each project
Which case study is most interesting for users to read about?
Do users feel the projects are too long to scroll?

Lessons

⭐ Upon comparing multiple case studies, several key focal points emerged: problem identification, analysis, development, execution, implementation, and testing. However, in later stages, priorities may shift due to factors such as financial constraints, scope adjustments, capacity limitations, and the availability of collaborative teams. These shifts can impact the execution and completion of final products. The inconsistency observed in the later phases across studies suggests that real-life application could offer clearer insights into which components are essential and which are not.

⭐ Real-life business applications provide the most accurate basis for judgment, as I've gained experience in sacrificing the optimal execution method due to time constraints or aligning with the bottom line of the business.

⭐ This exploration has provided valuable insights into meticulously documenting each step of the process. In previous roles within the marketing department, business requirements were typically defined by the performance of the company and the marketing director before reaching my desk.

⭐ I excel in making informed executive decisions and adapt solutions based on evolving business needs. This was evident in the redesign process, where I initially planned to add two new case studies. However, realizing the importance of considering both the business and user perspectives for a successful UX orientation, I opted to prioritize understanding these perspectives before proceeding with other case studies.

JORDAN CONNER