DV-International

double diamond framework

I have chosen to use the Double Diamond framework for my design process because I find that it prrovides a more focused approach for product lifecycle management. The Double Diamond method is a design process that consists of four stages. Each diamond segments represents a different type of thinking - divergent thinking in stages 1 (Discover) and 3 (Develop), and convergent thinking in stages 2 (Define) and 4 (Deliver).

research phase

During the research, I conducted an interview with the client and several interviews with users from the target group. It was interesting for me to understand how important it is for users to have detailed documentation and video instructions on how to use the product. I assumed that having a blog on the website was unnecessary. However, as user interviews showed, my assumptions turned out to be incorrect.

Competitors

It was useful to study competitors' websites. As a result of competitive analysis, I noticed that despite the external differences in design, the sites use similar structural patterns. I also observed an interesting approach used by one of the companies - namely, using a glossary for key terms. This seemed useful and interesting for users, so I took note of it.

User Reseach

Thanks to the completed stakeholders survey, I obtained information about the target audience of the company. It consists of three main groups of customers:

• Architects who are designing buildings that require custom facade solutions.
• Contractors and construction companies who need high-quality facades for their building projects.
• Building owners or managers looking to upgrade or retrofit existing facades with more modern solutions.

These groups all have different needs when it comes to selecting facade materials but they share an interest in finding quality solutions backed by reliable engineering expertise.

Target audience

The next stage was conducting user interviews. I conducted five interviews, with two architects and three contractors from our company client’s network. The insights gathered from these interviews were instrumental in shaping the direction of the project and helped ensure that user needs were at the forefront of design decisions.

The key research questions were:

Architects:

• Can you describe your typical workflow when designing a new building facade?
• What are the most important factors for you when selecting materials for a project?
• How do you typically gather information on different facade solutions and suppliers?

Contractors:

• What challenges have you experienced in sourcing high-quality facade materials from reliable suppliers?
• What criteria do you use to evaluate potential vendors or suppliers when ordering facades online?
• Have there been any instances where product quality control was an issue during shipping/handling/installation process?

User Interviews

Empathy Mapping

Based on the interviews conducted, I created two empathy maps grouped by participants' occupation: architects and contractors. By analyzing their responses and behaviors during the interviews, I was able to identify common themes, pain-points and patterns that informed my design decisions.

Mapping Out
Research Data

The final stage of the research was mapping the collected data to find possible solutions for founded issues. This enabled me to prioritize user needs and develop in a more informed way during the next phase of the design process.

SYNTHESIS PHASE

Based on the data obtained during research, I created three key user personas, identified main user pain-points and outlined appropriate solutions. Additionally, I created user journey maps which allowed me to visualize the entire user experience, from initial contact with the product through to completion of a task.

Identifying Main
User Pain-points

I identified the main pain points experienced by users based on data obtained from the user-research phase. It helps me to create a solution that not only meets our client's business objectives but also provides an intuitive experience for end-users because the user is always at the forefront.

User Personas

I've created three user personas which reflect three main group of website users (architects, contractors, and building managers):

Customer Journey Maps

Creation of Customer Journey Maps for the key user-personas.

Synthesizing
Solutions

I used my research and analysis to prioritize website features based on pain-points for both the business and users. I also considered other factors such as budget constraints, technical feasibility, and market trends when making decisions about which features to include in the final design.

The following are the main features that the website should have to solve main user problems:

• Glossary and documents page (for clear product specs)
• Case studies showcase (for a visual demonstration of product utilization capabilities)
• Feedback form and contact info (for streamlined communication)
• Relevant resources such as blogs with videos (that help address common questions/issues faced by users)

IDEATION PHASE

Using the data gathered in the previous stages I started creating the information architecture of the website as well as designing user flows and low-fidelity sketched versions of wireframes for web pages.

Information Architecture
& User Flow Diagram

Sketching Wireframes

The wireframe sketches allowed me to discuss different design aspects with my team, particularly with developers, conduct preliminary testing, and coordinate the main structure of the site with our stakeholders at an early stage.

Implementation PHASE

I developed mid-fi prototypes and tested them with six users to gather feedback and make refinements. Afterward, I created final design layouts that underwent further testing. Additionally, I conducted scannability research using the “Attention Insight” AI-powered heatmap tool to understand user visual engagement.

Mid-fi Prototypes

After making a few adjustments to the initial sketches, I proceeded to create mid-fi interactive prototypes of the website pages using Figma software. This stage served as an important bridge between the conceptual phase and the final design implementation, providing a tangible representation for further evaluation and feedback before moving forward.

Usability Testings

Within our WBX network, I have five individuals who belong to the target group of the website (architects and contractors). To collect valuable insights, I invited them to participate in usability tests with interactive prototype in Figma.

By carefully observing and gathering feedback during these tests, I identified areas in need of improvement, gained a better understanding of navigation difficulties. For example, one of the key decisions was to get rid of the "hamburger" menu on desktop versions of the website because testing revealed that users found it much clearer to navigate through the site when they could immediately see the main menu items open:

User testings

After creating final design layouts, I conducted interface scannability tests using the AI heatmap tool "Attention Insights", revealing positive outcomes in terms of easy navigation and locating crucial information on the website.

Interface scanning (visual scanning)

Release notes
& Final Layouts

At the end of the project, I made an effort to address user pain points and meet stakeholder requirements.

As a result, functional design was developed to enhance the user experience, including:

• Glossary and documents page (to provide clear product specifications)
• Showcase of case studies (for a visual demonstration of product utilization capabilities)
• Feedback form and contact information (for streamlined communication)
• Relevant resources such as blogs with videos (aimed at addressing common questions/issues faced by users)

From a visual perspective (interface design):

• Simple yet effective clean and modern design
• Non-standard approach to element placement on the grid, creating an asymmetrical vertical rhythm that visually distinguishes the company from competitors
• Clear website navigation and element positioning (validated through heatmaps)

Design adaptation for all basic devices (mobile phones, tablets)

Adaptive design for all major devices using Bootstrap framework grids for design layout.

Accessibility
& UI Style System

In order to make the website content accessible to all users, I employed high contrasting colors and appropriate font sizes. Additionally, I implemented suitable hierarchy and emphasis throughout the design to ensure compatibility with assistive technology like screen readers.

Final Thoughts

Engaging in this project presented me with valuable learning opportunities across various aspects. Despite our limited timeframe, I am proud of the remarkable accomplishments made by our team. On a personal level, I gained extensive insights into the intricacies of the process and the importance of collaboration.

The primary lesson I gleaned from this experience can be summarized as follows:

Embrace feedback throughout every stage of the design process to cultivate growth and facilitate continuous improvement.

Thanks for watching!