Digital Designer, Web Designer
Year
2023 – 2024
Tools
Figma, WordPress, Photoshop, Illustrator, Zoom, Trello, Google Workspace
Skills
Requirements Gathering, Wireframes, Prototype, Project Management, Visual Design
Background
Fritz Innovations bring the finest high-end door hardware to the Philippines. Their curated range includes FritsJurgens pivot hinges, Simonswerk Tectus Concealed Hinges, Dnd Handles from Italy, and Bora Cooktop Extractor Systems, each embodying unmatched craftsmanship.
Overview
I was the web and digital designer tasked to design their website, digital assets, logo and branding guidelines.
Problem
The project objective was to bring their MVP into life. Based from initial feedback gathered:
- There was a need to establish and build the brand’s online presence.
- There were four different brand guidelines to follow and the website needed to blend well with all of them.
- The website will be used to showcase the different brands Fritz Innovations has to offer and their product line.
Problem statement
“How might we build an online presence so that customers can easily understand the company’s profile and conveniently connect for their project needs?”
Target Audience
The main target audience for this project are architects, contractors, interior designers, project managers, property managers and those in the construction business.
Approach
Some of the planning processes done for this project were: (a) creating a media plan (b) creating a proposed timeline for project management purposes. Requirements gathering was done mostly in face-to-face meetings, which contributed to team alignment and gather requirements from stakeholders.
Branding and Identity
The first step to establishing an online identity was to create a logo, branding guidelines and design system. The logo was used in different platforms both online and offline, while the style guide was used to establish consistency across digital platforms.
Information Architecture and User Flow Diagram
Information architecture helped me organize, structure and label content in an effective way. This provided the foundation as I proceeded to creating my prototype. User flow diagrams helped me visualize, analyze and map how users will interact with the product as a whole. The diagram included paths and journeys that help understand patterns users will take. It allowed the team to gather feedback, make adjustments, and identify and fix user issues ahead of time.
Low fidelity wireframes and prototype
Paper sketches, low fidelity wireframes and an initial prototype helped stakeholders visualize the concept and idea. It also let the team resolve basic questions about the content, layout and product requirements before committing to a higher fidelity prototype.
Tailoring the website experience to reflect the brand identity
To cater the company’s website to its target audience effectively, specific pages were included to cater to the audience:
Home page: Giving the user some information about who Fritz Innovations is, and the brands and products they carry.
Brand (Dnd): A page dedicated to Dnd – About Dnd, downloading the product catalogue and a link to Dnd products.
Brand (FritsJurgens): A page dedicated to FritsJurgens – About FritsJurgens, downloading the product catalogue and a link to FritsJurgens products.
Brand (Bora): A page dedicated to Bora – About Bora, downloading the product catalogue and a link to Bora products.
Brand (Simonswerk): A page dedicated to Simonswerk – About Simonswerk, downloading the product catalogue and a link to Simonswerk products.
Shop: Directing users to select the brand they wish to check out.
Shop: Directing users to select a product they wish to view.
Shop Item: Providing users product information which will help them in their shopping experience.
Inspiration: Providing users an inspiration page for their project.
Inspiration: Providing users with more information on how they can recreate a specific inspiration peg.
News: Users can view more information about company news, company updates, product updates or product launch.
Contact: Directing users to request a quote for their project needs.