UX UI DESIGN PROJECT

BUILTBYG

MULTI NICHE PORTFOLIO

ABOUT:

Being my personal website I didn’t have to worry about breaching NDAs or unveiling company secrets, thus I was able to provide more in depth information as well as goals, issues and how I’ve solved them.

REFERENCE: Personal Project

ROLE: UX UI Designer

TECHNOLOGY: WordPress & Visual Composer

TOOLS: Axure, Photoshop, Illustrator, Google Analytics, Google Webmaster Tools, Pingdom, GTMetrix, Rotring 600 Pen, Dotgrid.co Paper, Koh-I-Noor colored pencils

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

1. how to display my entire work while also giving users the chance to see work and experience tailored to those design roles? solved by creating multiple versions of my portfolio that they could access before the main website.
2. how to decrease the website load time? solved by using a CDN, changing host,applying advanced website optimization techniques.
3. how to design a portfolio based around my targeted audience and displaying information that they would like or need to see? solved by doing research and  understanding their needs, what information they are looking for and what their familiarity with the industry is
4. identifying if it’s worth designing a mobile website? solved by using a soft launch strategy and gathering user data via Google Analytics to inform my decisions
5. choosing the easiest navigation for the users? solved by analyzing multiple page structures and navigation styles, pointing out their issues  and coming up with the easies navigation so users won’t get lost and they would always know where to go
6. how to make the portfolio image grid intuitive for my full portfolio? solved by displaying large images as a way to avoid users having to approach the screen to see details, also by displaying my work in a real environment so they would instantly understand what the project is about without having to mouse over the image and check the name or category and also by sorting the projects based on niche, at the top having my main niche, followed by secondary niche and at the bottom my third niche, thus users didn’t have to use a sort feature since it was intuitive
7. how to tell my story and what type of tone and wording should I use? solved by designing the homepage in sections that will  be connected to each other and tell my story in a seamless way
8.  I solved the issue of users not differentiating between what projects are for web, print or architecture by using mock-ups that display the design in a real environment, sorting them based on niche so web projects are at the top, graphic design in the middle and architecture at the bottom and by using tags to point out which are more complex or a PDF
9. I avoided the problem of users potentially getting dizzy when viewing a lot of projects by doing a page navigation breakdown and choosing the best approach, which pointed out that using a multi-directional page navigation would have severe problems by creating confusion, dizziness and forcing users to look all over the page, increasing eye fatigue
10. I solved the problem of users having to go on multiple pages to see more about me, then to another one to see my work, and then to another one to contact me by identifying the pros and cons of multiple page structure and using a hybrid approach that also helped with SEO
11. I solved the challenge of users not understanding certain industry terms present on the website by doing a search query breakdown that helped point out how users arrive on the page, how they search and who will use those keywords in their search, thus knowing how I should format my text, tone of voice and if I can use industry terms

THE IMPACT

I’ve identified 3 niches that would be using my website and tailored my content towards them, by using appropriate images, visual designs and text tailored to each industry and the users industry experience. I created pages that have a distinct visual direction based on who I was targeting, providing only information they would want to know, segmenting my portfolio into 4 categories, based on niche and service, so they could only see work related to that field and added a “master portfolio” containing my work across all design fields in case they wanted to see my full portfolio. This led to users not getting confused or perform extra interactions like click on a sort button, which would imply cluttering the UI and them spending extra time to search for it. I’ve created a main hub page where clients coming to the homepage see text aimed at identifying what portfolio they should look at by asking what they want to achieve which led to avoiding confusion caused by not knowing what certain terms like 3D visualization or UX is.
I kept the user experience continuous so users don’t have to go back & forth between pages by seeing related portfolios or projects when they reach the end of the page as well as opening the first project from the landing page in a new tab so once they look at several projects they can simply close the tab and resume browsing from the initial homepage seeing more relevant information,, eliminating the need for users to scroll all the way at the top, click on homepage and wait for the project to load then having to scroll all the way back and see the content they already seen, thinking there’s no other content.
Kept users engaged by having a way to view my other work if they want, satisfying their curiosity and not limiting them to a certain niche and encouraged user exploration by making each page have a unique design. On my master portfolio page where there are multiple categories, I removed the need for users to search by simply displaying my work in a real environment thus users could easily identify which projects are for web, architecture or graphic design.
All this resulted in avoiding user confusion by displaying only relevant experience and projects, reducing extra interactions and making it more easy to share projects that fit the niche I was targeting and it led to over 3000 visits in just a few days without any seo or promotion, trending on Dribbble and it was featured as best of the week on two websites showcasing my ability to create designs that are enjoyed by other fellow professionals not only by stakeholders as well as how my SEO, CMS, Website Optimization and technical skills allow me to create better UX solutions.
Thanks for browsing,

VIEW OTHER UX PROJECTS

or share this project with your friends, it helps