The app is an online multi-player card game that is being developed with React Native.

It features instant messaging, wallet management, private chats, group chats, and public chat rooms.
Profile management e.t.c

The entire design and layout of the APP is horizontal (landscape view)

CHECKOUT EXISTING DEMO (*required):

To understand the app better, kindly download “EXPO” from the playstore. Upon downloading expo,
you can then view our existing demo app by pointing your mobile browser to
https://expo.io/@terruwa/projects/demo or use the instruction below to scan and open the demo

EXPO is a development app for building and sharing react native applications.

ABOUT THE DEMO:

The above demo was developed by the inexperienced client and owner of the project as a means to
visualize his idea. We expect your design to be miles better. Also, there are no design files for the above
demo. It is purely a react-native code. However, some images(assets) can be shared if requested.
KEY SCREENS BY SECTION
- Welcome
- Home
- Settings
- Chats & Messages
- Funds & Wallet
- Friends
- Game Flow
- Corner Betting
- Tournament
- Pop-ups & Notifications

WELCOME SCREENS:

This should be the set of screens when a user opens the app for the first time or when their session is
expired or logged-out. Possible screens should be;

- Login
- Sign up
- Recover password

We prefer a lazy registration process where the user doesn’t need to enter too much information to
signup. (username,password,email) then… (mobile number). Then…(OTP validation that’s sent to mobile
number). These steps should be sequential instead of flooding one screen with lots of form elements

The login screen should be accessed by mobile number and password.

Passwords and usernames can be recovered by either email or phone.

HOME SCREEN:

Below is a screenshot of the homescreen as in the current demo. (PLEASE NOTE: It is a requirement to
view and understand the demo before bidding this job). The app features a daily tournament called the
WHOT CHAMPIONS LEAGUE. It is advertised on the home screen after login.

SETTINGS SCREEN:

This should allow for

- background music toggle (Off/On),

- Sound toggle (off/on).
- View/Edit My Profile
- Contact Support
- Logout

CHATS & MESSAGES SCREENS:

As seen in the demo app, this menu button when clicked should allow the user to do the following.

- View a list of inbox messages(both private and group chats) if any. Tapping on a message
should expand it into view where the user can type a new message or view previous
conversations.
- Visit the public chat/lobby where all users in the app can chat publicly like a forum. This
lobby allows users to tap on any body’s profile image/icon to view the person’s public
profile. If they aren’t friends already, they can see a button to request/add each other as
friends.
 - Create Group Chat. The flow for creating a new group chat will involve the user giving the
group a name, then to a screen where they can select and invite some of their existing
friends to join the group. When a group chat is formed, every participant should see a plus
sign where they can also add anyone from their own friends list. Only the admin(creator of
group) can remove people from the group. But every other person can add.

FUNDS AND WALLET SCREENS:

This is sub-divided into 3 main categories.

- Funds Deposit
- Funds Withdrawal
- Transactions history

We intend to use an hosted payment service at www.paystack.com for processing funds deposits.
Hence, the are thinking a user will only need to enter their desired amount, then the pop screen from
paystack similar to the image below is displayed. Our development team will most likely use an internal
webview to render the modal view of the paystack gateway.

There should also be an option for making a deposit by using a voucher.

The withdrawal screens will first prompt the user to add a new bank account if they do not have one on
file. After which they can proceed to withdrawals of funds.

There should also be screens for managing existing bank accounts(Add/Remove). See bottom notes for
previous Progressive Web App version (PWA).

An example image is shown below, more images can be found by following the instructions in the
bottom note.
FRIENDS SCREENS:

Tapping this menu button a user should be able to do the following.

- View & Manage friends list

- Search and add new friends
- Invite online friend(s) to play private games
- See incoming “new friend request” as well incoming “private game-play” requests from friends.

To send a private game request, we expect the flow to start with the sender choosing an amount to
stake, then selects list of friends and send the request. Only online friends can be invited to play private
games. The maximum number of players per game table is 5. This means the maximum number of
friends a user can select is 4. Also, the minimum number of players per game is 2 Which means the
minimum number of online friends that can be selected per game is 1.

GAME-PLAY FLOW SCREENS:

As seen in the demo screens, this is very straight forward. We are very happy with the current layout
and gameplay flow but are very open for improvements. User selects how much to stake, how many
players per table and then the system locates other online players with similar preferences.

Upon success, they are taken to the next screen which is the corner betting screen. A user is asked if
they want to engage in corner-betting or not. If they choose yes, they are taken to the corner-betting
screens. If they choose no, they are asked to wait for the countdown time or until every other player has
finished their corner betting.

When corner betting is done, they are taken to the game play screen itself(we are currently developing
the game-play itself as we already have designs for it, however we may need to make few changes
which will be communicated during the course of executing this project). The current game-play designs
can be seen at the link in the bottom-note.

After game play, a player should see a congratulatory screen if they win and a consolation screen if they
didn’t win.

Each of these screens should have options like “Home”, “Play Again”.

CORNER-BETTING SCREENS:

Please see demo.(Very important to understand the demo)

The corner-betting in the game of whot involves two players staking money on who gets the lower
number during shuffling(dealing) of cards.

In the game of whot, each player must get a total of four cards. To place a corner-bet before the game
begins,

User_A can decide to place a bet of $10 against USER_B’s first card(Which means when the cards are
shared, whoever gets the lowest first card wins the bet).

The above scenario can go on with any user and on any of their 4 cards.

The demo makes is a little clearer.

We would require an improved design and user experience.

TOURNAMENT SCREENS:

As seen in the demo, the bottom half of the home screen features the “whot champions league”
tournament.

The tournaments screens should be divided into the following.

- Home Screen views

- Onboarding & Info views
- Ongoing tournament views.
Home Screen views: This is the advert-like screen as seen in the demo. It shows how much can be won,
entry fee as well as kick off time. This view should change when a user has already entered the
tournament. Perhaps make the kick-off countdown bigger and let the user know they’ve already joined
the tournament. So buttons to join will be invisible. The button to view the rules of the tournament
should still be visible.

When a tournament is ongoing and a user has been knocked-out or a user didn’t participate, the view
should show something like ongoing with no option to join.

Only the app admins can create a new tournament in the admin panel. So when they create a new one,
it is then displayed as it is currently (in the demo).

Onboarding & Info views: This is very straight forward if you play the demo. This involves joining the
tournament by clicking the button in the home screen. Please see demo

Ongoing tournament: These are views that show the user’s tournament progress. The tournament itself
is a knock-out styled game. When a user qualifies to the next round, they should see a congratulatory
screen telling them they have qualified to the next round. They should thereafter see a scrollable or
animated progress screen that shows their journey (start to finals).

They are then told to wait while other users finish their game for the tournament to progress to the next
round. So as soon as everyone finishes playing the current round, the next round begins.

POP-UPS & NOTIFICATIONS:

These are designs for;

- Incoming requests(friend request, private game request)

- System Notifications & Announcements(Update required, No Internet Connection e.t.c)

The ideal design would be for these type of screens to display like a modal over whatever screen the
user is on. (Maybe something similar to the menu buttons).
IMPORTANT BOTTOM NOTES AND RESOURCES.
This project was previously built using reactJs Web. We had to discontinue the project to focus on
creating a native mobile app.

Since then, most of the features and business logic has changed. Below is a link to the previous designs.

https://projects.invisionapp.com/share/X8T0JJ6QCPJ#/screens?browse

The above designs and the current design and business logic are quite different. However, we do like the
“Accounts and Settings” section of the design and wouldn’t mind building on it for our new design.

The above like is just a preview. We do possess the raw .SKETCH files of each and every design screen in
the above link.

We will only be happy to share the raw files with selected or shortlisted candidates. Candidates are free
to use any elements they like from the above design to improve our new design.