SpARk by OPSkins

Educational Web & Mobile App Design




The Brief

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


THE CHALLENGE

Re-brand and design a new AR (augmented reality) product for use in education using client's existing marketplace infrastructure.

THE SOLUTION

A web app uniting the familiar visual cues from presentation software such as MS PowerPoint and OPSkins' existing marketplace infrastructure.


THE PROCESS

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

My Role & Responsibilities

Lead Researcher, C&C analysis, SWOT analysis, personas, user flow, card sorting, paper prototype, branding, high-fidelity InvisionApp prototype

Conditions

2 weeks at General Assembly

Tools

Figma, SketchApp, InvisionApp, Google Drive, LucidChart, MS PowerPoint, whiteboard, markers, Post-It notes



Research  

Evaluate & Analyze

User Research

Synthesization

Personas

Journey Map



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.


swot analysis



Key Insights

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


Educator Users
Student Users
Creator Users

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

Hai N.
College History Instructor

Our computers suck ... a lot of [the] computers in our 'smart classrooms' ... are very outdated and very old...

Jonathan M.
College ESL Instructor

Students are on their phone a lot ... it's not like when we were in school...

Gu L.
Middle School Biology Teacher



Key Insights

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

affinity map



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.

persona
journey map



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.


double diamond framework



Key Insights

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


c&c analysis



Key Insights

  • 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 

Feature Prioritization

Navigation

Sketching

Mid-Fi Wireframes

Branding



FEATURE PRIORITIZATION

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

mvp matrix



NAVIGATION

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.

wireflow
WIREFLOW



SKETCHING

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.

lo-fidelity wireframes
LOW-FIDELITY WIREFRAMES



USABILITY TESTING

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 with henry
USABILITY TEST: HENRY
usability test with monica
USABILITY TEST: MONICA



Key Insights

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



MID-FIDELITY WIREFRAMES

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.

wireframe 1
wireframe 2
wireframe 3
wireframe 4
wireframe 5
wireframe 6



DESIGN CRITIQUE

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.

pre usability test round 2
usability test round 2



RE-BRANDING

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 color exploration palette
COLOR EXPLORATION



spark by opskins logo
SPARK BY OPSKINS LOGO



spark by opskins app icon
SPARK BY OPSKINS APP STORE ICON



Web Prototype 

Hi-Fi Wireframes

Prototype



HIGH-FIDELITY WIREFRAMES

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.




opskins sign in
opskins account
opskins search
opskins marketplace
opskins review deck
opskins presentation mode



Design Iterations

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






Mobile Companion App Prototype