Understanding the goal of the project was clear, but how we can tackle it was a challenge. Me and my fellow designer knew absolutely nothing about composites and advanced manufacturing, but this turned out to be a great advantage, paired with some great industry experts, we new that the website content should be a reflection of business goals meeting user interests. Content needed to be tight, and straightforward, so really anyone can get a good grasp of what IWA was about. After all students of many different ages would potentially visit the site to get a feeling for what they can expect in class, and see the institute's and brand.
We wanted to identify core business goals and user goals to identify how the website could be a design solution for both the company, and industry.
The user problems that are pre-existing within the industry
We brainstormed all types of different users that would be coming to the site. This helped us get an idea of how we wanted to design the architecture, users with different professions/educational levels would want to see different content.
Clearly we were building a website, but these valuable steps helped identify something within space and time that worked meant more than a website for users. We created a sitemap that represented different pathways, or user trajectories, for the synthesized user types. These pathways were organized into a chart, and cells, allowing us two piece together parts of a puzzle (content user would see) for user trajectories.
The main goal of the website, was to enlighten and educate users just enough to make a joining decision for their school district. At what point, might users say, 'I've seen enough, let's do this!" ?
The high fidelity site map was an action item that helped discussions with stakeholders. It was helpful piecing the bits of information together, rather than playing a guessing game.
This site map helped highlight that educators, and parents, would almost prefer seeing IWA from the perspective of the student since they were the one that would actually become an integral part of it.
From that it made us ask the question, well what would students want to see? Most likely not how
This site map helped highlight that educators, and parents, would almost prefer seeing IWA from the perspective of the student, since the students are actually become an integral part of it.
From that it made us ask the question, well what would students want to see? Most likely not how their primary school integrates with IWA, that is up to their educational leaders. When they can opt-in for IWA classes, students want to see the careers they can go into, build trust and confidence with the industry in themself, these moments of inspiration and feelings of "I can do this" is what they are looking for.
This is an example of a flow that started to think about links, buttons, and decision making while users traverse down the site. It's specific to Educators, and outlines their goal of understanding enough about IWA for them and their board to making a joining decision.
The design needed to be modern, yet familiar. From benchmarks within the industry, the team really liked a fixed sidebar that stuck as you scrolled down the page. It gave the site a book feel, and in a way it was turning out to be a book.
We also identified a lot of motion was important, we didn't have a lot of video content, so we wanted interactivity to be big.
This also identified call to actions like donations, and simply reading and navigating to respective content for the user.
Wire-framing was all about finding a design system that was mobile friendly, accessibility, legible, and readable ensuring content was easy to engage and digest.
Big type, impactful images, short descriptions and transitions into the next section.
This is a simple landing page for the site, driving home core business goals we set out on. We are looking back on the research, user and business goals we set out on, and making sure an interface is representing that positively.
Compositional layouts helped "carve" a feeling into the site. The purple was registered really well with the team and other stakeholders in terms of really differentiating the brand. Soon we would take that idea even further and craft a purple dark mode into the sit.
It was important that IWA was distinctly different from its co-existing organizations within the composites industry. The website design system, using the style guide from the brand strategist Ivy greco, was designed to be fun, modern, accessible, and user friendly. The site meets AAA standards for accessibility, and utilizes translation tools to aide language barriers.
The project ends here but feel free to visit iwa-us.org!
Feel free to reach out! I love connecting with others in the industry!
.png)
