Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Website Redesign • Webflow Website
Transforming workspaces through innovation. A bespoke website for Officefitout's expert office design and renovation services.
Description
Officefitout, a leader in office design and renovation, specializes in creating innovative and functional workspaces tailored to clients' needs. The website showcases their portfolio of projects, client testimonials, and a blog offering insights into office design trends and productivity-enhancing solutions.
Officefitout needed a modern website that effectively showcased their expertise in office design and renovation, communicated their value to potential clients, and positioned them as leaders in the industry.
Key Challenges
- Transforming an outdated website into a sleek, contemporary platform that reflects Officefitout's innovative approach to workspace design.
- Designing a user-friendly interface that highlights their portfolio, client testimonials, and service offerings in an engaging way.
- Striking a balance between showcasing technical expertise and maintaining a visually appealing, modern aesthetic that resonates with corporate clients.
Scope of Work
Conducted research to understand client goals, target audience, and industry trends. Developed a clear content strategy and project timeline.
01
Created wireframes and a responsive UI design aligned with Officefitout's brand identity, ensuring intuitive navigation and a modern aesthetic.
02
Project Overview
Work began with an initial client meeting to understand the full scope and requirements for the website redesign. During this session, the client provided insights into their goals and shared examples of competitor websites, highlighting design elements they admired, disliked, and key features they wanted integrated.
To inform the redesign process, I conducted a competitor analysis of five office design and renovation websites. This analysis focused on clean, modern layouts, effective use of portfolios, client testimonials, and the incorporation of blogs for industry insights. The research revealed opportunities to differentiate Officefitout by emphasizing their expertise in creating functional yet aesthetically pleasing workspaces.
I also explored color psychology and branding principles to craft a professional and dynamic color palette that aligns with Officefitout’s identity. The selected colors convey innovation, trust, and sophistication, creating a sleek and inviting digital presence. After several iterations, we finalized the following color palette to complement the overall design.
Current Website Review
The design process for Officefitout's website began by reviewing the previous site to identify areas for improvement. By using the existing website myself, I was able to pinpoint various issues that guided the direction of the redesign.
Reviewing the site information architecture and below are some of the issues identified
- Content is deeply nested and hard to navigate
- Many redundant pages and categories
- Blog/Insights pages lacks clear organisation
- Services are scattered across multiple sections
- Navigation structure is inconsistent
Following our review of the complex original site structure, we've created a cleaner, more intuitive navigation system. The new information architecture streamlines everything into six clear sections: Home, About, Services, Our Work, Insights, and Contact.
The main navigation prioritises user needs, with quick access to key information and simplified pathways to essential content. Services are now logically grouped, project work is consolidated, and support content is better organised - making it easier for clients to find what they need.This new structure maintains all vital content while significantly reducing complexity.
Early Sketches and Ideas
We proceeded to create initial sketches for the website redesign, starting with the homepage. Our early concept focused on a clean, modern layout that prioritises OfficeFitout's core services and value proposition.The sketch shows a prominent hero section showcasing completed projects, followed by service categories laid out in an easy-to-scan grid format. Below this, we placed client testimonials and recent project highlights to build credibility. The layout wraps up with a clear call-to-action section that encourages potential clients to reach out.This initial sketch aimed to balance visual impact with practical navigation, ensuring visitors can quickly find what they're looking for while getting a strong sense of OfficeFitout's expertise and professionalism.
Low-fidelity Wireframes for Key Pages
Building on the initial sketches, I created low-fidelity wireframes for the six main pages—Home, About, Treatments, Conditions, Blog, and Gallery. These wireframes established a consistent structure for a cohesive user experience, mapped the hierarchy of key messages and calls-to-action, and explored various content layouts, particularly for the Treatments and Conditions pages. They also considered the strategic placement of testimonials and trust indicators, ensuring that Dr. Arewa’s expertise and the clinic’s focus on Black skincare were effectively communicated across the site.
Typography
For the Officefitout website, typography was essential in creating a contemporary and professional visual identity. Poppins was chosen as the primary font for its clean, geometric design that ensures readability across devices, while its modern aesthetic aligns with Officefitout's innovative approach to workspace design.
Poppins
The versatility of Poppins’ weights enabled a clear typographic hierarchy, with bold headings to draw attention, medium subheadings for structure, and regular body text for clarity. This consistent approach was further enhanced by accessible font sizes, ample line heights, and optimal contrast ratios, ensuring readability across all sections, particularly in the project portfolio and service pages.
Component-Based Design System
To ensure consistency and efficiency in the design and development of The Arewa Clinic website, I created a comprehensive component-based design system in Figma. This system included core components such as buttons (primary, secondary, and tertiary), input fields, form elements, navigation items (header, footer, mobile menu), and cards for treatments, blog posts, and testimonials. The typography system covered heading styles (H1 to H6), body text styles (regular, bold, italic), and link styles with hover states, ensuring a cohesive and scalable design across the site.
Prototype Development
After finalizing the designs for the Officefitout website, I developed high-fidelity prototypes in Figma to refine the user experience and validate critical design decisions. These interactive prototypes mapped key user flows, such as navigating the homepage to explore services, viewing project portfolios, and submitting contact inquiries.The prototypes featured realistic content, functional navigation, and responsive layouts for all devices. User testing with eight participants provided valuable feedback, leading to refinements such as improving visual hierarchy, enhancing the visibility of the 'Request a Quote' button, and optimizing the mobile navigation menu. A second round of testing confirmed these updates, ensuring the prototype was ready for development with a user-focused design that effectively communicated Officefitout’s expertise and services.
