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).
If you want to interact with this project yourself, please click on the button below.
Please note that not all pages are fully designed. I encourage you to browse the home page, issues page, and your state page.
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:
Our Solutions:
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.
If you want to interact with this project yourself, please click on the button below.
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.
If you want to interact with this project yourself, please click on the button below.
Background:
Banknote is an invoice management website designed as part of a Whiteboard UX Design Exercise from uxchallenge.co. I chose to create the prototype from the perspective of a new user, therefore, there is an account creation and set up process incorporated into the design.
Prompt:
Managing multiple clients and projects is a part of running a business as a freelancer. However, sometimes clients don’t pay on time. How do you help freelance business owners keep track of payments from their clients, and make sure that they receive payments from clients promptly for every project?
Research Methodolody:
I used Competitor Analysis to gather insight on the design layout of current invoice management systems. I drew inspiration from companies such as Deel and Bonsai.
Creating a Figma Prototype:
Using the information that I gathered from my competitor analysis, I created a design that was clean, easily navigable, and highlighted the most important information. You can view the final prototype by clicking the button in the side bar.
Moving Forward:
In the future, I would like to expand upon some of the pages past Dashboard and Invoices. Specifically, I would like to flesh out the invoice template generator and the Clients page.
If you want to interact with this project yourself, please click on the button below.
We use cookies to analyze website traffic and optimize your website experience. By accepting our use of cookies, your data will be aggregated with all other user data.