GAMESHARE

ENTERTAINMENTS

Gaming at your doorstep

A little

about GameShare

Introducing GameShare, the ultimate solution for gamers seeking flexibility without long-term commitment. Our app empowers community members to effortlessly rent and return a wide array of gaming essentials, from games and consoles to accessories and controllers. With user-friendly features like product posting, seamless rental and return processes, and the ability to post their experiences or queries on the community forum, GameShare ensures a streamlined and trustworthy experience.

Project Context

This project was a part of the User Experience Design course offered by Computer Science Department at the Seattle University in Spring 2024. The course focused on creating practical digital solutions through user-centered design and iterative development. GameShare is a flexible and convenient rental service for gaming equipment, enabling users to easily rent and return games, consoles, and accessories.

Team Members

Problem Statement

Target

Audience

One Time Use

The Budget Savvy

Try Before You Buy

How GameShare is different?

GameShare is different because it is a one-stop platform for all gaming needs. It does not focus on just games, but also consoles, accessories, controllers, etc. In addition, our app emphasizes community engagement with users being able to interact with one another through our community forum feature. This promotes a sense of community amongst users. It also enhances convenience and accessibility, allowing gamers to fulfil their gaming needs as soon as possible.

Personas

What, Why & How

Personas are fictional characters created to represent different user types that might use a service, product, or brand in a similar way. These characters help in understanding user needs, experiences, behaviors, and goals.

We have created personas to gain a deeper understanding of our target users for GameShare. By developing detailed personas, we were able to understand and empathize with different user groups, foresee their needs, and customize our design and development efforts to address those needs effectively.

Student

I always wanted to buy a console but never had one due to a financial crisis.

- Aditya Madabushi

Hunter

Retail Worker

I spend most of my nights gaming to unwind from

the day.

- Hunter

SKETCHES

Sketches

What, Why & How

Sketches typically follow brainstorming sessions with team members where ideas are communicated verbally. During these sessions, the team discusses ideas for pages, flows, and design elements without creating visual representations.

Sketches are low-fidelity prototypes created through quick, freehand drawings. They are easy to produce, helping to generate a multitude of ideas from all team members. Sketches ignite the visual brainstorming process and facilitate the exploration of various design concepts. They allow designers to visualize ideas rapidly and at a low-cost, serving as a means to communicate ideas visually to fellow team members and work through design problems.

Paper proto-types are developed next, and are created through refinement of the initial sketches. Additional details, structure, navigation and interactions are added.

Sample Sketches

Welcome Page

Login/Sign-Up Page

Home Page

The sitemap is a visual representation of our GameShare application. created to navigate the product between various pages. It provides a complete overview of user navigation within the app, from entry points to various features and options. Below is a detailed view of our sitemap, showcasing the structure and connections within the application.

SiteMap

What, Why & How

The sitemap is a visual representation of the structure of a website, outlining the hierarchy and relationship between different pages and sections. We created the sitemap to organize the content and navigation flow of our website clearly. It serves as a blueprint to ensure that all essential sections and pages are included and logically arranged to enhance user experience.

The sitemap was developed after analyzing the detailed personas, and sketches, which helped us understand the needs and behaviors of our target users. This understanding informed the organization and prioritization of content in the sitemap, ensuring it aligns with user expectations and requirements.

The sitemap guided the subsequent prototyping and wireframing stages, providing a clear structure to follow. It allowed us to make informed decisions about page layouts and navigation elements, ensuring a seamless transition from planning to design.

Main Entry Points

• Welcome Page: The starting point for users, offering an introduction to the app and links to both the Login and Sign-Up pages.
  
• Login and Sign-Up Pages: These sections allow users to log in to existing accounts or register new ones. The Login pages also includes options to log in via google, Facebook, or apple accounts.
  

Core Navigation

• Home Page: The central hub for users after logging in, featuring an overview of available products and personalized recommendations. It also provides quick access to key features like search, add a listing, wishlist, cart, and profile, ensuring an intuitive and seamless navigation.
• Hamburger Menu: The side navigation menu accessible via a three-line icon, offering a streamlines way for users to access various sections of the app. It included links to the home page, community forum, my rentals, my listings, settings, and logout, providing an organized and easy-to navigate interface for comprehensive app control.
  

• Rent a product:
• Search page: Users can search for a particular product here, which will take them to the search results page.
  
• Search results page: Once the search is successful, the user can see the search results page. User can select any product to know more about it and rent it.
• Products page: The products page contains the detailed information about the product, and user can select the dates he/she wants to rent the product and move the product to cart.
• Cart page: Once a product is added to the cart, user can either pick-up the product or get it delivered.
• Payment page: User can pay using the available payment options and by providing the respective valid credentials.
  

Main features & Connections

• List a product:
  
• Create Listing page: This page shows different categories of products that a user can list.
  
• Listing Details page: User needs to provide the product information like images, title, description, condition, and specifications.
• Rental Details page: User needs to provide the rental information like start and end dates, price, and address of the product. Once the necessary details are provided user can list the product in GameShare.
• Add a post in Community Forum:
  
• Hamburger Menu page: User can access the hamburger menu from the home page, which has the Community Forum option.
  
• Community Forum page: User can see various posts made by other users, and can even like, comment, or report the posts. User can add a post from here.
• Add a post page: User can share their thoughts here and attach images if they wish to and post it which will take them back to the community forum page.
  

• Profile page: This page contains the user information along with an option to go to my rentals and my listing pages.
• Wishlist page: This page contains all the products wishlisted by the user.
• Settings page: This page provides general and notification settings, along with app preferences and support.

Apart from the features mentioned above, user can also extend or return the product they have rented. For the products that are listed, they can either edit or delete the listing.

The paper prototype is a quick and easy tool used for testing our design. We hand drew our design on paper to create a prototype of our user interfaces. After we completed our sitemap, we were able to see the series of steps that it would take to complete certain tasks. This helped us determine buttons and features that would go on application to optimize its functionality. The purpose of paper prototyping is usability testing, where the user will go through a series of tasks using our prototype to see how efficient our design currently is. Feedbacks and results from the usability testing of the paper prototype will help further developments of the application.

Prototype 1

Renting a Product

This prototype allows users to sign up for the GameShare application and rent a product of their choice. It visualizes and tests the user flow from searching for a product, viewing details, adding it to the cart, selecting rental dates, entering payment information, and confirming the rental. The user interactions are straightforward, leveraging icons and labels for a user-friendly experience. This prototype was based on initial design sketches and personas, and it informed the development of high-fidelity prototypes and the final product design.

Prototype 2

Adding a Post in Community Forum

This prototype enables users to share their thoughts within the gaming community by creating posts in a forum. It guides users through accessing the forum via the hamburger menu, uploading images from the gallery, and submitting posts. The flow is intuitive, with clear prompts and labels. Built on user personas and design sketches, this prototype helped refine the community forum's interface and functionality in the high-fidelity version. It emphasized the importance of community engagement for the target audience.

Prototype 3

Listing a Product to rent

This prototype allows users to list their gaming equipment for rent on the GameShare platform. It explores the listing process, from clicking the add product icon, selecting the type of item, uploading photos, selecting rental dates, to submitting the listing. This user-friendly prototype was based on design sketches and user research, focusing on users' needs to rent out their equipment. It informed the development of a comprehensive listing feature in the final design. The step-by-step process and use of icons enhance usability and clarity.

After creating the paper prototypes, based on the feedback we have transitioned to developing wireframes. The wireframes were digital versions of the paper prototypes, created using Figma to add more detail and precision. The insights gained from testing the paper prototypes influenced the wireframes' layout, functionality, and overall design, helping us to create a more polished and user-friendly interface.

Annotated

Wire

frames

In the context of our project, the wireframes were developed to create a seamless and intuitive user experience for GameShare’s target audience of gaming enthusiasts. By detailing the layout and interaction patterns, the wireframes guided the development of a user-friendly interface that facilitates easy navigation, account management, and product discovery. The annotations provided insights into the rationale behind design decisions, explaining how each element contributes to the overall user journey. This meticulous documentation ensured that every aspect of the design was aligned with our goal of creating a cohesive and engaging platform for sharing and renting gaming resources, ultimately leading to a high-fidelity prototype that accurately reflects the intended user experience.

Home Page

Product Description Page

Cart Page

Payments Page

Hi-Fidelity Prototypes

A high fidelity prototype is a detailed, interactive model of the final product. It closely resembles the user interface, functionality, and aesthetics of the final application, providing a realistic representation of the end product.

We created the high fidelity prototype to bring our conceptual designs to life, enabling us to test and validate the user experience in a realistic environment. It serves as a critical step in refining design details, ensuring the product meets user expectations.

Hi-Fidelity

What, Why & How

The high fidelity prototype was built upon the foundation of wireframes, which provided a basic structure and layout of the application. While wireframes focused on the skeletal framework, the high fidelity prototype added visual design elements, interactive features, and refined details, transforming the abstract wireframes into a tangible, testable model.

Following the creation of the high fidelity prototypes, we conducted usability testing to gather feedback from real users. This testing phase was important for identifying usability issues, understanding user behavior, and making necessary adjustments to improve the overall user experience.

Refinements and Rationale

During the wireframes phase, we have concentrated on the whole structure of the system, where as during Hi-Fi design we have focused on only the three primary tasks that could be performed in the system. Based on the findings from the wireframes stage, we implemented several refinements in the high fidelity prototype.

• Visual Design Enhancements: The mid-fi designs are mostly done without using any colors, icons, or visual effects. When we moved to hi-fidelity we have incorporated colors, typography, and branding elements to align with the app’s identity and make it visually appealing.
• Interactive Elements: In the HI-FI designs we have added clickable buttons, drop-downs, animations, and transitions to simulate real user interactions.
• Error Handling: According to the feedback we got for heuristic evaluation, we have implemented error messages to help guide users and enhance the overall usability of the app.
  

Hi-Fi Screens

Welcome page

Sign in page

Home page

Search results page

Product page

Cart page

Add Address page

Payment page

My Rentals page

Create listing page

Listing Details page

Rental Details page

My Listings page

Hamburger menu

Community Forum page

Add a post page

Profile page

Calendar page

Hi-Fi Interactive Prototype