Design
Using the persona scenario, I made the usage storyboard for the future design.
Sketches and Information architecture
Wireframes screens with annotations and interactivity hints
After making the low resolution wireframes, I made a close-up diagram using colored yarn to represent navigational connections and to have a better view of the entire design.
Changes I made after analyzing wireframes and receiving feedback for them:
After revisiting the information architecture, I noticed some problems that had to be fixed. Here are some examples:
- There were 3 screens with the name Vocabulary, that were approaching the richness of words known by users but in different manners (visual cards, words explanation and pronunciation). I decided to change the name of one screen in Lexicon (where is list words and phrases, each having an audio, an image and a translation), to delete the one pronunciation and to integrate this at the Speaking practice screens and the other to keep the name Vocabulary Improvement.
- There were 3 screens with the name Vocabulary, that were approaching the richness of words known by users but in different manners (visual cards, words explanation and pronunciation). I decided to change the name of one screen in Lexicon (where is list words and phrases, each having an audio, an image and a translation), to delete the one pronunciation and to integrate this at the Speaking practice screens and the other to keep the name Vocabulary Improvement.
- it was missing the screen for Personal notes and a clear example with Chat buddy screen
- there was no screen that offered the option to select the language. Even though in the beginning the MVP will offer just one set of translation - English- German, there is better to place this selectable field in the beginning of the learning path to avoid misunderstanding of user looking for another language.
- The burger menu was long and with too many categories. I split the ones for content and learning on the left side menu. Easy to manipulate during navigation. The left menu will be the only one available and partial, for visitor users, without signing up.
- there was no screen that offered the option to select the language. Even though in the beginning the MVP will offer just one set of translation - English- German, there is better to place this selectable field in the beginning of the learning path to avoid misunderstanding of user looking for another language.
- The burger menu was long and with too many categories. I split the ones for content and learning on the left side menu. Easy to manipulate during navigation. The left menu will be the only one available and partial, for visitor users, without signing up.
I use in the design two shades of blue, to emphasize the buttons and some Categories. It is much more clear for the user where he is in the site navigation
I put a graphic for the four parts that help enhance a new language: Listening, Reading, Speaking/pronunciation and Writing.
I put a graphic for the four parts that help enhance a new language: Listening, Reading, Speaking/pronunciation and Writing.
The screens dimensions are designed for a tablet, assuming this will be the most used devices for the learning platform. This assumption needs to be verified with real test and data from research.
Interactive prototype for testing
