Word Monster

By Chanjoo Lee
lees3301@gmail.com
hangout, skype available
 Contents

1. Screen Flow
2. Colors
3. Screen Description
1. Screen Flow

Sign Up

Intro Sign In Level Test Intro Level Test Word Test Intro

Main Word Test

Setting
1. Screen Flow - Details
screens we want to request for design

02

Sign Up

00 01 03 04 05

Intro Sign In Level Test Intro Level Test Word Test Intro

06 07

Main Word Test

0601 0602 0603

User Fragment Setting Fragment Main Fragment

2. Colors

- green : #66bb6a / # 338a3e / #98ee99

reference color
 3. Screen Description
pinterest reference link : https://pin.it/oinmqnsy7pvmoq

The descriptions only contains the screens we want you to design.

We actually uses Korean, but for explanation, I wrote down in English

1) SignIn / 2) LevelTestIntro / 3) LevelTest / 4) WordTestIntro / 5) Main

Background

- Device : ‘Only’ MPGIO Athena Tab 8

- OS : Android
- Screen Resolution : 1280 x 800, 8 inch always remember the bottom menu bar!!!!

- Orientation : horizontal
01. Sign In # Description

The user type in the ID & Password.

1
Login success ⇒ move to [06.Main] screen

If the button is clicked, check whether the user did

backup his/her data before.
2 1) If there’s backup data : shows an dialog that can select
1 whether to get backup data or not.
2) If there’s no backup data, move to [06.Main] screen.
ID

3 if it’s clicked, move to [02.Sign Up] screen.

Password

2 click backup NO
Sign In data Move to[06.Main]
exist?
Any accoutn yet? Sign Up 3
YES

Wait!

We found your backup

data!
Do you want to restore? Click No or Yes

2-1) No Yes
03. Level Test Intro # Description

Before starting the level test, it shows a screen that

-
explains the test’s process(rule) and purpose.
[Example] 1
We’ll start the level test! Text area that explains the process and purpose of level
1
test.
You get 20 words, then you have to choose the right answer
among them, @@@@@@@@@ if the button is clicked, move to [04.Level Test]. Then the
2
One question takes 10 seconds, and @@@@@@@ level test starts.
Please choose the right one. Let’s get started!

2
click
Start level test! move to [04.Level Test]
04. Level Test # Description

The user gets 20 questions about the english words, and

should choose the right answer(korean meaning) in 10
-
seconds. It shows 4 korean meaning per one
question(english word)

The screen should contain below

1) An english word
2) Question number(among 20 questions)
-
3) 4 Korean meaning buttons(one right answer and 3
wrong answers)
4) time remaining(in 10 seconds)

Among 4 buttons, user clicks just one button that shows

- korean meaning. It doesn’t show whether the user clicked
right answer or not.

If the user finished all(20) questions, move to [04. Word

-
Test Intro] screen.

design reference : https://pin.it/tuxsokc6nxhja4

05. Word Test Intro # Description

This dialog shows the result of the user’s level test as a level(1~9).

Your level is 7!
1 1
This dialog should congratulate the user and be look welcoming.
After this, the user set the routine(= setting) of word test in the
future.

Lv.7 The user select the total period and number of words to study. (1
month, 3 months, 6 months / 300, 600, 1200)
2 And explains how many words & how much time it takes to get
As a last stage, let’s do some word test per day.
setting on word test!
In this screen, the user sets the disturbance time for word test
Yes 3 using time table. User clicks time blocks he/she doesn’t want to
take test. If ‘Confirm’ button is clicked, move to [06.Main] screen.
click

Word test routine setting

2 Disturbance time setting
3

Total Total # of Mon Tue Wed Thu Fri Sat Sun

period words to study

00:00~
00:10
1month [Example] 300
Move to [06.Main]
3months 600
00:00~
6months 1200 00:20

With this routine, you’ll learn @ english words per day,

and it takes total of @ minutes. ...

Confirm Back Confirm

12:00~
12:10
 Back Confirm
12:00~
13:00

...

...

...
scrollable

23:00 ~
24:00

Ref : https://github.com/alamkanak/Android-Week-View
- this is the library we are using for this time table view. please
keep in mind that we have some limitation in design using this
library.
06. Main(User + Main Fragment) # Description

Main screen is divided into 2 sections. (3:7 ratio)

- Left screen is [0601. User Fragment] that shows user’s
-
information.
- Right screen is [0603. Main Fragment].

[0601.
[0603.Main Fragment]
User Fragment]

3 7
0601. Main - User Fragment # Description

User Fragment shows below.

1) ID
2) Email
- 3) User’s level
4) Today’s date(YYYY-MM-dd)
1 5) Experience gauge
6) Setting button

If the user clicks setting button in [0601. User Fragment],

[0601. 1 right screen is switch to [0603. Setting Fragment] and [0602.
User Fragment] Main Fragment] vice versa.
0603. Main - Main Fragment # Description

Main Fragment is devided into 2 sections.

(1) recently studied word(auto-scroll view) section.
(2) ‘word test’ related graph section.

1 - section (1)
Stand 1
: Displays english word in big size text, and korean
meaning in smaller size test below it.
일어서다, 주장하다, 견디다 : the english word and korean meaning is switched to
next word in every 3 seconds.(auto-scroll)

- section (2) contains 2 kinds of graph

(1) Bar graph

2 : This graph shows how many words the user learned
[Example[ [Example] during 7 days. Each bar shows both the number of
correct answers & wrong answers to the word test on
2 each days.

(2) Pie graph

: This graph shows the percentage of learning times(1~5
times) among the words being studied.
: Ref - With our service(app), the user learns one word
several times through 1/3/6 months.