Acerca de
Please visit desktop site for full case study
UX-ing my own portfolio and finding my own personal brand
Timeline:
2 weeks but ongoing
Tools:
Adobe CC, Figma, Wix, Webflow, JavaScript
Who am I?
Who am I? These small words on a page made me freeze. A wave of panic surged through me as I looked at these seemingly inconspicuous words. I realized that I had no idea.
These are the first steps in my journey to define my personal brand and portfolio.
Phone a (few) friend(s)
Realizing I had no concrete definition of who I was, I applied the UX process to give myself more clarity. I created a quick 3 question survey to send out to friends, family and colleagues to build a picture of how the world perceives me.
See what I did
My survey.
3 words to describe me
​
3 colors to describe me
​
My spirit animal (just for fun)
I made sure to send it out to a wide range of contacts from different parts of my life as I know that we all behave differently in different contexts.
I sent the survey to roughly equal numbers:
1-3
Recent Friends
(1-3 years)
3+
Long Term Friends
(3+ years)
Work Colleagues
Professional settings
This would make sure that I had as “unbiased” of an opinion as possible.
(yes I know how biased the experiment was from the start anyway)
Synthesizing the data.
As much as I was intrigued by the 25 responses I collected, it was hard to find a unified theme.
To synthesise these insights I used a word cloud, where words with a higher frequency would appear larger.
In essence, a proto affinity map?
Personality Cloud
Color Cloud
Even though blue was the most frequent, I decided on black
as the accent color as it would give a sharper, bolder feel.
“Ain't Nothin' Like Me, Cept' Me.”
My absolute favorite spirit animal was Rocket the Racoon - thanks Kathy.
I’m a bit pessimistic but straightforward and assertive. I love tinkering with and building things and I’m on the shorter side in terms of height, a perfect match for Rocket.
Don't know who Rocket is? Check him out here.
This gave me a starting point to define my own personal brand and dare I say…
​
Persona?
Logo Creation.
Once I had my personal brand defined, I began to work on a logo. I knew it had to be something simple, straightforward and versatile.
See my iterations
I started playing around with different monogram configurations
in Adobe Illustrator and came up with the current logo.
It’s strong, direct, and very straightforward.
​
(Well the K is backwards if you can forgive that)
Build and rebuild.
Thus began the process of layouts followed by usability testing.
I tested with people both from my user research group and industry professionals. This would give me both the emotional side and more of a structure around what the UX industry was looking for.
I did A/B testing to see which iteration of a particular layout was preferred and asked some participants to use the site and tell me what worked and what was confusing in brief but insightful usability tests.
This led me through different iterations until the current site.
Case Study.
I spent the majority of my time on my VITA case study as I wanted it to set a precedent for the rest of the work on my site.
My first draft was over 3500 words, far too long to be in a portfolio (unless you are Simon Pan of course).
My second draft was 3000 and my third, just under 2000.
In order to remove the need for cutting areas which I thought were important to tell my story, I decided to think outside the box and create collapsible sections for the denser areas such as research.
Dipping my toe into the cold waters of coding.
However, Wix (at the time of writing) did not have a function to create such sections. Never to shy away from a challenge, I gathered my courage to dip my toe into the cold waters of coding, in particular, the icy touch of JavaScript.
Photo by
With the help of a software engineer friend, trusty google and a couple days of smacking my head against my keyboard, I was able to understand and code the collapsible tabs you see in my case studies.
As I understand how confusing WIX can be to first time UX designers, let alone JavaScript, I have decided to create a small tutorial for JavaScript collapsible tabs below for those in need.
See how I did this
Intro to JavaScript
To create the button, draw a container box 980x100px. Within that, draw another container box as big as you want the button to be. Change the color of the box to grey and round the corners 50px. Within this, add a label to the button.
Go to add>decorative>featured vector art>all vector art and search for arrow. Find a simple arrow and place it on the right side. I added an arrow to the right for collapse and a down arrow for expanded.
Note: I keep it this way as the bounding boxes don't block each other. Once the code works, feel free to change the rotation.
To draw the container for the info you want to hide, draw another box 980px wide by however long you need.
Now comes the “fun” part. Click dev mode and turn on dev mode. Now you’re ready to code.
Click on the info container and check the default value to collapsed. This will make sure the info is collapsed by default.
Now we need to name things. Make sure things are named correctly otherwise it won’t work and you’ll smack your head against the keyboard.
List of assets to name:
​
-
Button Container
-
Right arrow
-
Down arrow
-
Info container
Button Container
Right arrow
Down arrow
Info container
Note: for this tutorial I will name all assets according to the name tutorial. This can be substituted for any name you want eg. tutorialFold can be renamed personaFold.
Click on the first container you drew (Button Container) (980x100px). Name this tutorialContainer in the ID field. Click on the onClick() button under event handlers. This will generate another name for the event of a click on the asset. Rename this to btntutorialContainer_click.
When you hit enter, it will create a string of commands in the console. Delete everything that it made. If you do not delete this, there will be duplicates of the asset name and it wont work.
Rename the arrow IDs to tutorialDownarrow and tutorialRightarrow accordingly. Lastly, rename the info container to tutorialFold.
Once this is all done copy this code into the console. This is just telling Wix to expand/collapse the info container when clicked.
export function btntutorialContainer_click(event) {
let $arrowDown = $w('#tutorialDownarrow');
let $arrowRight = $w('#tutorialRightarrow');
let $fold = $w('#tutorialFold');
if ($fold.collapsed) {
$fold.expand();
$arrowDown.show();
$arrowRight.hide();
} else{
$fold.collapse();
$arrowDown.hide();
$arrowRight.show();
}
}
If the stars align and you hit preview, your tab should expand and collapse on a click. You’ll know this has worked if you hear the singing of angels in the background and flowers start blooming near you.
Congratulations you have now hopefully successfully coded your first bit of JavaScript! If this is not your first time, even better and a bigger pat on the back for you.
Learnings and takeaways.
-
Through this process, I have learnt a bit more about who I am and the image I give off to the world (rocket the raccoon apparently).
​​
-
I have learnt more about the UX process, even though I have hacked it and applied it according to my needs.
​
-
However, most importantly, I have learnt to step even further outside my comfort zone, attempting to create a web based portfolio with unfamiliar tools such as WIX, Figma, Webflow and JavaScript.
These three areas have contributed to what I think is a great representation of myself, my work and dedication to making things better.
I realise now more than ever that I am not one to be satisfied with the tools at my disposal, and will instead go the extra mile to find the best solution to a problem.
Check back here soon for more progress.
However, in saying that, this is just version 1.0 of my personal portfolio. As I grow, so will my work and site.
Stay tuned for the next big step, I’m sure it’s just around the corner!