Preview of a portfolio on a desktop and mobile phone

Imagining a Personal Brand

You're currently on the website ☺

Role

Duration

Tools

UX Designer & Web Developer

January 2019 - Ongoing

Figma, Adobe Illustrator & Photoshop, Visual Studio Code(HTML + CSS), JavaScript

Overview

The Challenge

How might I design a brand and web space to showcase my portfolio to a greater, online audience?

The Solution

Learned HTML and CSS to design detailed-oriented portfolio site translated from an interactive Figma prototype.


Process

Below is the user-centered design process I used. I'll go over these steps below!

A graph showing four steps of a design process: discover, design, development, and evaluation

1. Discovery

— IDENTIFY USER GROUP, COMPETITIVE ANALYSIS, NAVIGATION DIAGRAMS, INFORMATION ARCHITECTURE

Identify User Group & Competitive Analysis

This portfolio is focused on defining myself and my work to facilitate conversations about my capabilities. To pinpoint design best practices, I carried out a competitive analysis of various portfolio web spaces.

Insights

  • Know my design process
  • Consider the skimmability of my case studies
  • Define problem spaces with concise language
  • Collect artifacts to present in a delightful manner

Navigation Diagram

I was motivated to make the website’s navigation simple to mitigate potential problems involving global changes as my portfolio transforms over time.

Diagram of an intial navigation diagram of the portfolio
Initial Navigation Diagram
Diagram of the current navigation diagram of the portfolio
Current Navigation Diagram

To simplify my initial navigation, I determined my resume could be hosted on the about page. The validation for this decision came from portfolios which host resumes as a link in their about sections.

Information Architecture

A design decision I had to make was how to structure the architecture of my website. To streamline the creation process, I set frameworks for an organization and labeling system.

Diagram of the information architecture of the portfolio

2. Design

— SKETCHES, WIREFRAMES, BRANDING, MOCKUPS

The initial vision of the website’s design was inspired by creative, bright web spaces. Through an iterative design process, I was able to develop a more professional template based on my findings throughout the ongoing development of my portfolio.

Insights

  • Users will be seeking out work samples
  • Clickstream should be considered for visibility on projects
  • There are constraints of rudimentary knowledge in programming
  • Initial color palette was not accessible, based on WCAG web standards
  • Large scale typography was not the best design decision for scrollability and usability

Sketches & Wireframes

Initially, I designed having a top navigation with an internal sidebar, shown in the artifacts below. The home page would incorporate an about section, serving as an introduction to my design process and work.

Image of a lo-fi wireframe
Image of a hi-fi wireframe

Branding

After determining the types of information users would want to see, I created branding guidelines and mockups.

High Fidelity Mockups

High fidelity mockups and a prototype were necessary in order for me to develop the HTML layout and user flow. Below is my progression of mockups!

A high fidelity of a website that plays with large scale typography and light colors
Initial High Fidelity Mockup
A high fidelity of a simple website that showcases case studies
Current High Fidelity Mockup

3. Development

— PROTOTYPING, IMPLEMENTATION(HTML, CSS, JAVASCRIPT)

Implementation

Using the Visual Studio Code, I created the functionality of my portfolio and transformed my designs in a useful way using HTML and CSS. Once I achieved the main functions of the web space identical to my Figma prototype, I published it online.

Screenshot of a Visual Studio Code window with working code

4. Evaluation

— SURVEYS, USABILITY TESTING, REVISION, ITERATION

Usability Testing

I conducted usability tests with 15 participants to see how my portfolio could be improved. The feedback I received would be used to validate design decisions for the next iteration of the website.

A pull quote from a participant reading, 'I think the size of the static information bar is too large. When those bars are too large, I feel cramped while looking at the screen.'

Surveys

Users were tasked with testing out the site, then filling out a survey detailing their experiences.

Insights

  • Case studies should be easily accessible
  • Some of the typography was not responsive on particular pages
  • Participants said they could not tell the purpose of the website on the initial landing page
  • Participants expressed the landing page felt were plain or as if it was missing something

Revision

With the insights and needs identified, I made changes to my portfolio. Participants noted it would be helpful to understand the purpose of the website immediately. This need would direct users to view the case studies, urging call to actions(CTA).

A pull quote from a participant reading, 'The simplicity and use of general groupings allows ease of navigation while the colors and personable text connotes a friendly atmosphere.'

Iteration

To evaluate the effectiveness of new designs, I developed an iterative user testing protocol, in which I would test the design and gather insights and feedback, then iterate and repeat.

After several iterations of testing, I ended up with a refined design that would function for users of my portfolio.

Moving Forward

Currently, I am reflecting on design decisions I have implemented which have prove to be ineffective. This enables me to continue learning design best practices while understanding the users of the space.

Lessons Learned

  • Identifying the unknown is a success—recognizing where I can grow as a designer allows me to seek resources to expand my expertise
  • Resources are lessons—reading articles of other designers and seeking design challenges allows for a larger network to self-teach and learn
  • Responsive design is empathy—integrating web standards for accessible and responsive products is understanding your users’ needs and varying experiences