Language learning web-app needs fun, 50s-style interface [wireframe provided]

Education

We're building a web-based vocabulary organiser and games app for teachers to use with language learners of all ages (in and out of the classroom).

http://wordpool.com/

Ideally a 50s, poster-art style, which should blend well with our existing logo (attached). The style should be appealing to younger audiences, but not so childish that it puts off adult audiences.

This is probably the most complex page of the entire web-app. By running this competition we are looking to find a great designer to work with 1-on-1 to complete the remaining pages, which have already been wireframed. There are around 18 pages in total, some similar and some different, which need designing. Please only submit if you will be available to do this! —————————————— Essentially, this is the core page of the web-app, where the user (a teacher or learner) can manage their 'pool' of vocabulary: adding, removing and editing information associated with each word. They can also view information added to words by other members of the 'pool'. I have isolated our wireframe for this page in Figma, which can be accessed here: https://www.figma.com/file/uC3CVZ0l8FiMeqrH1U5wAB/Pool-Words?node-id=0%3A1 UPDATE: I am in no way a professional designer! You will know what can be improved about the wireframe, so please change it 🙂 . The wireframe can also be 'played' (as a prototype) here: https://www.figma.com/proto/uC3CVZ0l8FiMeqrH1U5wAB/Pool-%3E-Words?node-id=131%3A1339&scaling=min-zoom&hide-ui=1 At the top of the wireframe, 'Sevenoaks' is the name of the pool that the user is in. For a teacher, a pool will usually represent a class that they teach, whereas for a learner, there is likely to only be one pool, representing a language that they are learning. Clicking on this pool dropdown allows the user to navigate pools that they are a member of, and also to navigate back to the Dashboard page (not shown in the wireframe). Next to 'Sevenoaks', is 'Words'. This is the category of the pool that we are viewing. We are viewing the Words that have been added to Sevenoaks. Using this dropdown, the user can navigate to other categories of the pool, which will be displayed in a similar layout to this one (though less complex). Along the left side of the screen are the words that have been added to this pool (Sevenoaks) by its members. Each word contains pieces of information, called 'fields'. The examples shown ('conjugation', 'translation', 'image' etc.) are the fields that have been added to the word 'drive' by this user. Any member of the pool can add 'fields' to words, and any member can view other members' fields by navigating the member icons at the bottom of the screen. This can be done in the wireframe prototype by clicking the next member in the list. Members of a pool will likely be the students of a teacher's class. Each field is displayed as a widget-like object, which you can see in the main content area to the right. Each field object contains: * A title (the field type – e.g. 'conjugation'). * A small button to navigate the variations of that field (only visible if there are more than one field of the same type). **SEE UPDATE BELOW** * Radio buttons for the user to specify which (if any) parts of speech (noun, verb etc) the field is relevant for. **SEE UPDATE BELOW** * A dropdown to specify the visibility of the field (explained later on). **SEE UPDATE BELOW** * A 'trash' button to remove the field. **SEE UPDATE BELOW** * Inline-editable text for the content of the field (e.g. 'drove', 'dirigir') * Any extra controls for that field, like the 'past-simple' dropdown for the 'drove' conjugation field. UPDATE: We've decided to simplify the field widgets, by putting the visibility, 'verb'/'noun' and trash functions into a popup overlay. These 3 functions can be replaced with a single button to open the overlay. By doing this, our aim is to make the *content* of the widgets (i.e. 'drove', 'dirigir'...) the focus of this section. Perhaps also using a larger font would help with this. We've also decided not to show the number ('1' or '2' in most cases) between the two chevrons in order to further reduce visual clutter. Next to the large word 'drive' at the top are larger radio-buttons representing the part of speech of the word. These are intended to allow the user to only show fields that are relevant for a specific part of speech, by showing/hiding the field widgets. The audio icons beneath the radio-buttons represent the pronunciation for each part of speech, as this can sometimes be different (e.g. the verb and noun of the word 'progress'). UPDATE: We've decided to only show 1 audio button, because 2 is confusing. So they can be removed from the 'verb'/'noun' radio buttons and the 1 button could go next to the heading ('drive') for example, or wherever you see fit. It is our hope that the field 'widgets' may eventually function like notes on a pin-board, and so they may end up being draggable by the user, so he/she can re-organise them in any way they want. Moving over to the top-right of the fields area, there is a sideways 'traffic-lights' object, which represents the 'priority' of the selected word—how important it is for the user to learn. The user can change this at any time between 'low', 'medium' and 'high'. The words listed on the left can then be filtered by their priority, as can be seen by the priority filter in the small filters section below the logo (note: The number being used here is a mistake, it should probably say 'low' or 'medium' etc.). To the right of the 'traffic-light' object is an 'eye' object with a dropdown arrow. This dropdown allows a member to set the 'visibility' of all 'fields' on the selected word. Visibility can be set to 'private', 'pool owner' or 'public'. This determines whether a field is visible to only the user, the user and the owner of the pool, or to all members of the pool. As you can see, this visibility button also appears on individual fields for setting their specific visibility, and also in the bottom-left section of the screen, where it can be used to set the visibility of all fields on the words that have been checkmarked in the list. Also in this bottom-left section, is the prominent, 'Play activity' button. This saves the checkmarked words and takes the user to the 'Activities' category of the pool (not shown in the wireframe), where the user can choose an activity (game) to play with the words. The 'copy to other pool' button is only really relevant for teachers, as this allows them to copy checkmarked words to another one of their pools (for example, another class they have). Up in the very top-right corner we have a standard user/account icon, which allows the user to go to their account page (not shown in this wireframe), upgrade their subscription, or log out. Next to it is an overflow menu, and next to that is a notifications menu, which could be very similar to the 99designs notification dropdown for example. UPDATE: The word list on the left, and the entire fields section on the right, are intended to be vertically scrollable. The members section along the bottom is intended to be horizontally scrollable. ————————————— I hope that this demonstrates the general layout and functionality that we want on the page, but please only take it as a guide and not a requirement of any kind in terms of style. Please feel free to message with any further questions and I will respond as soon as possible. Thanks and good luck!

Regarding the format of the deliverable, please use whatever you are most comfortable with. However, if we have a choice, we'd prefer Figma, Sketch or Adobe XD.

Every design category has flexible pricing for all budgets. Web page design starts at €549.