About: I co-led the Skōōl UX Design team at Bridgit.io, an EdTech startup. I oversaw a team of cross-disciplinary designers in the development and design of a virtual learning challenge POC.
Role: I was responsible for communicating with developers and the CEO, facilitating weekly meetings, creating design systems, conducting user research, information architecture, prototyping, user testing and content strategy.
Duration: December 2020 - March 2021
Tools: Figma, Ant Design (React UI), Trello, Slack, Miro, Google Drive, Forms, Sheets, Slides & Zoom
Our Goal:
To create a proof of concept (POC) for Skōōl's bridging challenge, called Bridger.live
What is Skōōl?
Skōōl is an online educational platform that incorporates on-page learning and building bridges to foster a fun and interactive learning environment.
What is a bridge?
A connection between any two pieces of information—images, text, video or audio clips—found on the Internet. These connections show a relationship between content, either supporting or contradicting.
Bridging Examples:
1. A college student writes a paper on international relations. They build bridges between contradicting and supporting news sources to help fact check and categorize their research.
2. A voter isn't sure who to vote for in an upcoming election. They explore bridges that others have built on the topic to better understand each candidate's political views and perspectives on relevant issues.
In this example, a bridger creates a bridge based on 2 pieces of contradicting information they find on an upcoming U.K. election
What is the bridging challenge?
A competition where individuals and/or teams create thought-provoking bridges on various topics to win prizes and scholarships.
Content Style Guide
As UX/UI co-lead, I was responsible for interviewing and onboarding new interns onto our team. I quickly realized the challenge of explaining Bridger.live terminologies to new volunteers. I started a content style guide to define vocabulary and help our team and developers be on the same page when building our concept.
Vocabulary from Bridger.live's content style guide, featuring important-to-remember terms
Design Process
1. User Interviews & Personas
We conducted Zoom interviews with teachers and students from different grade levels and backgrounds to better understand the landscape of remote learning. We created empathy and customer journey maps to assist in drafting 5 personas for the bridging challenge: middle school student, college student, host, curator and judge.
Student Empathy Maps
Student Personas
We created user flows to document a few main features of the bridging challenge: hosting a new challenge, building a bridge, curating bridges or joining a challenge as a team, individual or judge.
1 of 3 user flows I created for joining a challenge. In this scenario, a user wants to join a challenge as an individual OR a team. They enter at the landing page and end when they join a challenge.
3. Sitemap
Bridger.live is part of Presence, a Google Chrome web extension that allows users to build bridges and form online communities. We created a sitemap to demonstrate how Bridger.live fits into the developer's Presence extension sitemap.
4. Prototype
Our team selected 2 flows to prototype: joining and building a bridge for a challenge.
Bridging Challenge V3 Prototype
5. User Testing
We conducted 6 remote usability tests with students and teachers using our V3 Prototype. Tests consisted of interview questions, 6 tasks—while our interviewees shared their screens—and followup questions. After transcribing interviews, my co-lead and I led an affinity mapping session where we categorized quotes into various categories, including positive and negative feedback.
Design System
Our goal for the Bridger design system was to keep consistent with Skōōl branding. We followed accessibility guidelines and referenced Ant Design (React UI) and Atomic Design to create a master component library.
We decided to keep the Skōōl pink as our primary brand color. We exchanged light blue for Skōōl green, while still using green as a tertiary color. In general, our palette includes more neutrals and we use color sparingly. To ensure colors meet accessibility standards, we used the Stark plugin for Figma.
We selected sans serif font, Sofia Pro (Adobe), because it's easy to read.
I created headers and footer, with a way to access the Presence browser extension.
Next Steps
When I left the project, we planned to iterate the prototype based on user feedback. Eventually, we aimed to pilot the bridging challenge in a classroom setting with real teachers, students and prizes.
— Gamification —
Users wanted challenges to be more "fun and engaging." We hosted a brainstorming session and used the Octalysis framework to think about ways to incorporate gamification elements.
