Enform Architects
Website Redesign
A user-centric redesign for an enhanced experience
Project Type
Professional
Timeline
May - Aug 2023
Team
Independent
Responsibilities
UX design, content strategy, graphic design, web design, photography
Platform
Website
Problem Space
At the onset of the redesign, Enform’s website was in dire need of a transformation. The content did not align with Enform's intended narrative, and both the overall aesthetics and navigation lacked the meticulous attention needed to engage and capture users' interest.
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 like filters and buttons.
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.
Adding a splash of color and movement 〰️
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
I felt that the website was missing the zeal and enthusiasm that lived in the in-person office the firm was engaged in significant and fascinating activities and processes, but these 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.
A walkthrough
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 font and introduction to the story of the project
Important matrix are hard to read, inconsistent spacing, not eye-catching
A walkthrough
This walkthrough shows what a typical project page looks like now.
Fun Fact: This project holds a special place heart because it shows my comprehensive involvement. I spearheaded the graphics, image rendering, and 3D modeling, and also played a key role in designing the exterior and floor plans of the cottage.