PROJECT INFORMATION
GOAL:
The goal was to design a portfolio showcasing my experience and work from different design niches that I’m experience with and passionate about, while making it easier for users to identify my experience and work relevant for those design roles.
PROBLEM:
The main problem was the fact that when clients wanted to see samples from my portfolio, I would be required to send them individual URL’s in order for them to see projects that are related to that design role, be it web, print or architecture. This lead to clients constantly having to swap between browser tabs to check out my work, instead of having a consistent experience. Also they were having a hard time identifying what skills would be relevant for that specific role, while also being really hard to optimize for SEO due to the multiple niches I was targeting
SOLUTION:
It was clear that the solution would involve creating different landing pages which I could send to clients, however the problem was still present for people arriving via organic search or direct URL on my main page since they were still presented with my full portfolio. I solved this second issue by creating a hub page that connects all portfolios, this way when users arrive on my main URL they have an option to choose which portfolio to view
Knowing that there might be people who don’t know what certain portfolios are, like UX UI, archviz, I used some website copy (text) to ask them what they are looking for? launching a new website? an e-commerce or web app? advertising? and so on. This made it clear which portfolio they should look at, while making each landing page unique so they won’t be put off by the same look, encouraging them to explore. The slider below will show you each of the main designs and how they are connected to the main hub.
MY UX APPROACH:
I STARTED BY DOING A MARKET RESEARCH
Why I did this: to understand what I need to include on my website, how many projects to include and what I need to avoid or improve on
How I did this: by researching each niche I was targeting
How it helped: by helping me see what the current trend is, what others are doing , what I can do better and what’s the minimum standard I need to reach for my website to be viable
AND A WEBSITE TRAFFIC BREAKDOWN
Why I did this: to understand where my users would be coming from and how they would reach my portfolio
How it helped: by helping me later on understand what devices they were using, how likely are they to contact me and how to keep the experience smooth between my and competitors websites or between my blog and my portfolio, thus avoiding complex navigations, page structures or ui elements
IDENTIFYING & INTERVIEWING THE MAIN USER GROUPS
Why I did this: to identify who the design would be tailored too and what they are looking for
How I did this: by conducting a series of interviews & surveys with past clients, recruiters and designers
How it helped: by informing me about what I need to include in my website and how likely they are too contact me
ALL THIS LEAD TO CREATING THE USER PERSONAS
Why I did this: to get an idea of my main targeted user base and understand why are they coming to my website and what they are looking for
How I did this: I was able to craft the user personas based on the market research information & the series of interviews and surveys mentioned in the previous step
How it helped: by identifying where users spend their time online, what they would like to see on my website and what they are looking for
I THEN CRAFTED A SEARCH QUERY BREAKDOWN
Why I did this: since I was targeting multiple users I needed to understand how users search and how their search would lead them to arrive to my website
How I did this: by using my SEO skills and laying out my main keywords and brainstorming who would most likely use those search terms, I then asked my initial user group who I interviewed what keywords they would search to find a designers portfolio
How it helped: by understanding the difference between how potential clients search and how industry professionals or recruiters search
WHICH LEAD TO ADAPTING MY WEBSITE CONTENT
Why I did this: in order to cater my website content, text & tone of voice towards the users so they would better understand what I do and how I can help
How it helped: by understanding who will read my content for each of my main categories and their familiarity with the industry
I THEN IDENTIFIED IF I SHOULD DESIGN A MOBILE VERSION
Why I did this: in order to understand how users will use my website thus identifying if I need to focus on designing a mobile friendly version
How it helped: by letting me understand how users would come on the website and what devices they would use and where would they access the website from
MY ASSUMPTIONS WERE VALIDATED LATER ON BY DOING A SOFT LAUNCH
Why I did this: in order to test my early assumptions and see more information about my user group so I can further tailor my content to them
How I did this: by using my SEO skills and laying out my main keywords and brainstorming who would most likely use those search terms, I then asked my initial user group who I interviewed what keywords they would search to find a designers portfolio
How it helped: I’ve promoted my website on social media which helped drive an initial traffic and using Google Analytics & Webmaster Tools to gather the data, after a few weeks I looked at the data
BEFORE WIRE FRAMING I DID A QUICK PAGE NAVIGATION ANALYSIS
Why I did this: in order to pint point the best navigation and page structure so users won’t get dizzy, confused or be required to perform extra interactions
How it helped: by pointing out early problems and choosing the best approach as a result
AND A PAGE STRUCTURE BREAKDOWN
Why I did this: in order to identify the best solution so users wouldn’t be required to go back & forth between pages
How it helped: by identifying early UX problems that could arise from using a wrong page structure and by pointing the pro’s and cons of each website page structure which lead to reducing the need for users to click on multiple tabs to find out more info and helping with the SEO
I THEN ORGANIZED THE PAGE SECTIONS SO USERS WOULD GET SOME CONTEXT BEFORE SEEING MY WORK
Why I did this: in order to identify the best order to tell my story and connect related sections so it would make sense for the user
How it helped: by identifying the best approach so users would get a smooth experience that slowly builds towards my work samples and the contact form
WHICH LEAD TO CREATING THE USER JOURNEY
Why I did this: to identify the steps the users would go through when arriving on my website and how I can improve them
How it helped: by making the process shorter, more seamless and continuous by reducing the content length and by pointing out that I needed to include ways for users to transition to the next project once they reach the bottom of the page as a way to avoid having them scroll all the way to the top or hitting the back button and then selecting another project
I CONTINUED WIRE FRAMING TACKLING EACH SECTION AND UI ELEMENT AND THEN MOVING TO THE VISUAL DESIGN
Why I did this: to refine each page section at a individual UI level, fine-tuning the user experience
How it helped: by letting me visualize and identify ux problems early and iterate based on the research I did, eliminating design solutions that didn’t work or didn’t match the other types of interactions present on the page
DURING ALL THIS TIME I DID A SERIES OF LIVE PROTOTYPES AND PERFORMED USABILITY TESTING FOR VARIOUS ITERATIONS SUCH AS THE ONES SEEN ABOVE
Why I did this: to test the website and identify issues, I choose this approach instead of Axure, since it was faster by letting me test and design in the browser, not having to tackle the axure prototyping, then moving to visual design, then development, instead it allowed me to tackle all of them at once
How I did this: by using WordPress and Visual Composer, writing CSS code to test different design solutions as well as let users test them out and provide feedback
How it helped: by easily letting me build and test websites and use plugins to enhance the functionality, so once I was done with the UX, the website was also done, this way all the artifacts that I’ve created could be instantly used later on, by simply copying the code
WITH THE WEBSITE LAUNCHED I THEN OPTIMIZED THE WEBSITE LOADING SPEED
Why I did this: to improve the user experience by cutting down the wait time for the page to load
How I did this: by doing a series of optimizations listed in the image and then testing results with pingdom, gtmetrix and webpagetest
How it helped: by reducing the time the page loaded, users didn’t have to wait thus they could interact with the website and view my work which could have lead to users leaving the page before it loaded if the page was too slow
AND THEN MODIFIED THE WEBSITE STRUCTURE TO IMPROVE THE UX
Why I did this: to improve the way users would interact with my website and the way they would reach my other portfolios
How I did this: by letting them access my other portfolios from each landing page and creating a hub page, where users could select if they wanted to see my full portfolio or a specific portfolio. This way the page would load faster, require less scrolling and they would see only relevant information
How it helped: by improving the user journey, SEO structure and the general website flow by making it easy for users to switch to a different portfolio if they arrived via the landing page or to select what portfolio they want to look at if they arrived via the main URL
WHILE ALSO PERFORMING A/B TESTING AND MULTIVARIATE TESTING
Why I did this: in order to make the user experience more enjoyable
How I did this: by creating multiple mockups of the visual design and using VWO ( visual website optimizer ) to test the best approach in a live environment with a larger user base. I experimented with different copy, layouts, images, call to actions, page lengths, colors and so on
How it helped: by reducing the scroll length, identifying that users were skipping certain areas, by making some elements more intuitive and choosing the best version that further improved the user experience
IN THE END IT WAS WORTH IT
It was a long process with multiple iterations on the UX & visual design part, in the end without any marketing, seo or publicity it got featured on two websites, it trended on dribbble and it got over 3000 visitors in two days without any SEO or promotion. The whole process basically involved creating five websites, each tailored to it’s unique niche and it showcased my ability to create designs that are enjoyed by professional designers and not only by stakeholders
Here are some sketches from
MY UX PROCESS
Here’s how I solved some of the
KEY UX PROBLEMS
