Passion Project
Optimizing workflow efficiency and designing a unique webpage for an architectural/engineering firm
Project Overview
This is my passion project, and it focuses on UX research in order to understand how users interact with HOK website and create a better solution to improve user experience
MY ROLE
Solo project with a full responsibility to both UX and UI processes
DELIVERABLES
-
User/Proto-persona
-
Affinity Diagram
-
Competitor Analysis
-
Redline Annotation
-
Wireframe
-
Usability Test
-
Style Guide
-
High-fidelity prototype
TOOLS
-
Figma
-
Google Suite
-
Canva
-
Procreate
TIMELINE
3 weeks
(part-time)
The problem
Users have difficulty locating information. Therefore, how might the efficiency of the workflow be increased?
Opportunity
Finding an effective way to communicate the company’s values to its target audiences and provide more intuitive contents. By reorganizing content structure and incorporating more architectural aesthetics into their website, the new design will help the company attract more clients and talents.
Design process
Understand the problem space
Due to rapid expansion, Houston’s growth rate has increased from 0.3 percent to 1.83 percent (adding roughly 7,000 to 40,000 people in the last few years) based on USA population website. There are over 75 residential and commercial architectural firms in the Houston Metro area, which appear to be growing at an exponential rate according to Re-thinking Future article.
In order to stay competitive, HOK needs to update their website to better connect with potential new clients and prospective employees by featuring their projects, services, and cultures.
​
To gain insight of the problem spaces, how the framework and content structure communicate with users is examined. Its efficiency and accessibility are then evaluated.
Current website
Key metrics
I executed a usability testing on the site by assigning three tasks to participants in order to evaluate their browsing behaviors and how long it took them to perform tasks and find information. The findings from the testing are:
Competitor analysis
Analyzing the websites of my top competitors provided me with a better understanding of the existing website in the market, as well as the essential success and opportunities to adapt to the website.
The result
Gensler, Perkins+Will, Page, and PGAL were chosen as direct competitors while Glassdoor and Houzz were selected as indirect competitors to conduct a competitive audit with the goal of identifying similar features on how they present themselves. The results were used to simplify user flow and minimize time spent on exploring information.
Interview and Survey
I interviewed 2 architects, 2 engineers, and 1 interior designer who had visited the website, as well as a company employee and steakholder, to discover website challenges. The goal was to determine the best approaches and the most effective solutions.
Users said
Nagivation bar
Appears to be inactive. the users were unsure if it was clickable.
​
​
Layout
Finding specific information takes a long time. The users got lost while browsing​
​
Job listing
Searching for HOKs job listing page was difficult
​
​
Images
The structure of the design could not be seen clearly
​
​
Service
Unsure what services the company provides
​
​
Messages
Not convincing and do not feel a connection to the company
​
​
Employee said
Page Olsen
I would add imagery, information, and any ancillary content to give the project energy on the site
Jane Smith
I would focus on making it unique against its peers
James Doe
I want to improve the search tool. It does not give what I’m looking for all the time
Stakeholder said
Our website doesn't really communicate enough about our services that we provide, like engineering. It lacks of that part on the services and I feel that some of the projects that are more interesting do not showed up
User persona
Problem Statement
Graduated architects need to learn about the projects and culture so that they can decide weather the company is the right fit for their careers.
Solution ideas
-
Modernize the components and make the methodology more apparent.
-
Include the most important section on the homepage and encourage users to interact with the site.
-
Create interactive images and videos to establish a sense of uniqueness
Low-fi and test results
After design the initial wireframe, I conducted the guerrilla testing on 5 peers to assess the accessibility and functionality. Based on the peer feedback, there are 3 areas of improvement
-
Consistency in design - each section should be labeled.
-
Excessive text paragraph makes it difficult for users to comprehend the actual content.
-
Adding a CTA to the career section will allow users to apply quickly
Style guide
Final solution and High-fidelity wireframes
Reflection
My passion for this project is to redesign a user interface that is easy to use for individuals of all levels of experience. Therefore, balancing the needs and goals between the users, employees, and stakeholders is crucial. Each side has a different insights and each is equally important. The ideal solution must be derived from considering input from all size
Next step
I would like to include the real company project into my design and add videos that tell additional stories about the design concept from a rendering to finish product. I would also like to create more pages and iterate it to a mobile version