Website and Brand
Complete Branding and Responsive Website Design
Architecture, Brand, People, and UX
A website and branding design project
About the project
Overview: This project was done as a part of my role at an architectural firm. I was a marketing coordinator and a full stack website designer.
Discipline: Design thinking, Ideation, Prototyping, User Testing, User Research, Data analysis, Quality Assurance, Marketing, Tender, Bids and Sales
Design Tools: Illustrator, Photoshop, sublime text, mobirise
Year of Completion: October 2017
Team Member: Polly Au
See the functional site here. http://michaeldaviesarchitecture.com/
We wanted to rebrand a 40 year old business to reflect its corporate strategy. There was no company presence online for 4 years. A complete brand refresh was needed. As the company gained revenue based on local, state and federal government agencies, their website and online presence was not a priority as a promotional vehicle. Things were about to change. The challenge was to develop and implement a new organisational strategy in the context of a small business environment. I had the opportunity to be responsible for the entire process of research, design and development. Architectural branding and websites needs to reflect the firm’s design philosophy as well as business objectives. Having a website not only boosts awareness but builds a trusted brand. Clients can search for the company's information readily and quickly.
My goals were to:
Critically analyse and solve problems in a rebranding exercise
Back up my decisions and solutions with reasoning and data
Communicate my thinking and design process
Deliver a fully functional website
Conduct interviews and surveys for improvement purposes
Showcase my ability to do the above tasks
The brand was coherent to the principal architect’s design philosophy and incorporated the signature design elements into the logo and corporate colours.
My role was to undertake early design and marketing research such as competitive analysis, explorative and generative research. Then, I worked extensively on user interface design during the iterations of the design development process through to development finalisation.
This competitive analysis was used to compare and contrast the firms that have already created their websites. Competitive research is to collect and compare qualitative data to have a better understanding of how we present our information on our website. In the following, I have conducted an analysis with 5 of the most relevant competitors in the field.
To summarise, architectural sites tend to have large featured images on the home page with no call to action. Featured images are then followed by news and/or company mission statements. Larger companies have careers, studios, expertise and news on the primary navigation menu.
*Side note: I was also employed as a marketing coordinator. After each tender was submitted, I was required to conduct a post submission survey to find out the results. More often than not, pricing is a significant factor in the construction industry.
I have utilised ready made website services such as Wix and Wordpress for the Explorative Research phase. After-all, if the website is ready made, then it would save us a lot of effort.
Low Fidelity Wireframe (Balsamiq)
These two pages are the basic structure of this site.
With the home page, users can toggle the company’s architectural experiences after the “About us” module. I have played around with the CSS in the section to make is appear in a more immaculate transition (opacity, transparency, and animation). During the development stage, JS did not function as I would like it to be. As it reorders, the images stacked on top of each other. It was finally resolved.
I have generated various logo designs and colour schemes for the company. It was then approved by internal stakeholders.
Website visitor personas
Users versus business importance
To organise my findings and pick out resounding pain points, I categorised each separate insight in an affinity map and analysed each one across Importance to User vs. Importance to Business in a 2x2 diagram. I plotted points based off of MDA’s business model and the main functions of the site.
It was then requested to host the site through the old DNS. As Wix does not support html export, the site had to been scraped and started from scratch.
Finalisation of Logo TypeFace
At this point, the logo colour scheme, typeface, and weight had been finalised.
Bodoni was chosen because of the classic association and elegant feel. It is commonly used in headings and display uses in upmarket publications. It is often done on high-gloss paper that retains and contrasts off the crisp detail of the fine line weights. The philosophy aligned with the principal architect’s design style. Therefore, Bodoni is the obvious choice for this brand. Then, I worked extensively on user interface design in the development process through to development finalisation.
The Solution and Impact
After publication, I interviewed 2 company representatives (in person) and 3 project stakeholders (engineers through telephone) for valuable feedback. All 5 users of the site had no trouble making sense of the ranking order of the search results that were presented and none expressed any sort of confusion. Given these results, I can assume that their overall browsing experience will be enhanced. Three months after the website went live, there were 3 students seeking work opportunities and hence contacted the company through the form at the footer.
I had a lot of fun designing the website, the brand and the other printed material (Yes, I made signs, capability documents and business cards as well!). I learned to balance UX and business objectives. I also picked up many skills along the way - technical, design, business, marketing and soft skills! With the established website, an increase with recruitment enquiries as well as, strengthened rapport with project stakeholders were noted!
My main takeaways from working on this project were:
How to choose patterns for a new concept, that users and business stakeholders are familiar with.
This project was incredibly valuable and, at the same time, challenging to work on as I was designing an interface from scratch around a relatively new process for the company.
Duration: ~1 year