top of page

GamerBase

Role: UI/UX Designer

Teammates: Margaret Lu

​

"GamerBase" is an entry for the May 2020 Adobe XD Creative Jam with Activision with the theme of creating an app for new gamers.

​

Includes: Working prototype, Condensed wireframes

tiles.png
activision.png
creative jam.png
creativejam2.png

The Problem

The Challenge

Requirements

With the increasing popularity of games during quarantine, new overwhelmed gamers have no direct resources to rely on for asking questions, searching for suitable games, and connecting with others.

"Create a proficiency-focused app experience to inform new gamers about video games based on age-appropriateness and skills such as reading, hand-eye coordination, fitness, personal accountability, multi-tasking, problem-solving, memory, attention, concentration, social skills, and more."

  • Set a target audience to one of the four options:

    • Young kids learn and share new discoveries with their friends

    • Parents find age-appropriate skills and games for their children

    • Adults discover games that fit their interests and time allotted

    • Senior citizens identify games to connect to friends and family

GamesPage.png

Featured: Game List Page 

  • This page lists games with a short description and tags 

  • Players can add the games to their personal profiles or search for a particular game through a tag

Initial Planning

* click on image to enlarge

planning.png

Branding

branding.png
GamerBase Color Palette.png

  • Our logo is based on the four buttons that are frequently featured on controllers (ex. Xbox, PS4, Nintendo)

  • We emulated the colors used on these controllers for our logo

  • Caribbean Green (#06D6A0) was selected as our app's highlight color 

    • Did not conflict with any major brand colors ​

    • Light, bright color is easy and appealing 

Creative Process

With only a weekend to create the entire project from scratch, we had to be very efficient with our time. Many of our original draftings were heavily changed in our final prototype due to a shift in design plans and to add more originality.

heroshot.png

Flow Diagram

* click on image to enlarge

flow-diagram.png

  • Drafted a flow of 20+ screens (requirement)

  • Considered revisited screens (i.e. login screens, search screens)

  • Designed flow with consideration of the targeted audience: new adult gamers

Screen Flow

* click on image to enlarge

  • Full capture of all the screens featured in our application

  • Organized to prototype the flow between screens 

  • Crafted each screen to properly correspond their purpose and accurately represent their information

screenflow.png

Wireframes

Home.png

Wireframes

Final Screening

HomePage.png

Final Screening

Side-by-side comparison of the wireframes and final screening of our project

​

Adapting from the wireframes, we:

  1. Used an open-source wireframe template to base our designs.

    • Altered the templates to better suit our designs
       

  2. Added elements that made our design unique and thematically appropriate

    • I.e. our logo, icons, navigation bars​
       

  3. Expanded the page to include all the necessary information

    • Pulled real reviews and game descriptions for the games​

Main Takeaway

As my first UI/UX experience and build, I've learned the following:

  1. Intuitive usability and interactivity

    • Extremely important that the user understands how to interact with the interface just by looking at its features

    • Although onboarding can serve as an initial tutorial, the user should be able to re-interact with the interface with little to no difficulty if they had stepped away from the app for a long period of time 
       

  2. Adobe XD and its resources

    • Experimented and learned its features, using them to our advantage

    • Discovered a resource that made designing UI/UX manageable and made prototypes look sophisticated and well-made
       

  3. Start small then expand the design

    • Fell into the trap of having too many plans and not being able to realize all of them

    • Prioritized the necessary components, then added extra elements with the remaining time

Post-Mortem

If I were to do something similar, I would...

​

  • Experiment more with Adobe XD's features and its operations

  • Keep and organize more documentation on the progression of work to review in the future

  • (if given the time) Playtest the application to get real audience feedback

  • Prioritize the most important components, then add secondary components

bottom of page