colonistio / design

https://colonist.io
3 stars 0 forks source link

Mobile App: Homepage (Game Mode Selection) Iteration 5 #281

Closed soeanski closed 1 year ago

soeanski commented 1 year ago

Goals

  1. Get new and existing users in the right games fast
  2. Minimize cognitive load of new users
  3. Convert users
  4. Guide new users to what we think is the best content for them
  5. Show existing users their social status (ELO, Membership, Coins, Avatar)
  6. Be able to easily extend game mode selection for future addition of game modes
  7. Sharp interaction, easy-to-use for old and young players
  8. Familiar feeling for new users
  9. Make habit-forming easy

Needs

  1. Get into the right game fast
  2. Not being overwhelmed
  3. Have a sense of agency (if I click here, the following will most likely happens)
  4. Purchase IAPs
  5. Have all choices of colonist.io website

Principles

Hierarchy User Centricity Accessibility Usability (especially efficiency, satisfaction, and learnability)

Research

247 mentions some.

Clash Royale does this very good.

Solutions

Solution 1

image

Followed Principles: Hierarchy, User Centricity, Accessibility, Usability Ignored Principles:

Benefits:

We can show new users a subset of all available options without compromising on layout / general UX. New and existent users will get to their destination fast. There is enough space for great illustrations to give a good first impression. The design will look good on any kind of mobile device

Potential Risks: A potential CTA for Membership has yet to find its place. Different approaches are currently being discussed between Huan, Sam and me.

Figma link: https://www.figma.com/proto/YiFWNF8cA06fAg34NdmqcZ/Colonist.io-Mobile?page-id=162%3A13215&node-id=162%3A13216&viewport=370%2C438%2C0.71&scaling=min-zoom&starting-point-node-id=162%3A13216

Considered

Reviewers

@demiculus @JuanRoman77