Welcome to an exciting adventure where you'll become a design detective! Today, you'll learn how to map out user journeys and create wireframes - the blueprints that help designers build amazing apps and websites. Think of yourself as an architect planning a digital building!
User Flow and Wireframe Development
Follow the instructions inside the file and complete the tasks.
After completing the tasks, submit the file in PDF or DOCX format in this link.
- Think like a user: Imagine you're using the app for the first time - what would you do step by step?
- Keep it simple: The best wireframes are clean and easy to understand, like a treasure map!
- Use arrows and labels: Help others follow your user flow by clearly marking the path
- Don't worry about colors: Wireframes are like sketches - focus on the layout and structure first
- Test your flow: Walk through your user journey yourself to make sure it makes sense!
You're designing a platform for teenage environmental activists to organize climate action events. Your app needs to work across mobile, tablet, and desktop while handling multiple user types: activists, mentors, and school coordinators.
Complex Scenario Elements:
- Real-time event coordination across time zones
- Multi-device synchronization for planning sessions
- Integration with school approval systems
- Age-appropriate content moderation
- Accessibility for users with different abilities
Your mission: Create user flows that show how a 15-year-old activist plans a school cleanup event while collaborating with teammates using different devices.
Industry-standard criteria for your user flows and wireframes:
Ensure your user flows are inclusive:
Document your design process:
- Create a case study outline showing your problem-solving approach
- Explain why you chose specific user flow patterns
- Document how you considered different user types (activists, mentors, coordinators)
- Show before/after iterations of your wireframes
Prepare to explain your decisions:
- Why did you choose certain interaction patterns?
- How do your flows adapt across different screen sizes?
- What accessibility considerations influenced your design?
- How would you measure success for this user flow?
Industry keywords to include: User journey mapping, information architecture, cross-platform consistency, responsive design, accessibility compliance, user research, interaction design, wireframe fidelity, task flow optimization
Design user flows for GreenAction, a youth environmental platform with these brand requirements:
- Color palette: Earth tones only (greens, browns, natural blues)
- Tone: Inspiring but urgent, age-appropriate
- Logo placement: Must appear on every key decision screen
- Sponsorship: Must include space for school/organization logos
- Compliance: COPPA compliance for users under 13
- Performance: Must load on 3G networks (affects wireframe complexity)
Scenario A: The Cross-Device Coordinator
Maya starts planning an event on her phone during lunch, continues on the school computer during study hall, and finalizes details on her tablet at home. Map the entire cross-device experience.
Scenario B: The Accessibility Hero
Design flows for Jordan, who uses voice commands due to limited hand mobility, and Alex, who relies on high contrast and large text due to visual impairment.
Scenario C: The Time-Crunched Organizer
Show how a user can organize a complete cleanup event in under 5 minutes across multiple screens, including backup plans for when things go wrong.
After creating your initial user flows:
- User test with 2 classmates using different devices
- Identify friction points where users got confused
- Redesign problematic sections
- Document changes and explain your reasoning
- Test again to validate improvements
Define how you'll measure if your user flows actually work:
- Task completion rate: Can users finish their goals?
- Time to completion: How quickly can they act?
- Error rate: Where do users get stuck or confused?
- Cross-device consistency: Does the experience feel seamless?
- Accessibility compliance: Can all users navigate successfully?
Think like a professional UX designer:
- Stakeholder perspectives: Consider needs of students, teachers, parents, and administrators
- Technical constraints: What's actually buildable with current technology?
- Business goals: How does this serve the platform's mission?
- Scalability: Will this work with 100 simultaneous events?
- Legal compliance: Privacy laws, age restrictions, content policies