Agency Portfolio UX / Chill Creative Co.

Overview

During my internship at Chill Creative, a design agency in Hong Kong, I kicked off a redesign of the company’s portfolio website. I worked on the UX tasks in this project, mainly research, personas, and wireframes.

P R O C E S S

01 / Case Studies

The first step in this process was researching what trends currently exist in agency portfolios. I looked at global agency websites as well as agencies in Hong Kong, and noted some of the major trends in both design and information architecture. One of the main insights from this research was the importance of allowing the user to search the portfolio by project type, in order to find projects relevant to their needs. 

02 / Personas

I worked with the owner to understand the 8 main client types she wanted to attract and we talked through the typical needs and questions associated with each project type. I then created personas that aligned with each of these needs to inform the next step of journey mapping.

03 / User Journey

For each persona & project type, I created journey maps highlighting key concerns, thought process, things that might cause them to leave the site in its current state, and questions they have at each stage of the process. These were used as a guideline to suggest improvements such as redesigning the contact form and providing downloadable versions of projects. 

04 / Information Architecture

Based on the previous research and UX exercises, I began to rebuild the architecture of the site. My focus during this stage was on highlighting ways users may navigate throughout different sections of the site, and ensuring these journeys would feel seamless.

05 / Wireframe Design

After determining the overall structure of the site, my focus turned to the structure of the individual pages. The main focus at this stage was ensuring the work had room to shine, and that users could easily search and filter to the projects that align with their needs.

06 / Wireframe Diagram

This wireframe diagram indicates the main pages and page types of the website. Color coded boxes are used to indicate links between pages; for example, a pink box around a button means that button links to the pink "About" page. Specific actions such as linking to a specific section of a page are indicated with text call outs. 

This diagram was my final deliverable for this project and was passed on to a visual designer for final visual design.