For the avatar building and design choices I went with a 16-bit style. I choose this design for a nostalgic experience. I want to take the users back to their childhood and fill them with excitement. I want the user to feel excited to start their journey.
I mostly work with the color white, because I want to give a calm vibe and I want the user to concentrate when they write a script or when they do the exercises.
For the secondary colors I chose some more playful colors. I used pink for the notifications, buttons and highlights to make them more noticeable, while still keeping a playful but clear feeling.
The third color I choose was blue, this will be used for the selected menu's and actions for when continuing a cursus. Blue is a calming color that blends good with the white and has the same feeling.
For the icons I choose the ones that communicates what they will see when they go there or it gives them the feeling.
The "All Courses" icon represents the global view of the product.
The "Received Feedback" icon represents the heart of the product and that's the feedback system. This will be filled when there is feedback to see, if there is no feedback than the Icon will be same colors and filling as the others.
The "Achievements" icon represents a trophy because it's a reward they are getting. Also, Xbox uses a trophy got their achievement system.
The "Chat With Mentors" icon represents a conversation, a chat.
The "Avatar Statistics & Unlockables" icon represents a pie graph, statistics.
The "Write Scripts" icon is a paper and pencil, because they can write a script.
The "Side Quests" icon is an exclamation mark, because it's something they have to look out for. This is a pattern that is also used a lot in games.
The "Continue Cursus" icon is a play icon to let the user knows they can continue the side quests. Just like in music.
The "Add New Script" button is a plus icon. This implies that something can be added, like in math!
The battle scene is inspired by classis RPG's from back in the day. The users character is on the left and the enemy's are on the right.
The filter system is based on online webshops. Sometimes, the most easy to think solution is the best. I originally tried to do something more clean looking, but the target audience didn't really understood it. The one you see now is understandable and the target audience found no problem using it.
The step indicator is something I learned back in CMD with Human Computer Interaction. Show the user the progress they are making and this way you can trigger them continuing, instead of not knowing when you are done. A lot of courses work this same way.
The progress bar is also an element from classic RPG's, I used levels to indicate the progress. I based the different Elements on story related skills and a that what makes a writer passionate.
Writing their own story is a really big step in this tool, so I wanted it to be used as easily as can be, and as clean. This design is based on Notion. Notion is a tool that's pretty big and easy to use, the company I work at also uses it. I wanted a clean understandable look and I can see that back in Notion. That's why I used it as the writing tool.
When extra help is needed or the user needs some guidance they can always turn to their mentor. This design is based on Discord and Slack, its friendly use and easy to understand. I left the option for sending pictures in, because pictures can be a good communication middle when trying to find inspiration.