Enform Architects Website Redesign
A user-centric redesign for an enhanced web experience
Project Type
Professional
Timeline
May - Aug 2023
Team
Independent
Role
UX design, content strategy
Platform
Website
Context
I initiated and took on the role of independently redesigning Enform Architect’s website, which was in dire need of transformation.
At the onset of the redesign, Enform’s website was in dire need of a transformation. The content was disconnected from Enform’s brand character and the overall aesthetics and navigation were insufficiently developed to engage and captivate users effectively. Additionally, the website did not meet accessibility standards or adequately serve its target audience.
The target audience would be private clients and developers visiting the website to learn about what Enform as an organization and its extensive portfolio of building design.
Quick peek at the old homepage
Enform is an architectural design start-up. They intended to communicate what Enform is about, and what they do.
The old home page lacked visual or content hierarchy, and consisted of long sentences and an image with no clear purpose.
Process
To address this, I began by defining the scope, speaking with founders and employees to gain a deeper understanding of Enform’s identity and goals. I then set clear milestones and deliverables to keep the project on track. Researching industry competitors, I identified what worked well in the field and applied those insights to improve the user experience. Finally, I implemented the redesign, yielding valuable results that enhanced usability, accessibility, and brand cohesion.
I proposed three major ways to improve the user experience:
1 Foster Exploration
Develop dynamic links connecting various sections of the website.
Establish design guidelines for seamless integration of new content.
Enhance user experience with features that give user freedom and control such as filters.
The target audience was clients, meaning we wanted to put our most beautiful and sustainable design at the forefront.
2 Engage Through Interaction
Incorporate interactive elements and animations.
Integrate videos and motion seamlessly into the website.
Implement engaging features like carousels and imagery that change on hover.
3 Improve aesthetics
Ensure continuity of elements across the website.
Showcase high-quality architectural visuals front and center.
Apply composition principles, including effective use of white space and hierarchy.
Renew portraits of the team to convey professionalism and the company's spirited essence.
The team agreed that the old website did not suit the firm’s professionalism and attention to beauty in design.
I presented lo-fi wireframes to stakeholders and made iterative adjustments.
Splash page, the first impression
Designing
Splash page (GIF below)
I envisioned a splash page that, through a single glance, would succinctly showcase what Enform is, offering a small yet powerful design for creating lasting impressions. After considerable thought and iteration, I created this splash page as the first thing users see upon visiting the website. The website previously did not have a splash page (A splash page is a page that precedes the main pages on your website).
The grid design
The grid design enabled me to experiment with various shades of green, a trademark color of Enform, effectively conveying Enform's commitment to striving for zero carbon emissions.
I crafted this animation using a combination of Indesign and Photoshop.
Homepage, the face of the firm
Homepage Redesign
Compositional improvements played a big role in the homepage redesign.
Full-width image carousel
The full-width image gave a feeling of grandness to the page, drawing full attention to our most high-quality imagery and best designs. Scroll down to see.
Multimedia collage
The website was missing the enthusiasm that existed in the in-person office. The documentation of the exciting activities and projects the company undertook were either absent from the website or hard to locate.
I experimented with versions of the design both with and without motion (GIFs) and showcased them to the office. The general agreement was that the inclusion of movement added animation and aligned well with Enform's lively office atmosphere. Scroll down to see.
New homepage. Click arrow to see old.
Old homepage
A video walkthrough of the homepage
This walkthrough documents the transition from the splash page to the homepage.
Full-width carousel
Previously, the slideshow was inset (not full-width), lacking in ability to draw user attention.
With a simple enhancement such as this, we were able to create a more professional and bautiful homepage.
Multimedia collage
Previously, it was difficult to get visitor to interact with some of our latest and most significant events and projects
The collage was an effective way to show off all that Enform does and the vibrant energy of the office.
GIFs created with photoshop
Adding interactive elements through coding
I wanted to showcase that a lot of attention was paid to our website and we care about the users, bringing a joyful element. By adding small details such as an image that changes color on hover, I aimed to improve upon the interactivity of the website.
Rethinking what studio means
Studio Page Redesign
The website was lacking a look of professionalism, and it was my task to determine the next course of action. Unlike a large corporation, we operated in a small studio with a beautiful and rustic wooden and exposed brick interior.
Problem #1: Inconsistent headshots
Since the company had grown from 4 people to 18 members in 2 years, the headshots varied in lighting, and style, and lacked a unified look.
Solution: Take new headshots
My supervisors were hesitant to hire a photographer, because what we currently had did its job. I proposed that I could take interim photos on my smartphone with the studio as the background, and edit it - until we are ready for professional headshots.
To my surprise, the end product looks stunning, and the team is very satisfied with look and narrative that the photos I took provide.
Problem #2: No effective narrative
The page has little to no narrative, and a jumbled order of individuals (Alphabetical order but it was not obvious).
Opening statement was too long and the image was not conducive to the Enform narrative.
Old webpage
Thinking of solutions
Problem #1: Inconsistent headshots
Solution: Take new headshots
My supervisors were hesitant to hire a photographer, because what we currently had did its job. I proposed that I could take interim photos on my smartphone with the studio as the background, and edit it - until we are ready for professional headshots.
To my surprise, the end product looks stunning, and the team is very satisfied with look and narrative that the photos I took provide.
Problem #2: No effective narrative
Solution: A new statement and photos that leverage the distinct qualities of the start-up
The team crafted a new statement that represented what the Enform studio stood for, making sure to keep it short and sweet, and eye-catching.
Moreover, I took photos around the office, that would leverage the beautiful interior of the office and our narrative of a hardworking, sustainable, small studio.
A walkthrough
This walkthrough documents the newly designed studio page.
New Vision Statement and Image
“Meet the team“ - along with a photo that showcases the studio's best qualities – warmth, friendliness, and a startup vibe – immediately captures the user's attention and sets a positive first impression.
Enformers in their natural element
Previously, the images did not highlight the firm’s energy and atmosphere.
By utilizing the full-of-life studio as the backdrop of the portraits, I was able to capture the essence of the firm.
This experience was incredibly enjoyable for me as it involved finding the perfect setup for each person, capturing them in genuine moments, and using Photoshop to enhance each photo to its fullest potential.
Projects Page Redesign
Projects page, a visual display of talents
Minor considerations made the largest impact on the projects page.
Problem #1: Inconsistent thumbnail and information
The website displayed project thumbnails with inconsistent ratios and manual project tags. What visitors might want to know about each project was not displayed intuitively, nor was it easy to find a project of a specific type.
Problem #2: No option to browse and filter
The user could not filter and search for specific types of projects.
Thinking of solutions
Problem #1: Inconsistent thumbnail and information
Solution: Less is more
I iterated between different project labeling methods, but more page descriptions meant more clutter. Upon asking for reviews on different options I created, we landed on removing project tags and moving them to the individual project pages.
Problem #2: No option to browse and filter
Solution: Add a variety of filters
Many of the visitors visiting Enform’s website, especially clients, are looking for a specific type of project whether that would be Zero Carbon Buildings or Institutional. After much discussion and iteration, We decided that a simple list of filters at the top of page would work best.
These green tags are not buttons, there are flatten pixels on the image.
Green tags are removed and the information have been moved to the individual project pages.
Old Projects Page
New Projects Page
No way to search or filter, visitor cannot even Crtl+F to find a specific project
The project titles are only available on hover
Visitors are able to filter by type, mainly seven categories, making the projects page easier to navigate and browse around.
Adding interactive elements
All buildings start with an idea and a napkin sketch. When a user hovers over a project, they are met with a friendly sketch of the building. This was an easy win - easy to accomplish but pretty impressive.
A walkthrough
This walkthrough documents the experience of the new Projects page.
Improving how our design stories are told
I also explored how to change the narrative we tell with each design project.
Aesthetically, and narratively, the individual project pages lacked the impact we wanted to convey.
Old Project Page
New Project Page
Unimpactful title and introduction to the project
Important matrix are hard to read, are text is embedded in an image therefore inaccessible.
A consistent template for project metrics, can be read by a screen reader. This format is scalable, easy to update unlike the old metrics chart.
More details about the project.
When it came to individual projects, I collaborated with the Project Architect to draft a meaningful blurb about the project.
Key callouts for each project highlighting the focus of the project.
Showing process
I was one of the designers on this project and had stored preliminary sketches we did as a team. I suggested this would be great for process and storytelling.
Another scalable way to display lots of images.
Fun fact: I modelled this building and rendered these images
I believe in images speaking louder than words, so it was important that the sequence and images told most of the story, hence why this large site plan is with no description
Fun fact: I made this site plan
Another easy win, displaying the location of the project on an aesthetic map. It’s nothing too crazy, but cool to see.
A walkthrough
This walkthrough shows what a typical project page looks like now.
Reflection
🚧 Challenges
Navigating a rigid website builder
Working independently
First challenge was navigating a rigid website builder, which required creative design workarounds to accommodate its limitations. Additionally, as the sole UX designer, I sometimes faced uncertainties in decision-making without a team to validate ideas.
💎 Added value
Website alignment with business identity
Increased user engagement
Business outcome
Improved accessibility
Despite these challenges, the redesign brought real value to Enform Architects. The website now truly reflects Enform’s identity, and both stakeholders and users have shared positive feedback with me on how well it showcases the firm.
User engagement jumped by 60%, showing that visitors are interacting with the site more meaningfully.
From a business perspective, clients have mentioned that they browse the website before reaching out, finding it a useful resource for understanding Enform’s work.
On top of that, accessibility improvements have made the site more inclusive and user-friendly, ensuring that information is easier to find and navigate for a wider audience.