Objective

We were given seven weeks to identify the problems in the current user experience and use the research and design methods taught in the Web Design course to create an optimal experience. This project helped us understand the design process from start to finish. We were assigned to share the same role from research, to design, to development.

About Gateway Center

The Gateway Center is a non-profit organization in Monterey County “providing adults with intellectual disabilities the best environment to live and work at the highest level possible”.

The Problem

The current website did not communicate their mission statement effectively, and users would be overwhelmed with a poor navigation structure and an overload of content.

Our Goals

• Re-brand the organization to create a light, friendly, and welcoming appearance
• Implement accessibility features for the target audience
• Re-structure the information architecture (IA) and simplify the amount of information presented throughout the website

The Process

Research & Analysis

After performing a heuristic evaluation on the current website, we researched similar local, regional, and national organizations. Some key elements we learned during this process were:

• Photographs with stories of organization members create a positive emotional experience for the users
• Colors found in nature-blue, green, yellow-are more inviting and friendly
• Different accessibility features are crucial depending on your target audience

From our research, we developed three personas and focused on their needs to begin our ideation phase.

IA & UI System Styling

As a team we then brainstormed to simplify the IA so users would be able to easily identify what they would like to achieve, yet maintain the amount of information necessary for clarity. From this, we developed a new sitemap.

Next, we were tasked to create a mood board that would reflect the overall feel and key elements we would want to incorporate in our prototypes.

Prototypes

With a structure and style in mind, my team and I began to develop low-fidelity sketches of the new website along with initial logo concepts for further rebranding the organization.

We combined our ideas to create another iteration, which we moved forward to create digital low-fidelity prototype of in Adobe XD.

Then we were tasked to create four pages as a high-fidelity prototype, where we were able to utilize Adobe XD’s new voice recognition, co-editing, and component states features.

Test out our prototype here and say ‘search’ while holding the spacebar to begin the voice command.

High-fidelity Prototype

Finally, we developed! We used WordPress as our Content Management System (CMS) for the website to simulate how we would build and deliver it to a client, and it also allowed us to continue to work on the project simultaneously. We were also able to implement the voice recognition search bar in the developed site.

Developed Website

Reflection

My team and I explored several stages of the design process, from research to development. Initially I was hesitant about how we would be able to collaborate and work together as we were assigned to share each role, but the software tools we selected allowed for the necessary collaboration.

Additionally, during all stages of the project, I became focused on the accessibility of the design, and more importantly, the accessibility features that our target users needed. Having a language translator in a widely Spanish speaking city is crucial for our users, yet the features that make their experience easier often get overlooked. Moving forward I will be incorporating these features in my projects.