Angelynn Liu
Interdisciplinary Designer
Based in Beijing + Los Angeles
iCivics
ROLE: USER EXPERIENCE INTERN TIMELINE: MAR - AUG 2023 TOOLS: FIGMA, AIRTABLE, DRUPAL
iCivics is a non-profit organization that provides virtual games and learning materials to engage students in meaningful civics learning. WebQuests, a long-standing product, engages K-12 students to practice critical thinking and connection making when analyzing online sources and engaging with digital media.
This case study walks through my process of conducting user research and redesigning the desktop and mobile versions of WebQuests.
THE PROBLEM
How might we meet the changing needs of EdTech users while maintaining the learning experience of WebQuests?
WebQuests is a unique offering in the field of educational technology (EdTech) tools as each one incorporates multiple online sources while simulating the real-life process of analyzing digital media. It’s also one of our longest standing and highest used products, with 4,000+ monthly users.
Insights regarding the rapid changes in EdTech and an influx of support tickets received from students and teachers over the past several years all pointed to the need of a major refresh.
PREVIEW
① Unclear and missing features resulting in repetitive actions and errors
② Several accessibility issues with readability, links, and images
③ User interface was not aligned to iCivics’ brand guide and design system
① Combines steps to reduce clickstream and common errors
② Introduces new features to meet discovered needs of existing users
③ Prioritizes an intuitive visual hierarchy, accessibility, and consistent brand identity
USER RESEARCH
What unmet needs and expectations have yet to be considered?
I conducted user interviews with 5 students with the aim to understand how users are navigating our current product and to identify user needs, in addition to gaining insight on competitors and how their features perform in comparison. The following questions were at the forefront of my research process:
- How are users navigating through our current version of WebQuests?
- How can we draw inspiration from features of similar websites to create a coherent and efficient experience for our users?
- How can we simplify our mobile version while maintaining the integrity of the learning format?
I prompted participants to simulate completing a WebQuest independently and relied on contextual inquiry to observe their flow and behaviors. I encouraged users to attempt resolving pain points on their own and followed up to inquire further about expectations, potential unmet needs, and likes/dislikes.
KEY FINDINGS
Which insights from our research will inform our redesign?
- Users expected repetitive actions to be automated or combined.
4/5 users spent excessive time navigating back-and-forth between external links and lost track of their tabs. Additionally, 2/5 users forgot to click ‘Respond’ to save their answer before continuing to the next question, losing their typed response. Without indication if a WebQuest was submitted, users weren’t sure how to proceed after finishing their task.
- Users seek clear, organized format to input their answers.
All users would number, bullet, title, or space out their responses when inputting their answers in the textbox. 2/5 clicked on the blanks for fill-in-the-blank questions, expecting to be able to input answers directly.
- Users are motivated by feedback.
Users wanted to know whether answers were correct and asked how they would receive a grade or feedback from their teacher.
REDESIGN PROCESS
Experimenting with a single-tab experience, multiple answer formats, and introducing new features.
I went through several iterations throughout the designing process. The visuals below highlight my main explorations. Other things I kept in mind were improving accessibility of links, videos, and images and adhering to a consistent and intuitive design system and visual hierarchy.
Users need to open external links and navigate between multiple tabs while completing their WebQuest. Initially, I explored the possibility of a single-page experience by embedding external content in iFrames to reduce time and frustration from moving back-and-forth through several tabs.
To reduce the extra effort users contributed to numbering/bulleting/sectioning their answers, we customized the answer field formats to best suit each question (fill-in-the-blank, short answer, and long answer). We also divided multi-part questions to separate sections to reduce errors and ease the grading process for teachers.
To assist with the slight learning curve of the product, we created a help button that highlights key features and provides chronological directions on how to navigate the current page, with different tips for varying page types.
Previously, users had to manually navigate back to review their responses. They also had to click a button and hit save in order to edit answers. Now, we implemented an auto-save feature to all answer fields. I experimented with a review page that allowed users to check and directly edit all answers prior to submitting.
We discovered the mobile version of WebQuests was regularly used in classrooms or homes where desktops/laptops were not available. Among other design improvements, I proposed a fixed pagination and improving the size of touch targets on mobile devices to ease navigation.
I scheduled weekly critiques with the product design team, conducted additional rounds of user testing after each iteration, and monthly sprints with our developers.
Negotiating between the capacity of our engineers and the needs of our users was a worthwhile struggle that regularly challenged me to pivot. For instance, iFrames were rejected due to security concerns and arguments that it would inhibit the purpose of the product to simulate the real-life learning process.
FINAL DELIVERABLE
Delivering a refreshed desktop and mobile experience.
The final deliverable focused on delivering an intuitive visual hierarchy and cohesive design system, accessible links and images, expanding the default text field to three customized answer formats, introducing start/end and review/edit pages, and fixed navigation on the mobile version.
NEXT STEPS
Transitioning from design to development.
While my time at iCivics has wrapped up, the process of refining a product is never truly over. I passed along documents regarding my research methods, findings, and archived ideas for the team to revisit when the opportunity for another refresh arises.
REFLECTIONS
This redesign project challenged me to be creative outside my role as a designer but a researcher as well–learning to switch between the perspectives of educator and student to create designs that are functional, data-supported, and always places the user first. After many pivots, I am proud to finally deliver a refreshed product that effectively and mindfully engages our younger generation in civics learning and media literacy.
Thank you to Libby and Michelle for all the mentorship – for allowing me to pick your genius brains for feedback and for encouraging me forward through the ups and downs of this role!
This case study highlighted a research and redesign project I worked on from start to finish but I have hopped on many research projects throughout my year and a half at iCivics. Reach out to chat more!