web site maker

UX/UI Design / Aerolab

Timeline: February - June, 2017
Role: UX/UI Design Intern
Function: UX/UI Design
Tools: Pen&paper, Sketch, Adobe Illustrator, Adobe photoshop

Aerolab is a leading UX agency that crafts digital products of all sorts. Based in Buenos Aires, it also serves clients from the US and Canada. I got to work on two very different but equally exciting projects during my time here; one was a complex digital learning platform, the other was a crypto-currency business. I worked closely with the designers and PMs on both projects and was fortunate to have been mentored by Juani, the UX director at Aerolab. 

Project #1: Nearpod Matching Pairs Feature 

The Challenge

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.

Mobirise

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. 

The Research

BENCHMARKING

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.

Mobirise


TEACHER REVIEWS

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..." 

Common Sense Education EdTech Tool Review


FEATURE AUDIT

I took a deep dive into other activity features on Nearpod to figure out why the creation process was time intensive. I summarized the major reasons below that were preventing the educators from creating activities easily. The key to the user flow for creating the game is to minimize the friction of starting making a game.

Mobirise

Designing the Solution

USER FLOW

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. 

Mobirise


WIREFRAMES

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. 

Mobirise


VARIATIONS

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).

Mobirise


GRID CONFIGURATION

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. 

Mobirise

WRAP-UP

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.

PAPER FIRST + START SMALL

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.

Mobirise

MOBILE FIRST IN ACTION

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”.

Mobirise


DESIGN PRODUCTIONS

Highlights of some of the pages that Gab and I designed. Check out the Career Page that's alive on XAPO's website.  

Mobirise
Mobirise



FINAL WORDS

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? :)

Mobirise

Thanks for viewing! Check out my work at Scoop?

© Copyright 2018 Qiqi Xu - All Rights Reserved