Brand and product pivot to bring existing infrastructure into education.
OPSkins (at the time of this writing) is an online 3rd-party marketplace that sells digital assets for various first-person shooter games in the form of 'skins'. Skins are vanity assets that act as a way to visually-customize one's appearances in-game. Following pressure from Valve (the parent company for one of the games served by OPSkins) to cease and desist, OPSkins is now looking for alternative ways to stay in business and use their marketplace infrastructure by expanding into educational AR (augmented reality).
Re-brand and design a new AR (augmented reality) product for use in education using client's existing marketplace infrastructure.
A web app uniting the familiar visual cues from presentation software such as MS PowerPoint and OPSkins' existing marketplace infrastructure.
On this project, I was able to complete the UX process through Step 5, going back and reiterating on an earlier design to incorporate branding and other usability adjustments.
Step 1: RESEARCH
Step 2: DESIGN
Step 3: PROTOTYPE
Step 4: TEST
Step 5: ITERATE
Lead Researcher, C&C analysis, SWOT analysis, personas, user flow, card sorting, paper prototype, branding, high-fidelity InvisionApp prototype
2 weeks at General Assembly
Figma, SketchApp, InvisionApp, Google Drive, LucidChart, MS PowerPoint, whiteboard, markers, Post-It notes
Evaluate & Analyze
EVALUATE & ANALYZE: SWOT ANALYSIS
For OPSkins to make such a major business decision to pivot into education, our team decided that a SWOT analyis was an appropriate first step to to understand their business and its health, leveraging the information to better inform our design.
- OPSkins has brand recognition as a dealer in digital assets.
- They have the business capital to be able to further invest into their marketplace framework.
- AR in education is a relatively new concept and has a lot of potential.
USER RESEARCH: INTERVIEWS
As we explored and discussed the use scenarios for AR in education, it became clear that this project has 3 distinct users whose needs and pain points would require different interfaces to resolve: Educators, Students, and Creators.
Given our constraints, we decided to focus on designing for the 'Educator' user type first as it would provide a consumer for the client's marketplace as well as make the most meaningful impact in education through direct access to classrooms.
Our team was fortunate enough to have access to educator contacts and so we began conducting user interviews to understand educator pain points as well as gauge their familiarity with AR technology, especially within a classroom setting.
[Teachers] just don't have the time to stay up to date with the technology. I just stick to my PowerPoints...
Our computers suck ... a lot of [the] computers in our 'smart classrooms' ... are very outdated and very old...
Students are on their phone a lot ... it's not like when we were in school...
- Today's classrooms lack the technology needed to do more than basic presentations.
- Educators lack the funding and administrative support to pursue additional teaching resources (such as AR technology).
- Students are on their phones a lot during class- it's disruptive and interferes with the learning environment.
SYNTHESIZATION: AFFINITY MAPPING
To help the team visualize recurring pain points and areas of discussion, we built out an affinity map to identify patterns and "hot spots" from our research.
USER RESEARCH: PERSONA & JOURNEY MAP
Through insights gathered from our interviews, I compile trending traits, motivations, and pain points to create a persona that helps stakeholders empathize with the user and their needs.
SYNTHESIZATION: ALIGNING BUSINESS GOALS WITH USER VALUE
The client wanted an obvious digital solution to address their business problem however, their idea to tap into the educational market lacked context and understanding; it doesn't take into account their users and whether such a product solved any real world problems: Did it have value? To answer this question and to align OPSkins' business goals with the needs of our persona, Jonathan, our team conducted a design studio using the 'Double Diamond' framework to explore ways we can assist Jonathan and create an impactful product for OPSkins.
- We are going to assume the assets will be provided by OPSkins through their business capital.
- A marketplace for AR assets will require a way/place to use said assets.
- While a mobile app is more accessible, it costs more to build and is limited in its ability to create educational content; a web app is a better alternative for Educators.
EVALUATE & ANALYZE: COMPETITIVE & COMPARITIVE ANALYSIS
Now that we know that we are designing some type of web application for an Educator, we begin to search both the Android Play Store as well as Apple iTunes as a starting point in understanding what kind of educational applications are currently on the market. We also search the web for educational AR software.
- Most existing educational AR software utilizes a library that comes with their application and/or subscription.
- Student engagement is a recurring selling point for all of these companies.
- The ability to customize AR projects/experiences is crucial to empowering educators.
Design & Testing
To determine the scope of the project and where to concentrate my efforts for the MVP, I create a feature prioritization matrix to visualize which features would make the most impact at the lowest cost to create (first quadrant).
Educational AR is still such a novel tool that there is very little precedent in the way of what interfaces look like and how navigation schemas are organized so we focused our efforts on use cases and let that guide our design. Our interviewees expressed familiarity with using Microsoft PowerPoint and Google Slides so we modeled our wireflow to reflect this.
Equipped with our research and an idea of the navigation schema, we conducted a short design studio to sketch out our initial designs into lo-fidelity wireframes.
As the project had many variables and we wanted to ensure we stayed in scope while getting user feedback, we decided to begin usability testing using our lo-fi wireframes before committing to a higher fidelity.
SCENARIO: You are trying out a new educational app to engage your students.
TASK: Create one presentation slide containing the AR model of an animal cell.
USABILITY TEST: HENRY
USABILITY TEST: MONICA
- Users were confused with our 'field of view' screen set up and reported that they "don't think they will use it".
- Users didn't understand the difference between our 'Add Image' icons and 'Add AR Asset' icons.
- Users expressed that they were overwhelmed with the sheer amount of filters when they began to search for AR assets.
Noting the feedback from our first round of usability testing, we proceeded to digitize our sketches while applying design principles such as visual weight and effective use of white space.
To further refine our design, we conducted a design critique and invited other designers outside of our team to make notations of what they appreciated, where they were confused, and areas they felt were not best practices. To help them with this task and to gain insight into how they understood our interface and copy, we brought certain screens to a higher-fidelity and assigned the same scenario and task from our usability test to guide their journey.
We understood that OPSkins' pivot into education from a reputation as a gaming/first-person shooter marketplace meant that we could not continue using their existing branding without causing some degree of friction with our demographic of educators, students, and their parents. So we decided to remedy this through the creation of a subsidiary brand called 'SpARk' with its own branding geared towards learning and AR technology. .
SPARK BY OPSKINS LOGO
SPARK BY OPSKINS APP STORE ICON
Building upon our mid-fidelity wireframes, we added images and applied the color palette we created for SpARk. We also corrected color affordance issues, text sizing, and copy.
- We added a slider with accompanying text to help users understand the 'field of view' functionality as it reviews AR assets in context.
- We added clarifying texts to our icons to help the user understand what they are selecting.
- We reduced the number of possible filters and also included a way to minimize sections when searching for AR assets.