Refining the Event Registration Experience
Yes, M.I.S.S. Inc. Website
Redesigned by Kathy Kamangar
PROJECT OVERVIEW
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. serves high school girls in New Jersey from Bergen, Essex, Passaic, and Union Counties.
Yes, M.I.S.S. advances college and career choices for young women through a continuum of mentorship, real-world life skills, and positive youth development. They are collaborating with colleges to encourage young women to pursue competitive degrees.
The Goal
• To have a user-friendly website that conveys the organization’s mission
• To allow users to easily find and register for events and workshops
• To encourage users to volunteer for different programs to help the organization’s growth
• To facilitate donations that used for the organization's expenses
• To allow users to easily find and register for events and workshops
• To encourage users to volunteer for different programs to help the organization’s growth
• To facilitate donations that used for the organization's expenses
The Problem
It looks difficult for high school girls to interact with Yes, M.I.S.S. website and access the support they need. On the other hand, there is currently no way to display upcoming events and workshops on the website. Also, there is not enough assistance for volunteers and supporters on the website.
The Product
The redesigned Yes, M.I.S.S. website
Role
UX/UI Design Lead
Responsibilities
Sitemap
Wireframe
UI Designing
Design System
Prototyping
Usability Testing
Tools
Figma
Adobe Photoshop
Adobe Illustrator
Adobe Photoshop
Adobe Illustrator
Google Drive
Slack
Slack
Deliverables
Heuristic Evaluation
Competitive Analysis
Sitemap
Wireframes
Design System
Design System
Mockups
Prototypes
Prototypes
Team
Minoo S.
Freya M.
Fay R.
Nassi B.
Kathy K.
Duration
9 weeks
RESEARCH
Meet with the Stakeholder
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. During these discussions, the stakeholders expressed their specific desires for the website:
- ". . . register for events and workshops . . ."
- ". . . easy and clear way for donors to contribute . . ."
- ". . . volunteers to sign up . . ."
- ". . . reflect the quality of the program and convey our mission . . ."
Persona
The utilization of personas stands out as a vital approach in comprehending and empathizing with our target users. We collaborate closely with project stakeholders to craft the persona. This persona offers valuable insights into users characteristics, motivations, and pain points, enabling us to tailor solutions that effectively meet their needs.
Website Audit
We performed a comprehensive website audit of the existing platform, evaluating it based on Heuristic Evaluation rules. Our evaluation encompassed key aspects such as usability, navigation, visual design, and overall user experience. The findings were meticulously documented in a detailed report, highlighting strengths, weaknesses, and recommendations for improvement. This audit served as a valuable tool in identifying areas of optimization and guiding our design decisions for an enhanced user-centric website showcase.
Competitor Analysis
Our team conducted a competitor analysis, thoroughly analyzing the websites of key competitors:
- Black girls smile
- Girls for a change
- girls inc.
- She's the first
This comprehensive evaluation allowed us to gain valuable insights into the landscape and identify areas of opportunity. To facilitate our findings, we compiled the results in a concise table that highlights the presence of features across each competitor's website.
By leveraging this analysis, we were able to strategically position the Yes, M.I.S.S. website showcase to outshine the competition and deliver a superior user experience.
DESIGN
User Flow
To ensure a user-centric approach, we designed the User Flow considering the Persona's Goals and Pain Points. This flow shows the registration process from the Home Page through receiving confirmation and adding the event to the calendar.
Registration Process
Sitemap
After designing the User Flows based on user's needs, we have created the new sitemap. This sitemap outlines the main sections and navigation flow of the website, including the Home, About Us, Our Programs, Get Involved, Our Supporters, Contact Us, and Donations which are fully connected to each other.
The newly designed sitemap stands out for its user-friendly layout, ensuring clear and effortless navigation through sections, perfectly aligned with user's needs.
Wireframe
After finalizing the Sitemap, we created wireframes, transforming concepts into visual representations. Considering user expectations, these wireframes provided comprehensive information for events and a clear roadmap for the website, ensuring a seamless, easy, and engaging user experience.
Here is the user flow that Sara follows to register for one of the College and Trade Tours, along with the website wireframe.
MID-FI PROTOTYPE
After creating the wireframes, we move forward to the mid-fidelity prototype, taking the website design to the next level. This stage brings the wireframes closer to their final form, incorporating interactive elements and functionality.
Try the prototype here ↓
TEST
Usability Test
After creating the mid-fi prototype, we conducted a usability test to figure out how easy users can find their favorite program and register for that.
Study type:
- Conversion rate
- System Usability Scale (SUS)
Participants:
- 3 High school students
- 3 Parents
Location:
The United States, remote
(each participant completed the study in their location)
Length:
Each session lasted 15 to 20 minutes
Findings
Strengths Found:
- Most of the users were able to find the program and register easily and quickly.
- All users enjoyed navigating between sections.
- All users found the context clean and clear.
- All users enjoyed navigating between sections.
- All users found the context clean and clear.
Areas for Improvement:
- A few users encountered difficulty in finding desired program.
User Recommendations:
- Users suggest to revise the "What We Do" name to "Events" or "Programs".
- Users would like to have a dedicated FAQ section designed for events.
- Users would like to interact with the Home Page calendar to see events of each day.
Refinements
In order to enhance the design for meeting user needs, we applied the following changes based on the findings from the usability test:
Substituting What We Do with Our programs
We changed the "What We Do" section name to "Our Programs" throughout the website.
Making the Home Page Calendar clickable
We made the Home Page Calendar clickable to show the program details under the calendar on the Home Page.
Designing a dedicated FAQs for Programs
We designed a dedicated FAQs page and pop-up for Tours & Workshops and then we added:
- a link to the Tours & Workshops FAQs pop-up on the Our Programs page
- a link to the Tours & Workshops FAQs page on the Footer
HI-FI PROTOTYPE
User Interface Design
In designing the user interface (UI) elements, we took a thoughtful approach to align with the target audience and the branding guidelines. The primary users being high school girls, we employed a color scheme that reflects their interests and preferences. The color branding included vibrant and energetic tones such as Amaranth Purple, Rose, Cyclamen, Old Gold, Aureolin, and Icterine.
Color Accessibility
Prioritizing inclusivity, we carefully reviewed our color combination to ensure strong contrast. This ensures our designs are not only visually pleasing but also accessible to all users, promoting a seamless user experience for everyone.
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.
To capture the attention of our target users, we utilized modern and dynamic illustrations that resonate with their youthful spirit.
Simultaneously, we recognized the importance of instilling trust in parents, supporters, and volunteers. To achieve this, we incorporated real photos that lend authenticity and credibility to the interface.
To strike a balance between vibrancy and visual harmony, we opted for a predominantly monochromatic color palette, utilizing black, white, and various shades of gray. The vibrant branding colors were intentionally reserved for sections that required the most attention, ensuring essential elements stand out effectively.
By carefully blending these design choices, we crafted an interface that not only captures the attention of our target users but also instills trust and ensures a visually appealing and cohesive experience for all stakeholders.
Mockups
We designed mockup pages to demonstrate how new UI elements come together to create the optimal appearance and user experience.
Design System
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. By establishing a unified framework, we have achieved a harmonious and seamless user experience across different pages and screens.
Explore the Design System here ↓
User Journey on Hi-Fi Design
The transition to high-fidelity design elevates Sara's registration process for College and Trade Tours. The polished user interface, accompanied by well-chosen UI elements, ensures seamless navigation. This transition not only enhances the user experience but also provides stakeholders a vivid understanding of the registration process and its visual finesse.
Here is the flow that Sara follows to register for a College and Trade Tours, along with the high fidelity design.
Hi-Fi Prototype
To evaluate the functionality and interaction between pages in the design, we created the high-fidelity prototype using Figma.
Try the prototype here ↓
Usability Test
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.Findings
During and after the test, the following observations underline the user experience:
- High user satisfaction
- Users navigated steps seamlessly as intended, displaying positive engagement
- Users praised the beautiful, colorful, modern, and clean user interface
- The to-the-point flow positively contributed to task completion efficiency
- Overall, the effective design and user-centric approach yielded a seamless and appreciated user experience.
Final Product
The result of this journey is the final prototype, achieved through a process of precise usability testing and iterative refinement. This method ensures user-friendliness and alignment with project goals.
TAKEAWAYS
Challenges
Leading the Yes, M.I.S.S. Inc. website redesign project encountered notable complexities, including remote work, time zone differences, and tech updates. Overcoming these obstacles demanded meticulous scheduling, constant tech vigilance, and adept problem-solving. However, these challenges also spurred growth, enhancing leadership skills and fostering innovative solutions that led to the project's success.
Technical Constraints
Throughout this project, we faced significant technical constraints that influenced our approach. Adhering to established Branding Guidelines governed our color schemes, typography, and overall visual identity, ensuring consistency but limiting creative freedom. We also encountered limitations with the Wix platform, necessitating us to navigate its functionalities and rely on available features and plugins instead of custom solutions. Despite these challenges, we innovated within these parameters to deliver a user-friendly and visually appealing final product.
What I learned
This project was a unique experience for me. Alongside leading the team, I engaged in remote collaboration with a UX Researcher and three UX/UI Designers. Despite living in different time zones and having varying schedules, we all united with a common goal: supporting a women-focused institution of the future. This shared mission prompted us to combine even the tiniest pockets of our available time to collaborate and learn together and I learned:
Even small minutes can be used in the best way for significant goals.
By finishing this project, not only did we support young girls, but we also learned and enriched ourselves.
Impact
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.
Thanks for watching!
Kathy Kamangar
