As a UX/UI designer, I am all too aware that a portfolio website is quite an important tool within the toolbox of any UI/UX professional. Not only does a good portfolio demonstrate artefacts and past projects, but it is also a medium through which any viewer can see your workflow, processes and the manner in which you work with others.
My website, which I originally created in my first year of my masters degree, was not demonstrating my work efficiently and therefore, not showing my work in the most positive light possible. My set goals for this project are quite simple: Define myself as a digital designer and showcase the work that I do.
The majority of visitors to this website would be either recruiters or potential clients. Although I may only have limited resources, I took it upon myself to ask a number of industry insiders some simple, brief questions to build a better picture of user requirements.
Question 1: What do you look for in a portfolio?
Person A (Senior UX Designer, Ireland): Usually, I’m impressed by UX/UI professionals that are able to summarise in a very clear way their process and approach to design.
Person B (Front-end Tech Recruiter, Ireland) I am very short on time and unfortunately, I will skim through a lot of portfolios sent my way. I need something that tells me your story efficiently.
Person C (Web design agency owner, UK) When you showcase your work in a portfolio, remember to orient the user (i.e. hiring manager). Ask yourself the question that they’re asking, “Why is this [case study, wireframe, etc.] important?” Then, make sure the answer to that question is loud and clear.
Question 2: What are some red flags to look out for?
Person A: Sometimes, I view portfolios on my phone and it is clear that the designer had given little to no no thought to how their portfolio will appear on tablets/mobiles etc. This always strikes me as quite alarming.
Person B: Uncredited work and power vacuums. I like to know that any potential candidate has worked with other developers, designers, stakeholders etc. and can correctly credit people for their work.
Person C: Oh my! There is so many. I mean, you have the obvious red flags such as glaring spelling errors and dead links. And then there are the subtle red flag warnings. Designers who have failed to demonstrate any personality or authenticity in their work, for example.
Identifying Trends and Solutions
Before beginning any prototyping treatments, I set it upon myself to research design trends of 2018, particularly within the fields of UI and UX design.
Any initial research into the state of affairs of UX in 2018, would fill any designer with dread. Clickbait articles contain stark headlines such as “UX is dead”, whilst business publications ask their readers, “Do you really need a UX designer?”? Prospects for UI designers aren’t much better either, with certain websites suggesting to game developers that user interface design shouldn’t be a major consideration when creating projects. So, should I just give up now? Well, no. If keeping on top of industry trends has taught me anything, it’s that industries change and adapt. And whilst certainly, change can be an unnerving thing, it can also be an invigorating process that can bring about some fresh ideas and solutions. Less designers are describing themselves as generalists, rather they are specifying their specialty areas and diversifying. They are learning about business, and what drives business. Companies may be downsizing, so there is more scope for designers with a plethora of skills (UI, UX, writing etc) and of course, a willingness to learn!
User Requirements and Treatments
I identified some key points from the initial user research.
Potential users may be very short of time and only give the website a ‘scan test’.
Users may only want to see a specific skillset to fit any potential roles.
Finally, most professionals want to see a balance of personality and ability to work as part of their team/organisation.
Additionally, my UX research has given me some key points to bare in mind whilst prototyping. Having a diverse skillset for example, seems to be an important feature.
Integrate a scroll feature on splash-screen, to cut down on any unnecessary interactions. This splash screen should be able to tell a very quick story of who I am, what I do, and how to contact me.
As I come from a diverse background, I have different skillsets. Rather than confusing a user with a mish-mash of skills thrown together (or simply listing them!), I will have clear definitions of what I do and put them into appropriate subsections. Therefore, a person interested in seeing my game development work does not need to trawl through a UI gallery for example.
Use the time honoured tip of KISS (Keep It Simple Stupid). I will focus on a clean and straightforward interface with small but efficient nods toward my design personality (i.e. gentle gradient changing background).
Prototyping and User Flows
Using my whiteboard notebook, I sketched out a potential solutions for my new portfolio site.
Following initial sketches, I also conceptualised a couple of scenarios to create some User Flows. Creating diagrams for the potential flows prove to be quite useful. Not only is it an exercise in empathy, to understand how a potential user will interact with my website, but it also highlighted a few ‘danger zones’ where I could potentially lose and/or irritate users.
Wireframe to Web Building
After mapping out potential solutions to initial problems, I created a basic wireframe in Adobe Xd. Adobe Xd is a powerful tool, I am able to prototype interactions and flows quite easily. This process contained several iterations.
Following this iterative process, I was able to begin building my high fidelity website.
Testing and Results
Once my website was complete, it was time to begin user testing again to see if any feature could be iterated. I asked a random amount of users to navigate through my website (i.e. ‘pretend you are a searching for a user interface designer, you’d like to see my UI gallery and afterwards download my CV’ or ‘you would like to find the download link for Eden Falls’. Via an anonymous survey, I also asked users some specific questions in regards to the site. From gathered research, I had to add a couple of return to subsection buttons and find a better way of demonstrating past work as users did not like oversized gifs.