Duration
10 Weeks
Team
Group of 2
Role
UX/UI Designer
Tools
Figma, Google Form, Photoshop, Open AI & Optimal workshop
The architectural firm aimed to create a website that would serve as a digital portfolio, enhancing brand positioning and strengthening its reputation within the architecture industry by showcasing high-quality, impactful projects that reflect its expertise and creativity.
Our team of 2 followed a Double-Diamond approach based on the design thinking methodology. It was not a linear path; we bounced between stages as the project progressed.
We focused on gathering information through interviews and competitive analysis to align the website design with the stakeholder’s vision. This approach was shaped by the stakeholder’s emphasis on their perspective and desire to have a consistent vision for the portfolio site.
We conducted in-depth interviews with the key stakeholder to understand their priorities and preferences. The discussion focused on how they wanted their work to be portrayed, the tone and style of the website, and the specific features they valued.
This provided clarity on the types of projects they wanted to highlight and the importance of visual storytelling.
We took inspiration from the MRK website (https://mrkoffice.ir/) for displaying project images
We drew inspiration for the team section from the Next Office website (https://nextoffice.ir/).
To ensure our website meets the diverse needs of our users, we developed a user persona representing a typical user. This persona helped us understand our target audience’s goals, challenges, and behaviors. After that, we developed a user flow for creating a plan.
By conducting 9 close card sorting sessions, we gained insights into how to organize different sections of our website. These insights guided us in creating our first version of a site map that meets the needs and preferences of our target users and iteratively refined it based on user testing.
During the development phase of website, we encountered several challenges that required thoughtful solutions. Here are some key challenges and how we addressed them
1. The stakeholder requested a minimalist yet unique homepage, avoiding project images despite having many to showcase. They sought a design that reflected the company’s identity while maintaining a clean and uncluttered look.
2. The next challenge was deciding how to effectively showcase the numerous projects in a visually appealing and organized way that aligned with the website’s minimalist design.
We displayed the projects in a Mondrian-inspired layout, using a grid of rectangles and squares. This clean, geometric structure kept the projects organized and visually appealing while maintaining the minimalist aesthetic and adding a unique, creative touch to the portfolio display.
3. The next challenge was how to present job opportunities within the website’s minimalist design effectively.
We addressed this by dedicating a section on the team introduction page, leaving a specific area empty where current job openings could be featured
Home Page
Portfolio
Project Page
Home Page
About Us Page
Contact Us Page
Portfolio Page
Project Info Page
Project Images Page
Home Page
Home Page
1. In the initial test phase, users looked for company details within the About Us section, so we combined Contact Us with About Us and added a Team section to introduce staff.
2. Following stakeholder feedback, we updated the hero image to a project slider.
3. To avoid a cluttered homepage, we moved project images solely to the Portfolio section, where they’re displayed with complete details.
Home Page
Home Page
1. In the next phase, to avoid redundancy, we simplified the footer by retaining only essential contact details, as full information was already in the About Us section. Duplicates at the top of the page were also removed.
2. In the second usability test, we found the project slider became overly large due to the number of projects. To streamline the homepage, we removed the slider, showcasing only the company name and logo.
About Page
About Page
1- Since users were navigating to the About Us section to find the company’s address and contact information, we added these details to the About Us section.
2- Additionally, we removed the team introduction from this page and created a separate “Team” section to introduce the company members.
The UI Kit is an essential component of our design process, providing a collection of standardized design elements and components that ensure consistency and efficiency throughout the development of NeighbourTools. This toolkit helps maintain a cohesive look and feel, streamlining the design and development process.
Home Page
Home Page
1- In the first phase of high-fidelity usability testing, we improved menu clarity by repositioning it from the left side to a circular arrangement around the company logo.
2- To enhance this, we added horizontal and vertical lines for better definition.
3- Lastly, reflecting the architectural focus of the website, we placed the logo and menu inside varying-sized rectangles, with the size corresponding to the importance of the content.
Home Page
Home Page
1- In the second phase, we added color to the rectangles to make them more distinguishable, as the image appeared dull and unclear.
2- In the third phase, we restructured the layout of the rectangles, positioning them creatively to introduce a more dynamic and innovative design.
3-Finally, we decided to arrange all elements on the homepage, including the company name and logo, menu, and footer, in a way that reflects the design of a Mondrian painting.
Portfolio Page
Portfolio Page
Home Page
About Page
MEP Structural Team Page
Portfolio Page
Project Info Page
Project Images Page
Team Page
Architectural Team Page
Civil Team Page
Home Page
Civil Team Page
About Page
Portfolio Page
Team page
Project Info Page
Architectural Team Page
Here is the last prototype, displaying what we have achieved through our design process.
Evaluate the current design by testing the user experience more.
