Inception? Yes.
This very website.
This website you’re going through was designed and developed by none other than yours truly (gasp!). But why did I create it the way I did?
There's many estimates on how long people spend on a website, ranging from 15 to 45 seconds on average. That's too short. Given that I don't have the luxury of capturing people attention for too long, I needed a clear idea of who I am, what it is I provide and how I might be different to other designers.
My background was originally studying business at university, and after making the transition to design I've become even more passionate about continuing to grow businesses, but by leveraging UX design as a tool rather than a goal in itself.
It's become clear to me very quickly working in design that most businesses don't actually really care about design (even if they say they do) - they care about their goals. Whether it's increasing their conversion rate, seeing an uplift in their retention, or simply making their product more usable for users to continue their active use. When dealing with individual managers and business owners, this adds another layer of complexity as each person in the room has their own motivations and goals that may vary from the goals of the business.
I therefore decided to abandon some of the headers other designers use like "I'm a creative, passionate, pixel-obsessed and idea generating UX/UI design and research ninja" to something that is reflective of my past experience: helping businesses grow through design.
Perhaps more importantly than who I am, is who you are. There are many examples of who you might be and it can be impossible to determine how to best cater for each. For example, if you were a design manager, you might be more interested in the process behind my work; whereas if you were a start-up owner or recruiter, the visual aspect of my work might be what captures your attention.
Instead, focusing on the goals you're trying to accomplish can be a better approximation to guide the structure of the website. Ultimately, you're here to find out more about me and whether we could work together - so it's my job to convince you (or not!) that that is the case.
Personal websites can (ironically) be a bit impersonal at times. I scanned through a bunch of portfolios from other designers for inspiration and I could barely remember any of them. That may very well be the case for you going through my portfolio too (after all, no matter whether it's going through portfolios or The Voice contestants, it all becomes one big blur after a while). What I can do though is make a memorable impression and track how engaged site visitors are as changes are made.
On the homepage, I decided to include a picture of.. myself! Typically, creative individuals are more interested in people rather than things, and while there's always a focus on the work itself, I also wanted to communicate a bit of who I am to establish more of a personal connection and bring the work into context.
Right below the 'hero' section of the website, I included a bar that shows where I've previously worked and studied. This design pattern is very common in landing pages for SaaS products in which they showcase where their product has been featured (for example on TV or an online publication). The idea here is to communicate trust by introducing something unfamiliar (me) through something that is familiar (companies, educational institutions etc...).
Lastly, I included a simple hover animation for each project that shows its full colours from black and white. Having a hover animation confirms to the user that they are selecting what they intend to; but also brings some intrigue as each design is brought to life and invites people to click in and explore more.
Just like a good book, each project should capture a story, and a story needs structure. This structure helps orient the reader to where they are in this story, but also allows them to skip and scan certain parts if they're looking to read about something in particular.
You will notice that there are 3 levels of hierarchy on this page (a section title at the top, a header on the left << and a blue sub-header). In the future, I hope to add a side control that allows you to jump between each section for easier navigation; particularly for jumping straight into the final design before diving into the details of the project.
I explored some other alternatives before landing on Webflow to build my website. Squarespace, Adobe Portfolio and the likes were capable of creating a portfolio website fairly quickly, but the lack of customisation and heavy reliance on templates were the downside.
More importantly, I was interested in learning more about front-end development as a complementary skill to being a designer, and Webflow is a great tool to visually build code while still following basic HTML/CSS structures
What happened to the days when all PCs had a uniform resolution of 800x600? One of the more challenging aspects of building this website has been around making sure that pages appear correctly on different devices and resolutions. Nonetheless, it was a great learning experience understanding how developers I've worked with in the past may have struggled interpreting some of my prototypes when adapting to different resolutions.
Just like having a Design System in prototyping tools, it's been very useful seeing the same logic applied to CSS classes that share the same attributes which can be re-used and altered at any time across different pages. Once again, a great learning experience seeing how Design Components make their way to front-end development.
The fun part! As a marketer and designer, I believe in measuring everything that can be measured (that should be measured). Setting some quantitative KPIs help guide whether changes I make to the website over time are moving in the right direction.
I set up Google Analytics to track how many people are visiting my website, how long people spend on each page, which projects are more engaging than others and where drop-offs are occurring.
Additionally, I am also able to track how long pages take to load which allows me to understand where page optimisations may be needed to ensure a smooth browsing experience.
In addition to using Google Analytics, FullStory provides great insights of anonymous recordings of how people are actually using the website. This allows me to see things from their perspective as they wait for a page to load, or scroll up to see something that caught their attention.
Of course this information can often be incomplete, they provide a lot of the what but very little of the why. I'm always looking for feedback on how to improve this website even more for you so feel free to reach out with any feedback you might have.