Agency Portfolio UX / Chill Creative Co.

Wireframes_header-09.png

Research, UX  / Chill Creative Co.

During my internship at Chill Creative, a design agency in Hong Kong, one of my assignments was assisting the agency with redesigning their own portfolio website. I worked on the UX tasks in this project, mainly research, personas, and wireframes. The end result of the project was the development of a wireframe map that I passed on to the designer. The design phase of this project is still a work in progress at the agency.

 

P R O C E S S

01 / Case Studies

case study-04.png

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 made at this stage 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

Personas-11.png
 

03 / User Scenarios

UserScenarios_v1-10.png

My supervisor and I identified the 8 main project types for which clients usually approach the agency. I created personas and scenarios for each one of these client types. I highlighted the key concerns, thought process, things that might cause them to leave the site, 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

full info arch-01.png

Based on the previous research and UX exercises, I began to rebuild the architecture of the site. My focus during this stage was on making it easy for the users to find the projects they wanted, and creating links between relevant sections of the site, such as between a website design project page and a website design services page. 

 

05 / Wireframe Design

Revised Wireframes-02.png

After determining the overall structure of the site, my focus turned to the structure of the individual pages.

 

06 / Wireframe Diagram

Revised Wireframes-01.png

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 the next step.