Project Timeline
5 Months
Role
Web Designer
Tools
Figma | Webflow | Lottie
This Work Can't Wait
IDEO has been making revolutionary things for over forty years, and today they design products, services, systems, experiences, and ventures across a wide range of industries.
Their evolution is most evident in their current work, which shows that acting responsibly can actually accelerate growth and lead to greater accountability and transformation.
IDEO's expansion of their services prompted the need for a new web presence to showcase this shift and help organizations tackle urgent work. Through their new website, IDEO can demonstrate how their innovative approach to design can help clients navigate their own journeys of transformation.
Role
I was part of a team of designers, product managers, and web designers working on a project for IDEO. The stakeholders for the project included the CTO of IDEO.
As a web designer, I was responsible for developing the user interface and implementing interactions using Webflow, Figma, and Lottie.
Process
Designing "This Work Can't Wait" followed a holistic design process that takes both form and function into account.
The steps I used to design this site:
- Goal Identification & Design Review
- Style Guide Setup
- CMS Setup
- Site Wireframe / Building block
- Content Population
- Micro-Interactions
- SEO / Accessibility Checks
- Testing
Goal Identification
In our stakeholder meeting with IDEO, we discussed the goals and challenges the company faces and how we can address them with a new web design strategy.
A key focus of the conversation was understanding what “POP” means to the client and the experience IDEO wants to create for its customers. This is important because it will guide our decisions on whether to prioritise ease of use or visual appeal in our solution
A design review and handover session was organized and certain adjustments were made based on the limitations of Webflow and what aligns with the goal.
Style Guide Setup
With a keen eye for design architecture and a thorough understanding of the limitations of Webflow technology, I made the strategic decision to establish a CMS (Content Management System) for the website.
This ensured that the portfolio section's project data was dynamic and easily updatable.
The CMS also gave us the ability to populate the static landing and about pages, particularly the tab bar section where filtering of data was necessary. After a comprehensive review of the portfolio project's information architecture, I determined that using two templates would be the most efficient solution for managing the diverse structures of the pages, all while remaining within the constraints of Webflow. These templates were developed and data was successfully obtained from the CMS.
CMS Setup
After carefully considering the design architecture and the limitations of Webflow technology, I decided to set up a CMS (Content Management System) for the website. This ensured that the data for each project in the portfolio section was dynamic and could be easily updated.
The CMS also enabled us to fetch data for the static landing and about pages, particularly for the tab bar section where data needed to be filtered.
After reviewing the information architecture for the portfolio projects, I determined that using two templates would be the most efficient way to handle the different structures of the pages while still working within the limitations of webflow. These templates were created and data was successfully fetched from the CMS.
Site Wireframe / Building Block
Created a wireframe for the site to establish the overall layout and ensure that all elements are properly spaced and aligned.
Use the wireframe as a guide to build the website, making sure to keep all elements responsive across different screen sizes and breakpoints.
Content Population
We added content to the building blocks of the website with a focus on writing and visual appeal. This allowed us to assess the effectiveness of our design implementation and make any necessary adjustments.
Micro-Interactions
To increase user engagement and create a more immersive experience, the micro interactions were implemented:
Hero-Section
We incorporated a video into the landing section of the website. This video allows users to get a better sense of the project and its goals, helping them to understand and connect with the content on a deeper level
Navigation Menu
The navigation of the website was designed to seamlessly connect the existing IDEO site with the new about page and the project classification types that filter the data. To create a more engaging and interactive experience, we used Lottie to animate the hamburger menu and close icon on the website. These animations help to guide users through the different sections of the website and provide a more visually appealing experience
Major Project Section
To create a modern and funky feel for the website, we added a hover effect for the project images. When the user moves their cursor over a project image, a scribble circle appears, providing a dynamic and engaging visual experience. In addition to the hover effect, we also implemented data-filtered project types, allowing users to easily browse and filter the different projects in the portfolio section.
CTA Section
To encourage users to sign up for updates and offers from IDEO, we implemented a horizontal scrolling text effect on the email sign-up form. This text is masked within the input field and provides a unique visual experience for users as they enter their email address. The IDEO marketing team will use this information to reach out to potential clients and keep them informed about the latest news and developments from the company."
Filter Porfolio Projects
One of the challenges we faced in the development of this website was creating a custom interaction that overlaps two images as the user scrolls. This type of interaction is not possible using the default interactions in webflow, so we had to custom write the code for this section of the website. Despite the challenges, we were able to successfully implement the interaction, providing a unique and engaging user experience for the website visitors.
Design responsibly Page
Today Ideo designs so much more products, services, systems and experiences in virtually every domain and industry.
They have evolved within the last 40 years and it proves beyond doubt that acting responsibly doesn't hinder but accelerates growth, this had to be captured with a page filled micro, subtle but engaging micro-interactions.
Simple Portfolio Template
IDEO put their best 13 projects up, into two different custom templates built within Webflow's dynamic CMS, my aim was to ensure updating the template would be seamless and quick for the editors
SEO & Accessibility
AIn addition to using W3C-Link-Checker and ScreamingFrog.co.uk, my website design process places a strong emphasis on SEO. In collaboration with the marketing team, the following actions were taken;
- Meta descriptions and titles
- Typography Hierachy / Header tags
- Broken & Contextual Links
- Image alt text
- URL structure
- Make use of Webflow Publishing tools
Testing
The internal testing phase at IDEO was thoroughly executed due to the company's meticulous nature. To keep track of bugs and updates, Trello was used. The tests focused on the following areas: functional, responsive, SEO, CMS, user, and security.
Learning
Collaborating with the IDEO team was an incredible opportunity that took my design skills and attention to detail to the next level.
Working on Webflow allowed me to push the boundaries of what I thought was possible with the tool. I was able to achieve dynamic filtering using the CMS and create a template that I initially thought was unattainable.
This required me to dive deep into the intricacies of Webflow and deepen my understanding of the tool.
As a result of this project, I am now more confident in my web design skills and my ability to utilize Webflow to its full potential.
This experience has fueled my passion for learning and growing as a designer.