Embedded Files
Project overview
Image description: A young student with medium skin tone is viewing the Podsie home screen, while a laptop is open in the background. The Podsie logo, the letter P inside of a green leaf, is on the top left of the image. This is the final iteration.
Summary: I used best accessibility practices and user-first experience (UX) design to create the home screen and login page for an Anroid mobile app for Podsie, an education non-profit aimed at using evidence-based practices to make high impact learning experiences for educators and students.
Responsibilities
User Experience (UX) design
Gestalt's design principles
Storyboarding
User research and interview
Low and High fidelity wireframes
Realistic mockups
Web Content Accessibility Guidelines (WCAG) 2.1 level AA or higher
Key success indicator (KSI) for Podsie
Reach more than 10,000 educators to serve over 700,000 students
Tools
Canva Smart Mockups
Figma
MindMeister
Target audience
Teachers using Android mobile devices interested in evidence-based teaching and learning practices for their K-12 students
Mission statement
"Podsie is a nonprofit ed-tech organization whose mission is to empower teachers and to improve student learning outcomes."
The problem
In addition to the current website application, Podsie needs a new product and with a visually appealing design upgrade to reach more than 10,000 educators and over 100,000 learners to provide evidence-based learning and tools for educators.
The solution
The solution is to create a user-friendly, engaging, vibrant Podsie app that educators and learners can relate to use in unison with their courses, with implications to become a larger learning management system tool for institutions in the United States.
My design process
Step 1. Empathize
Step 2. Define
Step 3. Ideate
Step 4. Prototype
Step 5. Test
For this UX design mobile app project, I will be utilizing the Design Thinking model from the Hasso Plattner Institute of Design (d.school) at Stanford University, which involves the following essential steps: empathize, define, ideate, prototype, and test (Figure 2).
Figure 2. Design thinking model with the following steps: Empathize, Define, Ideate, Prototype, and Test. This model is from the Hasso Plattner Institute of Design (d.school) at Standford University.
Step 1. Empathize
Interviews
Shadowing users
Listen to understand
No-judgement zone
In the first step of this Podsie App Homescreen Page UX design project, I dedicated myself to the crucial Empathize phase, which laid the foundation for creating a human-centered and meaningful user experience. This phase revolved around gaining a deep understanding of our target users' needs, challenges, and desires to inform the entire design process.
To achieve this, we conducted a series of insightful interviews with representative users from our target K-12 educator and student audience (Figure 3). These interviews allowed me to establish a direct and personal connection with our users, delving into their thoughts, emotions, and behaviors regarding the product or service. I actively practiced listening to understand, with an open mind and a no-judgment zone, fostering an environment where users felt comfortable expressing their honest opinions.
Figure 3. We conducted and observed an interview with Althea (she/her), an aspiring first generation software developer and busy student, to learn more about what makes learning on apps more effective and a proactive use of her time while being a single young mother in grade 12. This helped us find some major user pain points that the average student of color that has an intense family-work-student schedule.
To further comprehend the users' complex experiences and pain points, I embraced the approach of shadowing users. By observing users in their natural context of using similar products or services at a local high school, I gained invaluable insights into their real-life interactions and identified unmet needs that might have remained unnoticed through conventional interviews alone.
By immersing myself in their world and developing a profound empathy for their unique situations, I could identify opportunities to create solutions that truly resonate with them. The insights gathered during this phase laid a strong groundwork for the subsequent steps in the UX design process, guiding our design choices and ensuring the end product exceeds user expectations while addressing genuine pain points.
Step 2. Define
Objectives
Personas
Decisions and challenges
Pain points
In the second step of this Podsie App Homescreen Page UX design project, I embarked on the essential phase of Define, where I transformed the rich insights gathered from Step 1. Empathize into clear and actionable project objectives. By defining these objectives, I aimed to establish a well-defined direction for the design process, ensuring alignment with the users' needs and the organization's 2023 Key Success Indicator (KSI) of reaching more than 10,000 educators and serving over 700,000 students.
The first aspect of this phase involved crafting comprehensive personas based on the data and observations from the previous step. Personas allowed us to create fictional representations of our target users, complete with their goals, behaviors, and preferences. These personas served as user archetypes, guiding my design decisions by enabling me to consider the unique perspectives of different user groups.
I then closely examined the user journey to identify critical decisions and challenges that users encounter while interacting with the product or service. By pinpointing these pivotal moments, I gained valuable insights into potential pain points and areas of improvement.
Identifying and understanding the pain points experienced by users was a central focus during the Define phase. By analyzing the users' pain points, frustrations, and unmet needs, I could prioritize design solutions that directly addressed these challenges, ultimately enhancing the user experience.
Through collaborative workshops and brainstorming sessions, we distilled the objectives, personas, decisions, and pain points into a concise and focused design brief. This brief would serve as a guiding document throughout the design process, aligning all team members and stakeholders on the project's scope and goals.
By completing the Define step, I set the stage for a user-centric and purpose-driven design approach, ensuring that my design solutions would effectively cater to the identified user needs while aligning with the broader project objectives.
Step 3. Ideate
Brain storming
All ideas are valuable
Collaborate for new perspectives
Prioritize within time and budget
In the creative and exploratory phase of our UX design project, Ideate, I harnessed the power of brainstorming to generate innovative ideas and design concepts for the Podsie App's Homescreen Page. I fostered a collaborative and inclusive environment where all ideas are valuable, encouraging each team member to contribute their unique perspectives and insights.
To initiate the ideation process, I created a mind map outline that served as the starting point for our creative exploration (Figure 4). The mind map covered various elements of the home screen, including visual graphics, mockups, touchscreen and desktop designs, navigation bottom bar, and Flaticon open-source icons. I collaborated with other Learning designers and agreed that using different user personas, such as teachers or educators, as well as K-12 students, will ensure a more user-centric and holistic approach.
Figure 4. Screenshot of mind brainstorm map for Podsie App Home screen Page UX design project using online Mindmeister web application.
Summary of Brainstorm map:Podsie App Home screen Page
Summary of Brainstorm map:Podsie App Home screen Page
- Who is Podsie?
- Podsie Website https://www.podsie.org
- Teaching Lab Website https://www.teachinglab.org
- Teaching Lab Mission
- "To fundamentally shift the paradigm of teacher professional learning for educational equity"
- Teaching Lab Model
- Head: Core academic content aligned to specific curricular materials, and research-based practices
- Heart: Teacher-led communities that build buy-in, social capital, and empowerment
- Habits: Structured and repeated cycles of inquiry in the classroom
- Equity: All in the service of educational equity
- Teaching Lab Mission
- 2023 Key Success Indicator (KSI)
- User Experience (UX) design
- Diversity, equity, and inclusion in design
- People or characters from diverse identities
- Consider low band with or low-tech options to reach more learners with limited internet connectivity
- Design Practices
- Gestalt's principles
- Similarity
- Common region
- Proximity
- Symmetry
- Closure
- Continuity
- Common fate
- Gestalt's principles
- Accessibility
- Web Content Accessibility Guidelines (WCAG) 2.1 level AA
- High contrast between text and background colors
- Web Content Accessibility Guidelines (WCAG) 2.1 level AA
- Design Process
- Spring cycle style
- Steps
- 1. Empathize
- 2. Define
- 3. Ideate
- 4. Prototype
- 5. Test
- Diversity, equity, and inclusion in design
- Visual Graphics
- Mockups
- Type of mockups
- Touchscreen phone, like iPhone or Androids
- Desktop laptop computer screens
- Teachers or educators navigating home screen page
- K-12 students Home screen page
- Podsie brand logo
- Type of mockups
- Images
- Podsie brand logo
- Backgrounds
- Banners
- Navigation bottom bar
- Flat icon open-source icons
- Style guide
- Typefaces and fonts
- Sample Podsie.org website and logo typefaces and fonts
- Color scheme
- Sample Podsie.org website and logo colors
- User accessibility
- Typefaces and fonts
- Mockups
- Gamification
- Sound effects
- Button clicks
- Menu opens or closes
- Characters
- Short unique sounds
- Humming, grunting, sighing, laughing, or others
- Long unique sounds
- speaking or narration
- Short unique sounds
- Colorful, engaging theme
- Characters
- Support character guide for tutorials
- Tutorials
- Text based or Videos
- Tutorials
- Diverse characters from around the world with many different identities
- Profile character customization
- Support character guide for tutorials
- Sound effects
During the brainstorming sessions, I explored diverse design elements to enhance the user experience. This included incorporating a Podsie brand logo, background visuals, banners, and a style guide defining typefaces, fonts, and colors. I also considered user accessibility, aiming to make the app inclusive for all users. In line with the teaching lab's mission of promoting educational equity, I focused on diversity, equity, and inclusion in design, featuring characters from diverse identities and considering low-bandwidth or low-tech options to reach learners with limited internet connectivity.
The ideation process extended to the inclusion of gamification elements, such as sound effects for button clicks, menu interactions, and character sounds, to create an engaging and interactive experience. Additionally, I envisioned character guides for tutorials, text-based or video-based learning, and profile character customization to enhance user engagement and personalization.
As I ideated, I maintained a keen eye on prioritization, considering factors like time and budget constraints. By embracing the sprint cycle style of the design process, I ensured iterative ideation, fostering constant refinement and improvement. My ideation phase set the stage for the next steps, enabling me to move forward with confidence as I progressed towards prototyping and testing the envisioned UX design for the Podsie app homescreen page to reach or exceed the 2023 KSI.
Step 4. Prototype
Storyboards
Low fidelity wireframe paper sketches
High Fidelity designs
Mockups
Moving into the practical phase of our Podsie App Homescreen Page UX design project, Prototype, I brought my creative vision to life through various tangible iterations of the Podsie App's Homescreen Page. I started by creating Storyboards to visualize user interactions and scenarios, enabling me to test the flow and usability of the design concepts. These storyboards served as a valuable tool for iterating and refining my ideas (Figure 5).
Figure 5. Screenshot of storyboard titled "Where's the Podsie app for my phone?" with the following panels:
- Panel 1: A frowning learner is sitting at a desk during class and is using their laptop. Their phone is making buzzing sounds for notifications next to their laptop on the desk. The learner says, "I want to be on my phone."
- Panel 2: A touchscreen phone is in a learner's hands, showing apps on the screen. The learner says, "I wish there was an app where I can access my Personalized Deck!"
- Panel 3: A smiling learner is reminiscing and imagining how fun their learning apps are with a flower character saying encouraging things like "Let's learn!' and "You can do it!". Their phone is making buzzing sounds on their desk. The learner says, "I would have more fun on this site where characters help me, like in my video games on my phone!"
- Panel 4: The frowning learner closes their laptop in frustration with one hand on their forehead and one on their laptop. Their phone is making buzzing sounds on the desk. The learner says, "This Podsie website is boring. I'm done for today!"
- Panel 5: The now smiling learner gets up and holds their phone in one hand and says, "I know! I'm going to go on my social media where I learn in about 6 minutes per post!"
- Panel 6: There is a close-up of the learner's phone screen that's on a learning app homescreen with encouraging character guides. The learner says, "This is worth my time! AND I love the colors!"
Next, I translated the mind map outline into detailed wireframe sketches that outlined the layout and structure of the Homescreen Page. These sketches acted as a blueprint using Getalt's design principles that I learned from Google's UX program below (Figure 6), ensuring a clear understanding of the elements and content to be included.
Figure 6a. Infographic from the Google User Experience (UX) Professional Program showing the Gestalt principle of similarity applied to a message inbox feed mobile page. It shows identical shapes and font sizes, consistent font usage, and uniform formatting.
Figure 6b. Infographic of the Gestalt principle of proximity applied onto a mobile app's article page with text and buttons from Google's UX professional program. The image shows what's acceptable (button immediately after paragraph) and not acceptable (space in-between paragraph and button) for button placement in a text-heavy article.
Figure 6c. Infographic of the Gestalt principle of common region applied onto a mobile app user profile page from Google's UX professional program. The image shows what's acceptable (navigation bar is not transparent and not showing text behind) and not acceptable (navigation bar is transparent showing text behind) for a profile that has scrollable articles.
To cater to different fidelity levels, I developed both Low and High Fidelity designs of the Podsie App Homescreen Page (Figure 7). Low fidelity designs focused on the basic layout and functionality, providing a quick and cost-effective way to explore multiple design concepts. Using the Figma design tool and the FigJam collaborative tool, high fidelity designs added visual polish and detail, allowing me to refine the aesthetics and user experience further (Figure 8). I used Podsie's web page color scheme for reference and popular apps like Headspace and Duolingo mobile app pages for inspiration.
Figure 7a. Low-fidelity wireframe paper Sketch #1 was not selected to move forward in design process.
Sketch #1 Notes:
Sketch #1 Notes:
- Main title needs to be added in high contrast to background (accessibility)
- Add main title [to squares] to be consistent if possible
- Consider having consistent all caps [titles] or other heading styles
- Is the [Go] button necessary? [for course elements]
- Highlight [home icon] page that the user is on with an accessible color
- Make sure icons and names of pages are consistent with web app (Gestalt principles) [in bottom navigation bar]
- Add a help feature like the one on Podsie web app that's titled "Get started" at the bottom right of screen
- Add feature like this [pointing to plus sign icon inside box] to add new courses via registration
- Consider using a short banner [top screen navigation bar] with profile icon, notifications, progress and messages from instructors or other classmates in same course.
- Top or bottom of user screen?
- Do we include Podsie logo somewhere as well?
Figure 7b. Low-fidelity wireframe paper Sketch #2 was selected to move forward in design process.
Sketch #2 Notes:
Sketch #2 Notes:
- Pick high accessibility font like Arial, Calibri, Tahoma, etc. for user-friendly reading [pointing at Personal Desk block]
- Do more research on affirming language [pointing at "Your struggling questions" block].
- Is "struggling" a positive word?
- Can we change it if needed? [from Podsie website application]
- Changed deck layout of courses for easy visual reference to more courses at once [pointing to course elements]
- This icon [pointing to faceless headshot] can also show profile information since this icon is associated with accounts
- Added messages and notifications features for updates [pointing to speech bubble and bell icons in navigation bar]
- Help button will answer common questions and have tutorial video shorts with designated character [pointing to help icon in navigation bar]
- Fix spacing on this [pointing to navigation bar] in prototypes to be evenly spaced for icons and text (Gestalt principles)
- Simple text and background colors with simple design shapes. High contrast accessibility [pointing to French 101 course element]
- Added more realistic course code information [pointing to Pre-Calcular MAT 160 course element]
- Added an addition sign button to add or register new classes [pointing to + symbol]
- Add affirming language with characters assigned to struggling questions [pointing to struggling questions element]
- Add affirming language and character to Personal Deck. Image size will cover entire area [pointing to Personal Deck element]
Figure 7c. Low-fidelity wireframe paper Sketch #3 was a more detailed version of Sketch #2.
Sketch #3 Notes:
Sketch #3 Notes:
- Consider culturally appropriate gestures (e.g. arm raising peas) and nuances to individuals that wear hijabs for cultural, religious or other reasons [pointing to character in Personal Deck block]
- Consider more facial expressions, varying skin tone colors, varying abilities and disabilities and gender expression in character [pointing to teacher in "Questions that need more practice" block]
- Consider data poverty and look into code and visuals that load easily with low internet connection or bandwidth
- Consider light and dark modes and more accessibility features
- 7 icons may be too many at the bottom side bar. 6 icons may visually fit better with design and space limitiation [pointing to bottom navigation bar]
Figure 8. High-fidelity designs of the Podsie Homescreen and Login pages using the web online design tool called Figma and it's collaborative space FigJam on iPhone 14 screen measurements.
Creating interactive and realistic representations, I developed Mockups touchscreen phones, like iPhones or Android phones, and did not prioritize desktop or laptop computer screens for this mobile app project (Figure 9). I used Canva Smart Mockups for fast iterations and used Adobe Illustrator to incorporate Podsie's logo. I carefully considered the needs of Podsie's organization brand and primary users – teachers or educators navigating the homescreen page and K-12 students accessing Podsie for learning in their respective classes.
Figure 9. Mockup of the final Podsie App Homescreen Page UX design iteration using Canva Smartmockups and Adobe Illustrator on an IPhone 14 touchscreen.
Throughout the prototype phase, I maintained a strong focus on the gamification elements, incorporating sound effects for button clicks, menu interactions, and character sounds. Short unique sounds, such as humming, grunting, laughing, and sighing, added an immersive touch, while longer unique sounds allowed for interactive speaking or narration experiences. These features will be important for future development with software engineers.
With a colorful and engaging theme, diverse characters from around the world were introduced to promote inclusivity and diversity in the learning environment. Additionally, the profile character customization option empowered users to personalize their experience within the app. In further development, I anticipate these characters showing up in the Personalized Stack and other navigation bar features, like the Help and Profile features (Figure 10).
Figure 10a. Learner characters slide 1. Designs created by designers on Freepik and Flaticon. Three learner characters are in this image. On the left, you see an androgynous smiling person with one earing, blue hair and a red beret. In the middle, you see a young confused kid learner with short brown curly hair and question marks above their head. On the right, there's a content teacher with medium skin tone color and black short hair.
Figure 10b. Idle characters slide 2. Designs created by designers on Freepik and Flaticon. These are three idle characters. The left smiling, female-presenting character has a blue hijab on and a thought bubble of a light bulb with a smiling face. The right two characters are supporting each other. One smiling male-presenting character has an arm leaning on the other sad character's shoulder.
Figure 10c. Mascot characters slide 3. Designs created by designers on Freepik and Flaticon. Three mascot characters. On the left, a pod of three peas. Each pea is smiling with it's own face. In the middle, there is a yellow duck blushing and throwing confetti in the air above their head. On the right, there is a colorful, smiling flower with two leaves on their stem.
Figure 10d. Instructor characters slide 4. Designs created by designers on Freepik and Flaticon.
Our prototyping process aligned closely with the sprint cycle style, allowing for continuous refinement and feedback incorporation. These prototypes laid the groundwork for the upcoming Test phase, where we would validate the designs and gather valuable user feedback to further enhance the Podsie App's Homescreen Page for optimal user satisfaction and engagement.
Step 5. Test
What works?
What doesn't work?
Roleplay usability
Iterate again
In the final and crucial phase of this UX design project, Test, I focused on validating and refining my design concepts for the Podsie App's Homescreen Page. With the objective of ensuring a seamless and intuitive user experience, I set forth on a comprehensive evaluation process to answer critical questions: "What works?" and "What doesn't work?"
To assess the usability of our design, I engaged in roleplay usability sessions, simulating real-life user interactions with the prototypes. As a former K-12 tutor, 6-8 math teacher, and biology professor, these sessions allowed me to observe firsthand how teachers or educators and diverse learners navigate the homescreen page. By gathering feedback and insights from these roleplay sessions, I received awesome, insightful user perspectives that informed my design decisions.
Additionally, I utilized the Use Contrast plugin in the Figma design tool and Microsoft Publisher to test text and background colors to assess if thus design meets WCAG 2.1 at level AA below (Figure 11).
Figure 11. Design elements from the Podsie mobile app homescreen page are being testing for accessibility on the Figma design tool with the Use Contrast plugin that checks that there is enough contrast between text and background colors. If the contrast is 4.5:1 or higher, then it passes Web Content Accessibility Guidelines (WCAG) 2.1 at level AA.
Based on the feedback and observations, I identified elements and features that required improvement and iteration. Most design elements passed the accessibility-check. There were some background colors that needed to be improved in a future design iteration because they were either at the 4.5:1 ratio or did not meet it at all, such as the Intro to French (barely met) and AP Psychology (did not meet) course elements (Figure 10).
Through rigorous analysis and discussions, I refined the design to address identified pain points and optimize the overall user experience. This iterative approach ensured that the final product aligned precisely with the users' needs and expectations. After applying peer feedback and considering test results, a new realistic mockup was made the color adjustments that now meet WCAG 2.1 at level AA (Figure 12).
Figure 12a. Before color adjustments and accessibility testing for high color contrast.
Figure 12b. After new color adjustments are made to meet accessibility WCAG 2.1 level AA standard.
As part of the testing phase, with future collaboration with software developers I would examine the effectiveness of the gamification elements, including sound effects for button clicks, menu interactions, and character sounds. I would then assessthe impact of short and long unique sounds, evaluating their relevance in creating an engaging and immersive learning environment.
Furthermore, I paid close attention to the colorful and engaging theme, verifying its resonance with the diverse audience and ensuring its alignment with the principles of diversity, equity, and inclusion in design. The characters, both in the support character guide for tutorials and throughout the app, were evaluated for their representation of diverse identities and cultures, ensuring inclusivity.
Throughout the testing phase, I adhered to the principles of the sprint cycle style and Gestalt's design principles, enabling me to continuously refine the designs and incorporate valuable feedback. This iterative approach strengthened the overall UX design, ensuring that the Podsie App's Homescreen Page not only met user expectations but also exceeded them. Our rigorous testing process will set the stage for a future successful product launch, delivering an exceptional user experience that empowered teachers and students alike in their educational journey.
In closing, I collaborated with designers using FigJam and I created a presentation using Figma to present below (Figure 13).
Results and conclusion
After this project, I learned the importance of listening to diverse learners during the research and interview phase of the UX design process. Getting a robust set of user data from many different intersectional identities provides a better user-centric product that reaches more learners with equitable opportunities.
With more time and resources, I would love to:
Explore the science of learning through gamification - It is well-known that games can often be a better learning tool for engaging learners. I would like to join a workshop in the near future about the evidence-based practices of gamifcation for learning apps and how that relates to inclusive and equitable design practices.
Work with more Subject Matter Experts (SMEs) - Learning more from accessibility, learning, culture and design experts is important to make sure the designs are validated before launch. Specifically, getting accessibility compliance checks on this app is critical.
Expand this project - Design more screens and user-interaction interfaces in Figma to show moving screens and common user interactions, live!
This project gave me the opportunity to use my own past experiences as a K-12 educator and biology professor, graphic and instructional design knowledge and new strong foundation on UX design practices to create a powerfully fun mobile app concept for Podie. If given the opportunity. I hope to make the entire product and observe metrics to meet the KSI for the clients Podise and Teaching Lab.
As always, projects are a great reminder that I am a life long learner and that there's always something new to gain with an open mind. Even seemingly boring science-based teaching and learning practices can be fun, engaging and accessible!
Acknowledgements
A big thank you to the resources below that helped me with this UX project:
Bitesize UX - Live workshops by lead UX designers that provide portfolio tips and upskilling tips to level up your current toolbox. They provide Figma templates on mini UX design projects to learn the basics of the design process.
ChatGPT - An artificial intelligence prompt interface that answers questions. This web application assisted me in giving me ideas to how to approach this project's write-up. I used some of the answers from ChatGPT with revisions.
Google UX Professional Program - A remote online program by Google on Coursera with project-based learning and certificates on UX design best practices.
Flaticon open-access icons - Talented designers created original icons and graphics to use for this project. Here are these awesome designers:
Sources
Adobe. (2023). Adobe: Creative, marketing and document management solutions. Adobe: Creative, Marketing and Document Management Solutions. https://www.adobe.com/
Canva. (2023). Canva Smartmockups. Canva.com; Canva. https://www.canva.com
Figma. (2022). Figma: the collaborative interface design tool. Figma. https://www.figma.com/
MeisterLabs. (2019). MindMeister. MindMeister; MindMeister. https://www.mindmeister.com/
Springboard. (2022, February 10). Complete a Beginner UX Design Project in 30 Minutes. www.youtube.com. https://www.youtube.com/watch?v=wN7ThtueEpM&ab_channel=Springboard
Standford University. (2012). Design Thinking Process. https://web.stanford.edu/class/me113/d_thinking.html
W3C. (2018, June 5). Web Content Accessibility Guidelines (WCAG) 2.1. W3.org. https://www.w3.org/TR/WCAG21/
Page updated
Google Sites
Report abuse