Delivering high-quality digital experiences for clients
Project 1 / Nearpod Matching Pairs Feature
Nearpod is an interactive slideshow tool for classrooms. The platform combines presentation and assessment for teachers to engage with students and gain real-time feedback. A slide can be static media, or an activity (quizzes, polls, etc). When I was introduced to the project, the client and the team at Aerolab has just begun to upgrade an outdated activity feature.
The Memory Test feature was intended for students to match previously revealed card matches and has a rather limited pedagogical value.
To provide more pedagogical value, the new feature, Matching Pairs, would challenge students to match related but non-identical cards and think about relationships and associations.
The Matching Pairs will be more useful for the teachers as it can be used for vocabulary, concepts, etc. I worked with the designer leading this project, Fran, and focused mainly on the teacher's creation process, while taking into consideration the teacher's and student's view during the game.
We started from looking into benchmarks (such as the word matching in Duolingo) to gathered effective details, of both UX and visual design, that we should be mindful of in our approach to the redesign. Below is an example, from EducaPlay's matching game.
Although it was difficult to speak to teachers due to the location difference (the client is based in the US while we were in Argentina), I scouted the web for teachers' reviews on slideshow and educational game products, and the key learning was: while educators love the interactive in-class activities (matching pairs would be one of these) and real-time feedback, they find the process of creating and customizing very time-intensive and frustrating.
"Cons: Creating and modifying presentations can be time consuming and can get expensive..." -- EdTech Tool Review, from Common Sense Education
I took a deep dive into other activity features on Nearpod to figure out why the creation process was time intensive, and identified the major reasons below that were preventing the educators from creating activities easily.
The problems with these features' creation process include:
- Too many possible actions for users to take on, but doesn't provide guidance;
- The process get tedious for teachers as there is no ways that they can "bulk import" content into the slides / cards;
- Lacks indicator progress for teachers to keep track on where they are in the creation process.
Designing the Solution
With all the information gathered above, I set out to devise a user flow that minimizes the friction of starting making a game. At this stage, I learned that some functionalities would be unrealistic to ship this round due to the competing priorities of the tech team, so bulk import didn't make it to the flow for this round.
Upon finalizing the flow, we moved on to wireframing. Visual focus is crucial to creating a frictionless experience for educators to easily start building a game and adding the first pair. Below you can see that in action.
Focusing on a specific part of a feature allowed me to explore in depth different ways of solving the same problem, and the compatibility and implications these alternatives would have within the larger system. I appreciate the feedback from UX director, Juani and lead designer, Fran in this process.
Below are alternative layouts for the empty state (left) and the editing pop-out(right).
The set-up of the interface needs to align with how the product adapts to various screen sizes when students play the game on their end. Therefore it is important to specify the grid configuration with the aim to fully utilize the interface on the teacher side and ensure a smooth transition as the number of cards increases.
I presented the full flow and after multiple iterations at a design critique to the designers of other teams and received highly valuable feedback the design and gained a holistic view of pros and cons of different solutions. I wrapped my part of the project at the wireframing stage for Fran to integrate this into the full final design deliverable to the client and started my next project the day after the design critique.
Project 2 / XAPO Website Pages
Xapo is a mobile Bitcoin and multi-currency wallet. Founded by Argentinian entrepreneurs, XAPO has been a long-time client with Aerolab. When I was onboarded the project, XAPO wanted to upgrade their communication designs on the web to increase users base and bring bitcoin closer to users. Accordingly, the team outlined two guiding principles for this project:
- Highlighting the security factor of XAPO
- Humanizing bitcoin in people's daily lives with localization (as part of their SEO effort)
I worked alongside with the amazing designer on the team, Gabrielle, from research to wire-framing and to UI design of various landing pages.
This duo was the secret sauce of the project. Visualizing our thinking on paper frees up mental space to evaluate variations and further develop our ideas. By starting small, with wireframes of the lowest fidelity possibly, we force ourselves to pinpoint the most important information and therefore are able to develop an information hierarchy that is hard to arrive at without a “zoomed-out lens.” This information then defines the typographic hierarchy and the specific design decisions that impact focus of the page, such as color, font weight, and alignment.
Mobile first and Modular design were the not-so-secret weapons that enabled us to move at lightning speed.
I learned the nuances of designing for different screen breakpoints, and the considerations that had to be made in order to keep the rhythm and visual focus on different screen sizes — such as the framing of the pictures, the row length of a table, the visual weight of CTA, and so on — these all need to be adjusted to comply to the screen size that they live on albeit the existences of a rough pattern.
Modular design provides the grid, which is the guideline to assemble the design, but ultimately the design process takes place when the designers scrutinize the page as a whole and tweak the components differently so the experience across different breakpoints looks “the same”.
Highlights of some of the pages that Gab and I designed. Check out the Career Page that's alive on XAPO's website. Thoughts
The three months working at Aerolab while being a full-time student at a design-unrelated program was demanding but at the same time insanely rewarding. I am incredibly grateful to have the opportunity to work alongside stellar designers in a stellar space — which made working feel like a break from school to me. Aerolab published a more in-depth piece I wrote about my AeroExperience. Give it a read on Medium? :)