Embedder by Google (UX Design Project walkthrough)

Dwayne McFarlane
UsabilityGeek
Published in
6 min readFeb 5, 2020

Timeline: 2 Weeks • Materials: Sticky Notes, Pen, Paper, Sketch, Invision, Wordpress

UX Techniques: Business Analysis, User Interviews, Surveys, Secondary Research, Affinity Mapping, User Flows, User Personas, Sketching, Wireframing, Prototyping, Usability Testing

Embedder by Google (UXDesign Project)

Background & Task

General Assembly(GA) is a is a private, for-profit education organization that provides courses in mobile and software engineering, data science, product management, and other digital-related courses. The GA student experience can require long working hours on campus and sometimes on weekends. At times, this can result in issues with time management while trying to
maintain a school/life balance.

GA has hired my team, CodePro UX Designers to explore and discover a solution that will support the holistic student experience. Through research, my team will aim to discover how students currently manage their school/life balance and what applications they use to help them.

Challenge Accepted

User Research

Since our target user for this project were bootcamp students at General Assembly, we went straight to the source to start our user research. To begin the process, we formulated interview questions that were designed to better understand the typical bootcamp student’s day while enrolled in the program and the 3 months immediately before starting the bootcamp program. By asking identical questions about two distinct timeframes, our goal is to understand what aspects of daily life remained the same, what aspects changed, and more importantly to what degree.

Initial User Interviews

The user interviews provided us with a tremendous amount of information that we then had to review and organize in order to start gaining insights from all the information compiled. This phase allows us to identify any areas of opportunities that we can focus on throughout the rest of the UX process for this project. A major take away from the user interviews was that users really love the apps that they use in their personal lives. They wanted a bridge between those apps and the apps that they are required to use for the bootcamp. With this information in mind, we knew that we didn’t want to recreate the wheel by creating an entirely new app, simply just work at better integrating the apps our users love with those that they are required to have.

Sample Questions | Pre- Bootcamp — User Interviews

1)What were your major time commitments/responsibilities in the three month period immediately before starting the bootcamp?
2) Walk me through a typical daily routine during this period.
3) Were any of these commitments prioritized?
-a)How would you prioritize these commitments?
4) Did you use a schedule?
- a)If so, how did you schedule your management of these commitments?
5)Did your pre-bootcamp schedule allow for leisure activities or activities
not mentioned in your previous response?
- a)If, so what were they?
- b)Did you schedule these in or did you just do them on the fly?
- c)If scheduled, how did you go about scheduling?
- d)If specific apps/devices/systems used, describe a typical scheduling
interaction.

After reviewing the transcripts/ audio recordings and notes taken from each interviewee, we transferred the insights onto color coded post-its. After three rounds of rearranging the insights by similarities, trends began to emerge. These trends were then labeled with I-Statements which are short phrases that help describe a user need.

Insights derived from 3 rounds of affinity mapping

Persona

The insights gained from our user interviews and affinity mapping process were used to create a persona named Stephanie. Personas, fictional characters created to represent a user type that might use a site, brand, service, or product are critical in the UX design process. Personas help facilitate the process of thinking and designing from the standpoint of our users, in this case, Stephanie.

User Persona, Stephanie

Problem Statement

A problem statement is a clear description of the issue or problem. It’s a clear, concise description of the issues that need to be addressed and it is used to center and focus the team at the very beginning to stay on track.

This is the Problem Statement we developed for this project based on our research:

Students enrolled in intensive bootcamps want an inclusive app that will help them stay engaged, focused, organized & responsible.

Stephanie has limited time and is overwhelmed by the rigor of her bootcamp, however, she would like to be able to quickly schedule events, prioritize her day, or stay up to date with her friends and activities outside of bootcamp.

How might we help her find integrative solutions that will work for both her bootcamp program and personal life?

Design Process

Because our research revealed that bootcamp students at General Assembly wanted to keep the apps that they loved while integrating them with the apps that they need to use, namely the G-Suite, we decided to create an extension of the Google Utilities connections feature called Embedder. This new feature will allow users to embed various types of engagements (text, internet searches, news articles, etc.), into the G-Suite. Once embedded, Javascript listeners will then listen for specific keywords that will then be used to trigger applicable Google services. For example, if the listener detected a conversation where an address was listed, the embedder feature would ask the user if they wanted to map the address in Google Maps.

Prototyping

Prototypes are used to quickly and inexpensively understand and see how a product or application works, what it does and how you should interact with it. They’re simulations of how a finished product will work. Sketches, wireframes and mockups serve other purposes in the design and prototyping process. For this project, we employed low-fidelity paper wireframes, mid-fidelity wireframes and click-through prototypes.

Prototyping & Testing of paper wifeframes

Mid-Fidelity wireframe testing were conducted with three users.

Users were provided with a scenario where they were expecting to receive important information about a party from one of their contacts via the Whatsapp app. Users were then tasked with exporting the specified Whatsapp conversation to the Google utilities app.

Once exported, users had to open the specified conversation in the utilities app and then map the provided address of the party directly from within the imported interface.

All users ranked the prototype 5/5, with 5 representing an experience that was very satisfying. User’s remarked that the prototype was “Easy to understand and navigate,” “Intuitive,” and “highly optimized with minimal steps.”

Next Steps

  1. Build connections/integrations with the top 30 apps and news sites
  2. Iterate
  3. Iterate
  4. Iterate
  5. Hand off to developers.

Want to learn more?

Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Online UX courses from the Interaction Design Foundation can provide you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!

--

--