Yes, M.I.S.S. Inc. is a 501(c)(3) nonprofit that aims at equipping and empowering young women in high school with the tools and support to pursue their God-given purpose in the marketplace and their communities.
Currently, Yes, M.I.S.S. program serves high school girls in New Jersey from Bergen, Essex, Passaic, and Union Counties.
For Users:
For YES M.I.S.S:
Role
Deliverables
Tools
Team
Redesigned Website for Yes, M.I.S.S. organization
The completed design is currently in the development stage, and we hope to see its numerical impacts soon. In the meantime, even at this stage, the stakeholders have acknowledged that this phase has been a significant boost for the institution. Financially, it has led to savings of $48,746 for the organization, which could potentially be allocated towards hiring valuable resources to further benefit the institution.
We began the project with stakeholder interviews, crucial for understanding the problem, goals, and shaping our UX process. These interviews provided valuable insights into their needs, pain points, and expectations.
Given that the stakeholder's primary goal was to establish a user-friendly event registration process, we placed strong emphasis on fulfilling this goal while also addressing other goals.
We worked in close collaboration with stakeholders to develop personas that provide valuable insights into user characteristics, goals, and pain points.
We initiated an extensive heuristic evaluation on the existing website to assess its usability and identify areas for improvement.
The heuristic evaluation provided valuable feedback and informed our subsequent design decisions and optimization strategies.
Our team conducted a competitive analysis, thoroughly analyzing the websites of key competitors.
This comprehensive evaluation allowed us to gain valuable insights into the landscape and identify areas of opportunity.
Here is the result from competitive analysis
1
Clear communication and registration processes
2
User-friendly platform
3
Minimal and modern design
4
Demonstrate organizational value and impact
Based on the research findings, we have developed a streamlined sitemap tailored to Sara's and Emily's needs, enhancing the user experience and functionality of the website. This sitemap outlines the main sections and navigation flow of the website, including the Home, About Us, What We Do, Get Involved, Our Supporters, Contact Us, and Donation.
After crafting the sitemap, we proceeded to construct the primary user flow in alignment with Sara's goals and pain points. This flow illustrates the registration process, starting from the home page, progressing through confirmation receipt, and concluding with adding the event to the calendar
After finalizing the sitemap and user flow, we created wireframes, transforming concepts into visual representations. These wireframes provided a clear roadmap for the website showcase, ensuring a seamless and engaging user experience.
Here are the steps Sara has to take to register for one of the events:
Design Considerations Behind Emily's Pain Points
In addition to addressing Sara's needs, here are the design considerations behind Emily's pain points:
After creating the low-fidelity prototype, we conducted a usability test to figure out how easy users can find their favorite programs and register for them.
Participants:
- 3 high school students
- 3 parents
Finding 1: Desiring clear visibility of program details on the homepage calendar.
Finding 2: Difficulty in finding the programs on the website.
Finding 3: Seeking access to FAQs related to different programs from the "Our Programs" page.
We also conducted another usability test with 6 other participants, consisting of 3 volunteers and 3 donors, to assess their ability to complete the task of volunteering and donating. They were able to finish the task without any issues, and they provided feedback stating that the task was straightforward.
We designed mockup pages to demonstrate how new UI elements come together to create the optimal appearance and user experience. To evaluate the functionality and interaction between pages in the design, we created the high-fidelity prototype using Figma.
In designing the user interface (UI) elements, we took a thoughtful approach to align with the target audience and the branding guidelines.
Our color style draws from the branding palette, ensuring a consistent and recognizable visual identity. To enrich the design further, we introduced complementary shades that stem from the primary colors, enhancing the vibrancy and depth of our visual elements.
We adhered to the typography guidelines outlined in the branding style to maintain consistency. The chosen typography is modern, clean, and easy to read, enhancing legibility and overall user experience.
In our design approach, accessibility was a paramount concern. We meticulously integrated inclusive design principles to ensure that our solutions cater to a diverse audience, making the user experience seamless and enjoyable for everyone.
To capture the attention of our target users, we utilized modern and dynamic illustrations that resonate with their youthful spirit.
Here are the steps Sara has to take to register for one of the events:
.jpg)
We have developed a design system that acts as the foundation of our website showcase. This comprehensive system includes a collection of reusable components and guidelines that ensure visual consistency and efficiency throughout the design process.
Please click on the image to see the design system.
After the development of the High-Fidelity Prototype, we conducted an additional usability test to assess how users would navigate and register for their favorite program at this particular stage.
Study type:
System Usability Scale (SUS): With a score of 94.5 (excellent)
Participants:
- 3 new high school students
- 3 new parents
During the test, users expressed satisfaction with the overall UI of the website and provided positive feedback.
We also set up a test platform on Maze. The users were asked to register for the 'Montclair University College Tour.' Every user successfully completed the task without any dropouts or bounce rates.
Here are the results:
100%
Direct Success
0%
Mission Unfinished
0%
Misclick Rate
43.9 S
Avg Duration
Click here to see the results from path 1 and path 2
Here are some final screens after usability test:
Navigating Branding Guidelines:
Wix platform:
Effective Communication with the Stakeholders:
Fostering Remote Collaboration Skills Across Time Zones:
Time Differences:
Helen Keller: “Alone we can do so little; together we can do so much.”
