Space Academy
End-to-End UX Research and Design
May 2019 - September 2019
Overview
The Problem
Recent years have seen a major resurgence in the public’s interest in space, following a revitalization of the space industry. Unfortunately for many who would like to learn more about space and related topics, most learning opportunities on the subject are expensive and/or are not easily accessible. The result is that there is a gap in educational resources for users with a strong desire to learn more about space.
My Role
I worked on this project as an independent UX Designer, so I was responsible for executing every step of the UX Design process - including research, interaction design, and UI design. Additionally, I worked closely with an experienced UX Design mentor and a number of sample users for feedback throughout the process.
My Design Process
Research
Competitor Research
The first step on the path to identifying a solution was to conduct competitor research to see what others have already done in trying to resolve this problem. For this research, I evaluated a number of competitors from various platforms based upon a heuristic analysis of the solutions they offered. See the corresponding chart for a summary of the top five competitors.
Competitor Analysis Table Summary (see enlarged)
User Research
The next step was to begin working directly with sample users to get their thoughts on the problem space. To find these sample users, I sent out a screener survey and selected the top five who best met my desired characteristics to conduct remote user interviews with.
User Interview #2 (see interview script)
The four core areas of the user interviews were:
Background Questions - to understand the user’s general behavior
Space Questions - to understand the user’s thoughts on the topic, and what they wanted to learn about
Learning Questions - to understand the user’s thoughts on learning styles and frustrations
Debrief Questions - closing thoughts on everything discussed, and time for user to ask questions
“I like the idea of a step-by-step approach, because I don’t know what I don’t know”
“It’s good to have a checklist of what is successful and what is not. For me, it’s helpful to know that I’m learning the information correctly.”
Analysis
Affinity Mapping
After my interviews, I analyzed my notes to look for what behaviors, goals, and needs my users had in common. From my notes, I organized key takeaways from each interview into an affinity map so that I could group them together into common themes to account for in my solution designs.
Affinity Map Summary (see enlarged)
Empathy Mapping
While the affinity map above allowed me to find the similarities among my users, I then sought to find the key differences that would identify distinct user groups within my user base.. Reviewing my notes again, I looked for key details that would give me an empathetic insight into the users and consolidated these notes into an empathy map. It didn’t take long for two clear user groups to emerge; creating the foundations of my user personas - The Explorer and The Stargazer.
Empathy Map - The Explorer Persona (see enlarged)
Personas
Using results from my affinity and empathy maps, I created user personas to illustrate the high-level similarities and differences between users. These personas were used to represent the user base throughout the design process and ensure design decisions were made with the users in mind. Below is a summary of each persona:
User Persona - The Explorer (see enlarged)
User Persona - The Stargazer (see enlarged)
Ideation
User Stories
To begin the Ideation Phase, I created user stories to focus on the conceptual elements of my solution. This approach helped me focus on what tasks users would want/need to complete, and what functional requirements would be necessary in a solution.
User Stories Diagram (see enlarged)
Information Architecture
Having identified my core functional requirements from my user stories, I was then able to start thinking about what specific pages and navigational structure I would need within my solution. As I was making my list of pages, I organized them into an information structure called a sitemap – which essentially gave me an easy-to-read blueprint for my solution to design.
Information Architecture - Sitemap (see enlarged)
User Flows
Next, I built user flow diagrams to illustrate how users would go about completing their tasks within the proposed information architecture. These diagrams focused on the three “red route tasks” which are the most critical to the solution’s success:
Login/Sign Up Process (to the right)
Course Selection Process (see flow diagram)
Course Progression Process (see flow diagram)
Login/Sign Up Process Flow (see enlarged)
Design
Sketching
Following the conceptual Ideation Phase, I moved into the Design Phase and started creating early solution prototypes. My first prototypes were low-fidelity pencil sketches so that I could iterate through many ideas in a short amount of time.
Earliest Brainstorming Sketches:
Onboarding Process (see enlarged)
Left - Course Selection Page; Right - Course Module Page (see enlarged)
Advanced Sketches
Welcome/Splash Page
Home Page
Courses Page
Course Module Page
Wireframes
Following the successful tests of the sketch prototypes, I started designing digital wireframe prototypes – focusing on the overall user flow and content structure. Creating on a digital platform, I was able to use higher-fidelity visuals and had more screen size to work with for my layouts - resulting in a cleaner design.
Welcome/Splash Page
Featured Page (formerly named “Home Page”)
Courses Page
Course Module Page
Style Guide
Prior to starting on my final high-fidelity designs, I chose to create a style guide. With this approach, I made a set of design rules to ensure consistency in my design elements across all prototype screens. Additionally, as I was designing for Android device, my style guide was based on the latest Material Design standards.
Style Guide (see enlarged)
Final Prototype
Following the design principles from my style guide, I created the final high-fidelity user interface (UI) screens using Adobe XD. Next, I uploaded the screens into InVision to create an interactive prototype. Using the prototype, I conducted two rounds of usability testing to get direct feedback from users.
Welcome/Splash Page
Featured Page
Course Page
Course Module Page
App Demo
Results
The results were promising as all users could complete the primary red route tasks and many gave positive comments on the overall flow and layout. During the testing there were some small issues identified by users, but the vast majority were corrected after the first round of usability testing and only a handful remain to be incorporated into the next updates.
“I like the length of the learning module - it’s good for mobile use.”
“I like the overall layout of the course, and how simple it is.”
“Definitely reminds me of a school experience, and matches what I would expect.”
Success Metrics
Upon app release, below are some of the top metrics that can be used to measure the app’s success:
Number of app downloads
User growth and retention rates
User activity rates (how often users are using the app)
Enrollment numbers for each course
Course completion rates
Ratings and feedback on each course
Ratings and feedback for the overall app (from the Google Play Store)
Review feedback provided by users on social media platforms
Conclusion
Next Steps
Some of the next key steps to take this project further are:
Iterate on hi-fidelity prototype designs to resolve the remaining minor issues
Work with educational resources to develop real course content and test it
Work with developer resources to build the code of the app and test functionality
Lessons Learned
Some of the key highlights I’ve learned from my time with this project are:
Proper use of whitespace is essential to making a design look clean and easy to read
I was able to familiarize myself with the latest Material Design Standards for Android devices
The use of primary vs secondary navigation buttons (blue vs white buttons in my designs), can be very useful in helping direct users where to go