Project 1:
RE-DESIGN
AN APP FOR
ESL STUDENTS

COURSE INSTRUCTOR SEMESTER KEYWORDS TOOLS DELIVERABLES
WNM 606 Ryan Medeiros Fall 2020 Professional, InDesign, App
Accessible, Warm Experience Design

OBJECTIVE
Re-design an app for non-native speakers to learn English. I selected an app called ESL for my user experience re-design, and I re-designed it to make it more user friendly and functional. The new design reflects user-centered design principles and provides a comprehensive user experience.

APPROACH
ESL is a convenient, fully functional, and effective platform created to help non-native speakers to learn English. The original app is too simple and disorganized to use, and some of the users' needs are not met. Thus, I redesigned the home page to allow easy navigation, and I added flash cards note-taking functions. My goal is to learn how to analyze, interview, and research, as well as to understand the principles of user-centered design and provide a successful user experience.

PROBLEMS WITH
THE CURRENT APP

  1. PROFILE PAGE
    The icons are not very clear, and the logo is not outstanding

  2. VOCABULARY PAGE
    On this page, the words are too small to read, and no audio function

  3. HOME PAGE
    The icons are not very clear and can’t remind users what it is. The font is not fit the app.

HOW TO IMPROVE

  • Add a search bar at the top of the page.

  • Reorganize this page and rename some of classification.

  • Redesign the logo and use another solid color.

  • Use other outline style for icons.

  • Ture the original picture form into flash card.

  • Add a sound function om the word side, and put explanation on the image side.

  • Reorganize this page and rename some of classification.

WIREFRAME

A/B TEST 1

DESCRIPTION:
Test how users feel about the two layouts, and which one is easy to flow.

QUESTION:
1. Which one do you think the layout works better?
2. Why do you think your choice works better than the other?

TEST DATE:
NOV 23, 2020-DEC 6, 2020

FEEBACK

  1. The layout of VB is more clear, more organized, and easy to use.

  2. In VB, the navigation bar is very helpful, stable, and easy to control.

  3. The categories should be put on the top.

  4. A’s layout puts the recent lessons in the most eye-catching place, which makes users focus on what they should do first and it is more productive.



    LINK TO A/B TEST

A/B TEST 2

DESCRIPTION:
Test how users feel about the layout of “Recent Lessons”.

QUESTION:

  1. .Which one do you think works better considering you want to
    know course progress?

  2. Why do you think your choice works better than another?

TEST DATE:
NOV 23, 2020-DEC 6, 2020

FEEBACK

  1. VA is more categorized by vocab, grammar and verb tense.

  2. VB looks more modern and trendy, and consistent.

  3. A has words everywhere, and B is more organized.

  4. Version A simply because I like the hierarchy of showing what is
    more recent to me and I like the book mark on the top right corner. the design of VA to me is more clear.

  5. There is no reason that the box sizes should be different.


    LINK TO A/B TEST

A/B TEST 3

DESCRIPTION:
Test how users feel about the color of the page.

QUESTION:
1. Which one do you think the color works better?
2. Why do you think your choice works better than the other?

TEST DATE:
NOV 23, 2020-DEC 6, 2020

FEEBACK

  1. I read better on lighter backgrounds and the tables on version B
    have a nicer visual weight and hierarchy.

  2. The background of version B works better than A. It feels fresher
    and more lively.

  3. Personally, I think white type on black background with a serif typeface in small size is hard to read.

  4. The black text on the white background reads better.

  5. The white text could make the eyes tired if you concentrate and look
    at it for a long time.

    LINK TO A/B TEST

A/B TEST 4

DESCRIPTION:
Test how users feel about the click buttons and swipe.

QUESTION:

  1. In version A, users can click a button to "keep" or "delete" a word. In Version B, users can swipe the card up and down to "keep" or "delete" a word. Which one do you think works better?

  2. Why do you think your choice works better than another?

TEST DATE:
NOV 23, 2020-DEC 6, 2020

FEEBACK

  1. The delete and keep buttons added a motion effect which makes
    the user experience more smooth.

  2. swipe is easier to use and once get familiar with that it saves
    lots of time.

  3. More fun to swipe than click.

  4. Visually it looks more engaging!

  5. It depends on which platform the users use. B is good for smartphones but not computers.


    LINK TO A/B TEST

USER STORY

STOryboard

user flow 1

DESCRIPTION:
Change app’s language from English to Chinese in “Settings”.

user flow 2

DESCRIPTION:
Type “present perfect” in the search bar and then take a note on the Grammar Guides page.

user flow 3

DESCRIPTION:
Search"promote" in flashcards of TOEFL unit one, then delete it.