Roles and Tools
Team: Olena Khomchenko (UX/UI Designer), Vladlen Minenko (Front – End Developer)
Role: As a UX / UI Designer, I was responsible for the visual and navigation portion of the project
Tools: Figma, Zeplin, Balsamiq, Zoom
A Personal Website Tells the Client’s Story
The goal of this project was to redesign the client’s personal website (portfolio) to make it easy to use, but at the same time meaningful. To create an online portfolio that would help all visitors understand what kind of knowledge and experience the owner of the portfolio has. Since communication in today's world is not only via desktop, I decided to create two versions of the online portfolio: a web version and a mobile version.
Research-Driven Process
What's Wrong with a Portfolio?
This is what an online portfolio looks like today
Mobile View
‘My Work’ Page, Current State
Dropdown Menu, Current State
Advantages:
All of the information available on one screen, no extra scrolling or clicking required
Opportunity to contact the owner of the portfolio without unnecessarily navigating away to secondary pages.
Color scheme is combined with light animation.
Disadvantages:
Upper menu, which is represented by one button + contrasting substrate creates clutter on the screen
The top menu completely blocks access to the main information on the page.
Lower navigation is too shallow and there is a possibility of wrong communication method.
Desktop View
Advantages:
Each page displays the required amount of information
Clear top and bottom navigation
Disadvantages:
The top menu, which is represented by one button + contrasting substrate, creates clutter on the screen
The initial view on the ‘My Work‘ page is misleading and not quite clear.
Who Is the Audience for This Online Portfolio?
The purpose of the personal portfolio is to convince a potential employer or client to work with the owner of this portfolio. In this case, the client has set the task to make a portfolio that will help display their skills and abilities in full. To make clearer how the website should be redesigned, I decided to create a character to represent the potential user. Meet Tom.
Demographics
- 24 years old
- Lives in NYC
- Recruiter at BigTechCom
Tom said: “ I do not want to waste time on boring resumes and cover letters. I prefer to see the work that the person has done, without the huge amount of text and standard phrases ”
Goals
- Wants to be a responsible employee of the HR Department at BigTechCom, which provides its company with the necessary employees
- Wants to quickly understand what knowledge and experience a potential employee has, how they are represented in the portfolio, and how much a potential employee can be useful to a company.
Pain Point
- Some applicants do not list all their projects in their portfolio or in their Resume
- Most portfolios, like resumes, are very standard and boring.
After evaluating the existing website, and creating a character, I have a problem statement:
“How can we systematize our potential and present developments to other users?”
How Was the New Portfolio Created?
I started redesigning the online portfolio by drafting low-fidelity wireframes in Balsamiq.
Home Page
Desktop/Mobile View
It was decided not to change the home page too much, just to make it less loaded.
“My Works” Page
Desktop View
On the ‘My Work’ page, we decided to remove unnecessary animation to allow users to have quick access to information (projects) without unnecessary clicks. Information about projects in the web version of the site is available directly from the ‘My Work’ page.
Mobile View
In the mobile version of the ‘My Work’ page, projects can be accessed from both: the Home page and ‘My Work’ page. In the mobile version, the user can view information about the project just by clicking on the desired project.
About Me Page
Desktop/Mobile View
It's an ideal resource to promote our client's professional brand. Potential employers can go to your 'About Me' page to find more information about my client.
Contact Me Page
Desktop/Mobile View
The ‘Contact Me’ page should be easy to find so that the employers can quickly contact him if he needs it. Including a short form using fields helps my client understand who's contacting them.
What Does the Website Looks Like Now?
After discussions about functionality and features, a prototype of a portfolio site was created.
