Janie Ottwell

Problem

The AtWork! website was cluttered and difficult to understand. The walls of copy lack of heirarchy stood in the way of conveying their mission and the effort they put into their work.

Solution

My classmates and I put on our design thinking caps and decided to focus on a complete website redesign focused on educating employers on the benefits of hiring individuals with disabilities, and highlighting how this approach addresses job vacancies while meeting the goals of both employers and employees. Additionally, it should raise public awareness, encourage donations, and spark conversations that expand the organization’s reach to new audiences.

My Role

User research, user flow, wireframing, prototypes.

User Research

We conducted a thorough audit of the existing website to identify areas for improvement. Our focus was on streamlining navigation, clarifying user pathways, and ensuring that key actions were prominent and intuitive. The insights from this audit directly informed our design choices, enhancing both usability and engagement.

We recommend several key improvements:
Navigation Overhaul: Simplify the navigation to enhance accessibility.
Fonts: Use smaller, more varied fonts to better reflect content hierarchy and reduce visual clutter.
Clear Content Hierarchy: Establish a more intuitive hierarchy to guide users effectively.
Image and Content Scaling: Adjust the placement and size of images and text for a more balanced layout.
Consistent Grouping with Improved Scaling: Maintain effective grouping of content but enhance scaling to reduce bulkiness and improve readability.
Color/Contrast Adjustment: Reduce the dominance of royal blue and improve overall color balance to create a calmer aesthetic.
Separate Leadership/Board Page: Move the leadership and board of directors to their own page.

Sketches/Prototypes

Our paper prototype was a complete departure from the original website. Using the insights from our audit, we designed a clean, straightforward layout. However, after prototyping we decided to shift in a different direction.

In our initial paper prototype, we put the navigation bar at the top, but we later decided to switch to a side navigation layout. We kept a header and footer, though simplified with less information.

Wireframes

Moving to our mid-fidelity designs, we completely removed the header and footer and established the side navigation bar. With our new fonts and font sizes, the layout became more breathable and easy to understand. Our hierarchy became more recognizable as the content filled the page effectively.

In the high-fidelity version, we incorporated all of our images, colors, and text to create a cohesive and polished design.

In our mobile prototype, we successfully integrated the hamburger menu, which was one of our key design goals. The content is also organized in a way that enhances readability and usability on smaller screens, ensuring users can quickly find what they need.

Results/Lessons

Overall, the project was a success. The redesigned website was much more readable and easy to follow.

On a personal note, I was not crazy about the final design, but these things happen when working with a team. You have to put your personal feelings aside for the greater good. Also, since this was a school project, there was a really tight deadline to get the entire project finished and presented. Nevertheless, the end result was a vast improvement.