Mobile App: Create Room Iteration 3

soeanski commented 1 year ago

Goals

Get users to play with friends
Enable users especially with low experience levels to create a game
Get users to invite friends
Show users value of different maps to convert them
Show users avatars of paying users to convert them
Make users spend little time with game configuration
Get users to customize the game

Needs

Play/spend time with friends
Play games with their own settings
Play premium content (maps, gamemodes)
Get into a game fast

Solutions

Solution 1

Create Game Flow

Conclusion

Controls from the Desktop version have to be adjusted for mobile. Dropdowns do not work as well, sliders work better.
The UI element where users pick which map to play might be too complicated. Maybe someone has experience with such an element or a suggestion for a replacement. I think it has the chance to bring satisfaction into the controls and it is great to show the user paid content to get him to convert.
The Show more options button is a great way to reduce complexity. Same goes for the segmented button at the top inside the lobby.
Information in lobby when Options is extensive but imo this is a situation where users seek detailled information so it should be valuable to show them all lobby settings.

All in all I am satisfied with splitting the process into 2 parts for the lobby host.

Figma link: https://www.figma.com/proto/YiFWNF8cA06fAg34NdmqcZ/Colonist.io-Mobile?page-id=56%3A3751&node-id=56%3A3755&viewport=524%2C-26%2C0.41&scaling=min-zoom High-fidelity prototype not yet done

Considered

[ ] This proposal fits company vision
[ ] This proposal is impactful according to Prioritizer Sheet
[ ] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@JuanRoman77 @demiculus

JuanRoman77 commented 1 year ago

I love this :D I'd just add the rest of the names tho

soeanski commented 1 year ago

I love this :D I'd just add the rest of the names tho

Thanks! I kind of followed Material Design here. I think adding the rest of the names is too much clutter. While dragging the handle it could be an option to show the name above the handle and only show it at the bottom once the player lets go of the handle. This way the player would know which option the handle represents without his finger occluding the name of the current option.

samgawaran commented 1 year ago

Controls from the Desktop version have to be adjusted for mobile. Dropdowns do not work as well, sliders work better.

same with Juan, I agree with this change.

Some other feedback:

Left aligned settings - I'm not sure about this, it works on a spacing sense but I believe it would be bad for right-handed users who may create their room with one hand cause the placements here a bit far: https://prnt.sc/VKfm-4WCCj69
Showing Map image and Name - I really like this, can you show larger maps like USA next time? I think we could adjust the placement to make the map have bigger space.
Player List (https://prnt.sc/1K-4uUEEDX5e) - This lacks information, it doesn't show Karma, game color and some other options the player has in the desktop version. Maybe we could merge our player list from my studies?
Chat - same with Player List, it doesn't show the clear and mute button that we have on the website

I like that we have this section to show the settings: https://prnt.sc/ee-Th94vVcq1, Create Game section is nice and feels a step forward but the Lobby leaves out a lot of info so it needs more iteration.

splitting the process into 2 parts for the lobby host.

@demiculus I feel the same way with Soren here, but we would need to adjust the flow for the desktop too so there will be a longer dev time. Should we go for this one?

samgawaran commented 1 year ago

@soeanski always tag @JuanRoman77 and @demiculus as reviewer so they get notified :)

soeanski commented 1 year ago

Left aligned settings - I'm not sure about this, it works on a spacing sense but I believe it would be bad for right-handed users who may create their room with one hand cause the placements here a bit far: https://prnt.sc/VKfm-4WCCj69

You might be right. But then again left-side alignment ensures that players can scan the contest fast.

Player List (https://prnt.sc/1K-4uUEEDX5e) - This lacks information, it doesn't show Karma, game color and some other options the player has in the desktop version. Maybe we could merge our player list from my studies?

Chat - same with Player List, it doesn't show the clear and mute button that we have on the website

You're definitely right. The lobby part in this design needs more work. I think it is okay to leave out some information that is available on desktop (for example I intentionally left out the clear chat and mute button) but things like changing color need to be added. Maybe you could merge our two approaches and fine-tune the lobby @samgawaran ?

demiculus commented 1 year ago

There are some good ideas others have mentioned above. In general it looks off, the elemets are all over the place. Back button, title, invite placed randomly. Some left aligned some mid aligned, the length, sizes etc.. lots of things off here.

The goal & need is closer read this: https://github.com/colonistio/design/issues/274#issuecomment-1399515913

I feel the same way with Soren here, but we would need to adjust the flow for the desktop too so there will be a longer dev time. Should we go for this one?

We can go with this. We will not edit the desktop at this point. Only focus on making mobile perfect. During implementation, we'll save time by using other elements and we'll implement the perfect option later. But design the perfect option. When it comes to desktop, after we have iterated and tested the mobile UIs we will take the learnings here and make the desktop version better.

This goes for all parts of mobile.

colonistio / design