"By Vets for Vets"
The purpose of OUTPOST is to address suicide among veterans which is currently at an average of 22 veterans per day. We can help provide a safe space outlet for veterans to come together, schedule games, attend group chats, and have the opportunity to talk with other veterans.
Where Veterans connect through gaming
The Framework
There are many methodologies to follow, we decided to adopt a 4 phase framework to guide us through the process of ideation. Throughout this process, user feedback and testing gave us the opportunity to iterate and make OUTPOST a seamless experience.
Discover: Research what we want to learn via the real world and the virtual world
Define: Find out who the user is and understand their needs and values=opportunity
Design: Conceptualize ideas into sketches, wireframes, and mockups
Experiment: Test, enter feedback loops and launch. (On Repeat)
During our research phase, we found various sources that recognize Veterans suffer from post-traumatic stress disorder (PTSD), depression, and emotional distress, making them more likely to isolate. We dug deeper and found recent testimonials on how gaming plays a positive role in the lives of active or retired veterans.
Desk Research & Data Collection
Social Listening
Search Listening-AnswerThePublic
Veterans are searching for ways they can connect to other gamers while becoming part of a like-minded community of support.
Competitive audit
We decided to audit Twitch & Discord (gaming platforms) as our out of market example, we found their designs user friendly and their brand awareness is consistently present.
Vertical-Specific Audit
Organizations such as StackUp.org is an online platform. Their page features different programs but there is no clear CTA, which makes it hard to complete a task.
Persona
Based on the interviews and surveys we conducted, our persona was our source of inspiration when designing. We referred to the pain points and included features to help them navigate and solve their obstacles.
How can we connect veterans through gaming while providing mental health support?
In the moment consensus.
Feature Ideation Session and Key Performance Indicators
For features we used Hyper Island Methodology and discussed the How Might We's.
Minimum Viable Product
Best Features to develop
To find our Minimum Viable Product we used the MoSCoW prioritization method. Our team came to an agreement on our Must haves, Could haves, Should haves and Won't have.
User Journey Map
User journey map is a visualization of an individual's relationships with a product/brand over time and across different channels.
Sitemap
Sitemaps are the structure of a website, they provide information about the pages, videos, and other files on a website, as well as the relationships between them. Search engines, such as Google, read these files to track websites more effectively.
Flowchart
The flowchart below depicts the journey the user will take to reach a game category page or their group chat.
Screen Sketches
The first step to our design process was sketching down our ideas on paper. We wanted to incorporate a group chat and a 1-1 chat option. Additionally, we added a user-facing profile, where users can edit their profile and available game time slots.
Wireframes
In the global nav, we decided to include two main elements: the hamburger menu and logo, giving it enough breathing space.
For our utility nav, we have a profile icon should users want to log in or create an account.
Iterations
Iterative design helps us stay on top of changes that need to be made as they come up, making our design more efficient.
Moodboard
We drew inspiration from existing meditation apps and military themed collages/illustrations. While choosing colors we searched to express calm, nobility/integrity, and trust.
Mockups
Our team collaborated by giving each other the opportunity to showcase a part of their personality into the design. This is how we brought our black & white wireframes to life.
Homepage
Fixed navigation; simple but action oriented
Our hamburger menu hamburger helps the user navigate to complete tasks
Clear CTA converts users as members
We followed best practices by including 5-7 items displayed for quick user “scanibility”
Create Account/ Sign in
Easy log in through existing accounts such as ID me (Veteran ID #) or Playstation.
Followed Luke W’s Web Form design best practices, with top and left aligned labels which enables users to complete easily and quick.
Find a group or 1-1 chat
We applied heuristics through exit and back buttons giving the user freedom to navigate and perform actions.
Choose a game time slot
Followed rule of thumb by keeping button height a 44 px
Personalized items giving user options; dropdown
Design System
We decided to choose 3 fonts: our logo is Unica One and headlines; Cabin with a bolder stroke to highlight sections. Our body copy is Montserrat font for a simple and clean looking web design. The family font has nine styles to choose from, from thin to black. As a sans serif, it has good readability.
We drew inspiration from the Pantone 2021 Color Trends for our color palette. We used cool colors: blue (Nobility) and green (Pepper Stem) with a hint of a warm color: orange (Iced Mango).
Web Content Accessibility Guidelines
Alternative Text for Images: Information is available to people who are blind, as well as to people who turn off images.
Keyboard Input: An accessible website makes all functionality available from a keyboard.
Testing & User Feedback
It is important for OUTPOST to evolve, we shared our prototype link with Veterans, friends & family to see what they thought and shared both positive and constructive feedback. This helped us get further to our final version by making changes to the UX & UI.
Find a game time slot
Mockup Prototype
After completing our 4 phases of the OUTPOST framework, we are happy to present our final mockup and prototype. Check it out below and let us know your thoughts!
IXD (Interaction Design)
Hand off to Web Development Team
We used Figma to build our wireframes, mockups and prototypes. When handing off our design to the Web Development team to code we made sure to include detailed annotations and explained where to find our Design system and Figma’s handy CSS details panel.
Stretch Goals
During our features ideation session we categorized a couple of features as stretch goals. We would like to implement the following features as we continue to build out OUTPOST.
Results & Next Steps
Our aspiration is to make this concept into a fully developed product, with the help of the Web Development team, we are lucky to have a head start on API’s and the chat features. We will continue to work as a team and hope to collaborate with established organizations such as the Til Valhalla project.
Outpost-gaming.com
