Architecture Studio Responsive Website

This is an ongoing project for an architecture studio in Taiwan. It's a local company based in Nantou, Taiwan with 28 years of history that desires to build an online platform for expanding its business. My focus is aiming to create a responsive website for advertising, explore potential clients, and offer better consultancy services for users.

截圖 2022-02-18 01.47.56.png

My Role

UIUX designer

Type

Commercial Project

Responsive web design (Ongoing)

Key Deliverables

  • User Research

  • User Interface

  • Usability Test

  • Digital Marketing

Tools

  • Google Forms

  • Figma

  • Photoshop

  • Illustrator

ㄕㄟ.png

PH. W Architects

Problem statement

The major clients of this studio are local people who live in the city, which was mainly introduced to the studio by other clients or collaborators. Due to the increasing clients from the younger generation which tend to use the internet to search, the studio would like to gain publicity and explore more potential clients by offering digital services. There is also a lack of online information about the studio, which stops potential clients to get in touch with them. In addition, the studio wants to know if the platform can improve both its online and offline consultancy service, so that could offer a better service experience for clients. 

截圖 2022-02-10 17.40.48.png
截圖 2022-02-10 17.40.48.png

Solution

​A website that can make the presence of studio online, which should include the content below:

🔸 Branding & marketing:

An introduction and online portfolio of the studio's works to enhance business credits 

🔸 Online services & consultancy:

Listing the service including the design procedure of different services, so that users can easily search and find the services they want. 

🔸 Accessibility:

Offering diverse but simple ways to get professional advice and get in touch with the studio   

Design Process

diagram (1).png

Discover

 

Stakeholder interview

In the first step, I would like to find out the company's needs, goals and target users.

My main interview questions include:

 

  • What kind of services do they offer and their service flow

  • Major clients in the past 5 years

  • The company's goal of launching a digital platform

The brand

brand.png

Preliminary design strategy

According to the result of the interview, I have some findings of target users and the company's goal, I can then work on formulating a strategy for the digital platform.

design strategy.png

User research

I conducted both phone interviews and form surveys for qualitative and quantitative analysis. My main goal was to gain an understanding of our target users, their user journey, difficulties, etc. I also wanted to learn about their needs and if they have any other desired features in the digital product.

interview.png

My main interview questions for both analyses include:

 

  • User's experience in contacting architecture studio or agency

  • How did they approach the studio or agency

  • What kind of information do users expect to see from the online platform 

  • Any difficulties they have encountered during the searching journey 

 

Define

Defining the users

The interview gave me insight into what different groups of users really needs for the website. According to the result, the potential users have higher demands from searching information to booking an appointment, while the existing clients prefer using a traditional way to have immediate and direct contact. Also, the potential clients, which is the target users can be further segregated into 2 smaller groups based on their purpose. The main challenge would be creating a platform where each group can find what they need.

Persona.png

Personas

By conducting the stakeholder and user interviews, I found the main 3 groups of users not only having very different approaches when contacting architecture studio but also having diverse needs toward the new service. Although our target clients are potential users, it's still important to create a platform that can satisfy all types of users.

Persona - 1
Persona - 1

press to zoom
Persona - 2
Persona - 2

press to zoom
Persona - 3
Persona - 3

press to zoom
Persona - 1
Persona - 1

press to zoom
1/3

Card sorting 

Based on the insight I gained from the persona, I did a card sorting exercise to help determine common and different desired features from the main 3 groups of users. This exercise helps me to structure the website.

Pre-sort
Pre-sort

press to zoom
Post-sort
Post-sort

press to zoom
Pre-sort
Pre-sort

press to zoom
1/2

Ideate

 

Information Architecture

The information architecture is based on the categorised user needs. 

AI.png

Digital wireframe

Based on the insight I gained from the persona and user journey map, I did a card sorting exercise to help determine both groups of users common and different desired features and how to structure the app.

截圖 2022-02-17 16.38.38.png
截圖 2022-02-17 16.38.09.png

Low-fidelity prototype

To prepare for usability testing, I created a low-fidelity prototype in Figma that connected the main user flow.

Main user flow of online consultancy:

 

UI Design

Style guidance

Before starting UI design, I set up the style guidance that matches ios material design guidelines and the original branding colour.

Foundation _ Color.png
Foundation _ Typography.png

Landing Page

截圖 2022-02-18 01.30.06.png

12 Columns grid, Margin: 120, Gutter: 20

Home page.png
Coming soon!
I am currently working on this project, will update soon.