I'm Riley, a Digital Designer

Background:

The Afterschool Alliance is a nonprofit organization based in Washington, D.C.. Their mission is to ensure that all youth have access to affordable, quality afterschool programs by engaging public will to increase public and private investment in afterschool program initiatives at the national, state, and local levels. I was hired as a UX Design Intern through Build4Good and paired with The Afterschool Alliance because of my passion for education. My goals were to make the website easy to navigate, flexible to additions, and clean and concise.

Initial Experience & Assumptions:

My initial experience with the Afterschool Alliance website was a frustrating one. The navigation bar options were confusing to navigate, disorganized, and hard to read. The home page content was cluttered and outdated, and every piece of content was competing to be the most prominent one. Issue pages were difficult to read due to a lack of prioritization of information. The subpages did not connect to one another, and I assumed that made it difficult for users to see how some pages conceptually connect (ie. STEM issues and STEM policies).

Problem Statement:

The Afterschool Alliance's current website is cluttered and outdated, making it difficult for the wide range of users to navigate the site.

Research Methodolody:

I used 2 types of research methods. User Interviews helped me gain insight into the various reasons that people were using the website, the pages they visit most often, and their pain points on the current website. I then performed Usability Testing on my prototype to gauge whether or not my redesign communicated valuable information better, helped users be able to navigate the website easier, helped users find connected information, and contributed to a more positive interaction with the website. My results showed that users had a much easier time navigating the website with my improvements. Some users noted that they enjoyed the visual aesthetic of the prototype, saying it felt familiar, clear, and concise.

Feature Prioritization:

My first step in redesigning the Afterschool Alliance website was to perform a closed card sort using the existing navigation bar items and subitems. I reorganized the navigation bar items by the target audience's experience level. New users tend to look to the left side of a navigation bar, so pages like About and Issues were placed on the left, while pages like Research and Policy, which are aimed toward policymakers who often visit the site, were placed on the right. Subitems were arranged by a combination of placing pages that the Afterschool Alliance team wanted users to visit often higher and current popularity.

Creating a Figma Prototype:

Using the information that I gathered from my card sort, user interviews, and usability testing, I created a design that was easy to navigate, flexible to additions, and clean and concise. I worked hard to create a consistent pattern language throughout the site. You can view the final prototype by clicking the button in the side bar.

Moving Forward:

If I had had more time with the Afterschool Alliance, I would have liked to continue designing more of the subpages. Specifically, I would like to have templated the Policy pages (due to their close relation to the Issues pages) and the About pages (due to their importance to new users).

Background:

Arisa Labs is the creator of the Eclipse Soundscapes: Citizen Science Project, a NASA Citizen Science project funded by NASA Science Activation that is studying how solar eclipses affect life on Earth. My partners, Haley Mogollon and Pranav Srivatsavai, and I were tasked with assessing the current user experience for those using screen readers on the Eclipse Soundscapes website. We were instructed to specifically focus on the Apprentice Role page.

Research Methodolody:

We used Competitor Analysis to determine what features should or should not be part of the Eclipse Soundscapes website. We analyzed the Apple website and the BBC News website because of their notably accessible websites. We also analyzed the Nasa website due to its partnership with Arisa Labs. We found that all of our competitors gave users the choice to open a dropdown in the navigation bar, none of our competitors read minuscule visual details (such as splitters between sections), and that the Eclipse Soundscapes website featured accessible multimedia while the NASA website did not.

Issues We Found:

• Skip to Main Content button was not functional.
• Screen readers read through the entire list of subitems before moving to the next item in the navigation bar.
• Inconsistent use of buttons and hyperlinks.
• Repetitive buttons that led users to the same page but had different copy.
• Hyperlinks brought users to unexpected places.
• Lack of a feedback button.

Our Solutions:

• Made the Skip to Main Content Button functional.
• Restructured the order that the navigation bar is read in and gave users the option to open a dropdown menu.
• Removed repetitive buttons.
• Created consistency in buttons and hyperlinks, where buttons always lead to new pages and hyperlinks always move the user to a different spot within the same page.
• Improved visual hierarchy and aesthetics on the Apprentice page.
• Added a feedback button to allow for suggested improvements from real users.

Creating a Figma Prototype:

Using information from our research, user tests, user journey map, feature prioritization, and wireframes, we created a design that highlights the ideal user experience. We incorporated the flow that screen readers should take when navigating the website as well as implemented new features and visual improvements to the pages. You can view the final prototype by clicking the button in the side bar.

Background:

Zara is a popular international clothing company. Their branding style is very contemporary. They have over 3,000 stores worldwide and had approximately 96.4 million visitors to their website across both desktop and mobile in the month of October 2023. The goal of their website is to allow users to browse and purchase clothes online.

Initial Experience & Assumptions:

My initial experience with the Zara website was a frustrating one. The navigation bar text was small, thin, and difficult to read. The navigation options were cluttered and disorganized. The Hero Images had little to no context. The user did not have full control of their scrolling. I assumed that other users had the same experiences and frustrations.

Problem Statement:

Zara’s current website design makes browsing and shopping difficult due to poor navigation and a lack of readable text.

Research Methodolody:

I used 3 types of research methods. Competitor Analysis helped me compare Zara to its competitors and understand how those companies combated the issues that Zara was facing. User Interviews helped me gain insight into users' familiarity with Zara and other online retailers and what their true pain points with the website were. I then performed Usability Testing on both the current Zara website to gather information on how users navigated and behaved on the website and on my own prototype to compare it to how users navigated and behaved previously.

Feature Prioritization:

I used a 2x2 Matrix to find which features were both expected and had a high impact on the user journey on the Zara website. I used the Moscow Method to determine that I needed to focus primarily on redesigning the dropdown navigation and categorizing the items within that dropdown. Second, I wanted to restructure the home page, give the user full control of their scrolling, and redesign the layout of product listings.

Creating a Figma Prototype:

Using the information that I gathered from my user interviews and usability testing, I created a design that was easy to navigate, flexible to updates, and true to Zara's brand style. You can view the final prototype by clicking the button in the side bar.

Moving Forward:

In the future, I would also like to update the individual product listings, the sections that are featured on the home page, add filters that are functional, add an account login option, and redesign the shopping cart.