Miles for Smiles
An intuitive and user-friendly sign-in and registration experience for the charity running event.
To provide a seamless and accessible sign-in and registration experience for a charity run, making it easy for participants to sign up and actively support the event.
Objective
My Role
Wireframing
Prototyping
User Research
Visual Design
Tools
Figma
Team
Duration
4 weeks
Solo Project
The Challenge
As a designer, my goal was to create a simple, user-friendly registration system for the Miles for Smiles event, making it easy for people of all ages and backgrounds to sign up, donate, and engage. The aim was to improve accessibility, increase participation, and build a stronger community supporting children with autism spectrum disorder.
How might the design of the ‘Miles for Smiles’ sign-up interface enhance participant engagement and streamline the registration process?
THE SOLUTION
Account Creation
Users can create an account by entering their email, username, and password. Social media sign-up options (Facebook, Google, Twitter) are available for quick registration. The background image ties in with the marathon event, creating a welcoming atmosphere.
Login
Returning users can log in with their username and password or via social media accounts. Options to remember login credentials and reset passwords are provided, with a background image that aligns with the event theme.
Personal Information
This screen collects basic personal details from participants, such as name, date of birth, gender, and address, ensuring a smooth start to the registration process with clear, straightforward input fields.
Health and Medical Information
This screen gathers important health-related information from participants, such as medical insurance coverage, pre-existing conditions, medications, and allergies, to ensure safety during the event.
Event Information
This screen collects details about the participant’s race preferences, including the selected race distance, estimated finish time, and whether they are running individually or as part of a team, helping to tailor the registration experience.
Terms and Conditions
This screen presents the event’s terms and conditions for participants to review and agree to, ensuring they understand the event’s policies and responsibilities before proceeding to payment.
Payment Methods
Participants can select from multiple payment options and securely enter their payment details to finalize the registration process.
Registration Confirmation
This screen serves as a confirmation of the participant’s registration, providing key event details and a countdown to the event. It offers a personalized experience, reinforcing the participant’s successful registration while preparing them for the upcoming race.
AI Chatbox
This screen features Zia, an AI assistant that helps participants with account issues, registration, donations, and event details through easy-to-use options. It provides instant support in a conversational format.
Research
Qualitative Interviews
I conducted qualitative interviews with seven marathon runners to gain deeper insights into their registration experiences. This effort aimed to pinpoint the specific needs and preferences of both seasoned and first-time participants, allowing for enhancements to the sign-up process.
Experienced Marathon Runners
Seasonal runners appreciate platforms that foster interaction and community building, where they can connect with peers, share experiences, and access collective wisdom on training and preparation.
First Time Marathon Runners
New marathon runners need a registration process that offers extensive guidance and support, providing detailed information on training programs, what to expect on race day, and tips for effective race preparation.
“The registration process should be as enduring as the marathon itself, not a hurdle to start.”
- Seasoned Marathon Runner
“Interactive webinars or Q&A sessions with seasoned runners would make the process less daunting.”
- First Time Marathon Runner
“It’s vital that the registration interface is intuitive and reassuring, offering help along the way.”
- First Time Marathon Runner
Persona Development
I developed user personas based on interviews to represent the participants’ diverse motivations and needs. These personas guide the design of the registration interface, ensuring it effectively meets user expectations.
Journey Mapping
To optimize the marathon experience from start to finish, I crafted a user journey map based on insights from marathon runners. This map identifies crucial touchpoints throughout the pre-registration, registration, and post-event stages, ensuring each step enhances user satisfaction and engagement.
Prototyping
Low Fidelity Mockups
I began the design process with low-fidelity mockups to shape the ‘Miles for Smiles’ registration interface. These initial sketches facilitated a quick exploration of layout options and user flows, allowing for rapid iterations and clarity on the key functionalities needed for an effective registration experience.
Sign In Page
Create an Account
Personal Information
Health and Medical
Event Information
Terms and Conditions
Payment Methods
Confirmation Screen
AI Chatbox
Takeaways
User-Centered Design
The registration process was streamlined to ensure accessibility and simplicity, making it easy for participants to sign up and engage with the event.
Clear and Concise Communication
Each step of the registration process was clearly communicated, minimizing confusion and improving the user experience.
Security and Privacy
Strong focus was placed on securely collecting sensitive participant information, ensuring both data protection and user trust throughout the registration process.
Reflections
Streamlined Registration
The registration process was streamlined and user-friendly, making it easy for participants to navigate and complete their sign-ups.
Clear Communication
Clear communication and visual cues throughout the screens helped reduce confusion and enhanced user experience.
Secure Payment Process
The integration of multiple payment methods and secure handling of sensitive information ensured a smooth and trusted transaction process.
Next Steps
User Feedback
Gather user feedback to further optimize the registration flow and improve areas where users face challenges.
Personalized Features
Consider adding more personalized features, such as a progress tracker for fundraising or race training.
Multilingual Support
Explore the addition of multilingual support to make the registration process accessible to a wider audience.