UX Design, UI Design, Information Architecture, Front-End Development
Summer of 2018 - I created a portfolio website to showcase some of my selected work. This includes designing the website, learning how to code (HTML5, CSS), and then coding it.
In the summer of 2019 - I revamped the website. I redesigned it and then worked with an engineer to build it. This process included technical discussions, adopting a mobile-first approach, learning to communicate design specifications effectively.
2018 Summer: Version 1
This is a compilation of screenshots taken from the live site of my previous (now archived) website portfolio that I put together in Figma. This feature is best viewed on the desktop.
You can interact with this compilation to navigate to one project. Start by clicking "Physical Design" > *scroll down to find an image tile of a bike* > *scroll down to view project*. Alternatively, you can click anywhere to view the clickable blue boxes.
2019 Summer: Version 2
It was time for a change!
Although I had prior knowledge of HTML/CSS, Summer 2018 was my first time coding a production-level website. As such, there were many flaws (rectified by patch work) and design limitations (limited knowledge of coding and short timeframe).
I overcame many of these shortcomings during the redesign process by collaborating with an engineer. I was able to focus solely on design and did not have to worry about technical limitations.
Before I dived into the redesign, I spoke to a couple of designers and friends to see what they thought of Portfolio Website Version 1. Amongst other feedback, these are 4 points that I wanted to focus on:
I started with quick and rough sketches on paper. Ideating on paper allows me to generate many ideas, in a short period of time, that focuses on functionality and user experience. It also allows me to visualize my thoughts and share ideas with people around me without having to commit a lot of time to an idea.
Wireframe in Figma
I translated a couple of the initial ideas from my sketches on paper into Figma. Figma allows me to more accurately visualize the layout of the website. I then did further refinements here.
You can see what I did on Figma by navigating the embedded Figma screen above.
Part of my design process for this website was creating a style guide. This guide served 2 main purposes in this project:
Zoom into the embedded Figma screen to take a closer look at the style guide!
Through this project that has span over the past 2 years, I gained technical knowledge of coding, learned to design extensively for a product that will be shipped, and learned how to collaborate effectively with an engineer.
I think I did a pretty good job addressing all the feedback and concerns from Version 1 that I wanted to, and I'm really happy about that. If you have any additional feedback, please feel free to let me know what they are.