close
x
lines
logo plus
logo

PORTFOLIO WEBSITE

A personal website for a Machine Learning Engineer with 4 years of experience is not just an online business card; it is a powerful statement of self in the professional community. The site serves as a comprehensive presentation of programming skills and abilities, as well as a demonstration of completed projects.

TIMELINE:
1 month
TYPE:
PERSONAL WEBSITE
ROLE:
UX/UI Designer
TEAM:
Art Director
2 Developers
(Gorev Maksim)
photo phone

/BUSINESS GOALS

  • Skills and Projects: The website will display skills, experience, and completed projects, aiming to secure 3-5 job offers from major tech companies and recruiters within one month after launch;
  • Industry Resources and News: The website will serve as a valuable resource by offering knowledge, insights, and updates within the Data Science field, demonstrating the client's expertise;
  • Showcase Collaboration Opportunities: The website will highlight potential for collaboration on Machine Learning projects, inviting interest from industry peers and potential partners;
  • Increase Social Media Engagement: The website aims to increase the professional's visibility and reach by targeting a growth of 10-15% on social media platforms like LinkedIn and Instagram;
(Posters for articles)
close
x
bef bef

(1)PROJECT BRIEF

In our design process, I used the Design Thinking framework, customizing it for our project. I went through stages such as conducting research, organizing information architecture, wireframing, designing and testing. It allowed us to go step by step, breaking down ambitious goals into small tasks.

TARGET AUDIENCE:
  • Recruiters: Interested in reviewing project examples and the technology stack;
  • Data Science Professionals: Seeking industry news and innovative solutions;
USER STORY:
  • User Story 1: As a recruiter, I want to easily and quickly find information about the candidate and review their background and experience, So that I can swiftly assess the candidate's technical abilities and determine if they align with the job vacancies;
  • User Story 2: As a Data Science professional, I want to easily access the latest industry news and updates, So that I can stay informed about current trends, explore innovative solutions, find inspiration and practical applications for my own projects, and engage with the community to participate in discussions;
(Briefing)
close
x
bef bef bef

(2)RESEARCH

Analyzing 5 Data Science and Machine Learning engineer portfolios, I conducted a competitive analysis to uncover market gaps. Samples were from data professionals with similar 4-year experience as the owner.

sq
SOME POSITIVE FINDS:
  • Personal Insights: Including personal interests and soft skills presents a comprehensive view of the individual, indicating potential for team synergy;
  • Expertise Proof: Blogs, achievements, and publications serve as evidence of the individual's extensive knowledge and active engagement within their field;
  • Professional Sharing: Sharing gadget reviews, tools, and evaluations, fosters engagement among professionals;
sq
SOME NEGATIVE INSIGHTS:
  • Outdated Designs: Many portfolios look dull and outdated, which doesn't reflect the innovative and tech nature expected in Data Science;
  • Lack of Project Explanation: Many portfolios don't provide enough information to show how deep or impactful the work is;
  • Missing CV: Not including a CV makes it difficult to understand someone's professional background and to print a CV for meetings;
(Competitive analysis)
close
x
img
frown
1. OBSOLETE DESIGN:

The site looks outdated, not up to modern web design standards.

2. LACK OF PORTFOLIO DETAIL:

Lack of detailed project explanations.

3. INEFFICIENT INFORMATION ORGANIZATION:

Content categorization does not facilitate quick browsing.

smile
1. SOCIAL PROOF:

Blogs and publications demonstrate the site owner's expertise and engagement.

2. CONTACT ACCESSIBILITY

Contact details are prominently displayed for easy communication and networking.

frown
1. GITHUB ABSENCE

No GitHub link may hinder code examination and contributions review.

2. ACHIEVEMENTS NOT HIGLIGHTED

No mention of achievements or recognitions for projects undermines their success or impact.

smile
1. TOOLS DISPLAY

The site lists project tools, showcasing technical skills.

2. PROJECT DESCRIPTIONS

Project descriptions offer context and insight into scope and impact.

3. LIVE VERSION ACCESS

Visitors can interact with live project versions.

img

/USER INTERVIEW

To deepen my understanding of machine learning fields and how companies evaluate candidates, I conducted interviews with 5 HR and 5 industry professionals, with the goals of:

  • For HR: to understand candidate review and evaluation processes;
  • For professionals: dentify portfolio elements that enhance collaboration and communication;
triangle
HIGHLIGHTS FROM INTERVIEWS
  • Showcasing Hard Skills: Detailed information on selected technologies, tools, and frameworks helps better assess candidates.
  • Speed for Evaluating Candidates: HR professionals emphasized that the average time spent assessing a candidate is 3-5 minutes.
  • Showcasing Soft Skills: Demonstrating engagement, teamwork across diverse groups, and communication skills can better illustrate a candidate's suitability for a team.
  • Providing Direct Access: Links to source code and interactive demos enable professionals to find inspiration for their projects.
  • Highlighting Continuous Learning: Displays of ongoing education through courses, certifications, and workshops showcase the ability to stay current with trends and technologies.
  • Displaying Professional Presence: Recognition through awards and thought leadership via blogs highlights a high-level professional status for HR.
  • CV Accessibility: An easy option to download and print the CV.
  • Enhancing Information Scan-ability: Grouped content sections for efficient information scanning and faster retrieval.
(User Interview)
close
x
o o

(3)IDEATION

To stand out from competitors and aid customer decision-making, I implemented three key solutions:

  • Single Screen Home Page: The homepage is designed to display all content and navigations on a single screen. This layout facilitates quick scans, allowing HR professionals to efficiently find and delve deeper into the necessary information.
  • Grouped Project Information with Live Demos: This section provides detailed information about projects, including live demos, technology stacks, roles, descriptions, and achievements. The information is categorized to support quick scanning and easier access.
  • Bright Color Inspired by Xcode: The website's color palette reflects the owner's positivity and is inspired by the professional space of Apple's Xcode development environment, enhancing visual appeal and user engagement.
(Main and About Page)
close
x
photo photo photo photo text

/INFORMATION ARCHITECTURE

In shaping the portfolio's information architecture, I've chosen to focus on four main pages:

  • About: Presents a full overview of the engineer's career;
  • Projects: Details project work and its impact;
  • Blogs: Demonstrates leadership and expertise;
  • Contacts and CV: Easily view and share the career path with others;

This ensures a balanced and engaging user experience that aligns with industry expectations and user preferences.

(Information architecture)
close
x
bg bgmg

(4)WIREFRAME

I dedicated particular attention to the “Projects” and “About” and pages. These pages are pivotal—they define the most important information for HR specialists and professionals:

  • “Projects” Page: Detailed information combined with intuitive navigation allows users to delve deeply into the work while maintaining clear links to action steps.
  • “About” Page: Information is organized into categories through a visual hierarchy, displaying only the necessary details for evaluating candidates.
(Hi-Fi for Project and About Pages)
close
x
img
frown
1. CONSTANT USER ACCESS:

Direct links to GitHub and live demos are fixed for visibility with each project.

2. IN-DEPTH EXPLANATIONS:

Scroll area offers detailed project insights while keeping main actions visible.

3. SIMPLIFIED NAVIGATION:

Top menu offers user-friendly site navigation.

4. SOCIAL MEDIA CONNECTIVITY:

Footer social media links enhance networking and audience growth.

frown
1. VISUAL HIERARCHY:

Crafted for quick navigation, enabling HR to find key information fast within the 3-5 minute review window.

2. ESSENTIAL CONTENT:

Only the most relevant information is presented, matching HR and industry expectations.

3. AWARDS FOR EXPERTISE:

Awards are prominently displayed to immediately establish credibility.

4. INTERACTIVE FEATURES:

Engaging elements captivate users, making skill exploration an interactive experience.

img

(5)DESIGN

  • Vibrant Palette: The selection of bright colors not only reflects the portfolio owner's active and positive approach to life but also echoes the working environment of Apple's Xcode interface;
  • Dual-Faceted Illustration: The homepage illustration shows two sides of the owner — the careful professional and the well-rounded person, balancing career skills with personal interests;
  • Engaging Interactivity: Interactive elements are strategically placed to make the process of discovering information about the owner's skills and projects not just informative, but also a delightful experience;
(Moodboard)
close
x
des

(6)TESTING

Due to differing opinions within the team regarding the project pages, we decided to conduct A/B testing based on two assumptions:

  • Detailed description: This version includes step-by-step details and reasons for choices, highlighting the owner's skills and workflow, which could better showcase his abilities;
  • Shorter Description with Key Points: HR professionals usually spend 3-5 minutes reviewing portfolios, so a brief description could make it more likely that they read everything provided;

The testing involved 20 participants for each version, which we alternately displayed over two months to assess which version would show better results.

triangle
RESULTS:
  • The shorter version demonstrated a 3% higher conversion rate and an increase in followers on social networks, especially on LinkedIn;
  • The shorter version also showed that the average time spent on the website was 1.5 minutes, aligning with HR time for reviewing;

Based on these results, the decision was made to keep the second version as the main solution.

(A/B Testing)
close
x
p

(7)OUTCOMES

  • Job Offers: The engineer received 20 job offers, including opportunities from a big tech company;
  • Collaboration Inquiries: Received 5 inquiries from companies and researchers interested in collaboration;
  • Professional Invitations: Garnered 10 invitations to professional events;
  • Social Media Growth: The LinkedIn follower count increased by 25% monthly, without any changes to the profile, over a three-month period compared to before the website launch;

These achievements confirm that all set business goals were successfully accomplished.

(Design for About, Project, and Portfolio Pages)
close
x
f f f

(8)KEY LEARNINGS

Reflecting on the project, I've learned valuable lessons about assumptions, user testing, and communication:

triangle
Resolving Team Disagreements:

During the project, I encountered a disagreement with a client over project page descriptions. The client wanted detailed descriptions, but user interviews indicated that HR professionals preferred quicker reviews.

To find a compromise, I suggested and implemented A/B testing with two versions: one detailed and one concise. Each version was reviewed by 20 participants.

The testing revealed that the concise version had a 3% higher conversion rate. Based on this data, we decided to use the shorter version, demonstrating that using data-driven approaches can help resolve disagreements and lead to better decision-making. This experience taught me that a flexible approach, backed by data, can help resolve differences with stakeholders and lead to effective, informed decision-making.

(Mobile Versions)
close
x
last last last last last
next
Any questions?
BEHANCE LINKEDIN EMAIL
plus
NEXT PROJECT
(MOBILE APP)