Product Design
WOW
WOW is a social network for kids with accent on hobbies.
My task was to create user interface and visual identity.
Target audience is creative kids 7-12 years old with hobbies who wants to share they achievements.
My task was to create user interface and visual identity.
Target audience is creative kids 7-12 years old with hobbies who wants to share they achievements.
Overall Process
1
Create Basic Prototype With Sreens Structure
Speeds up development process and suitable for discussing logic with team.
2
Create Visual Identity
Create moodboard presentation for client and explain possible style solutions.
3
Update prototype with selected style
Since development is in sync with design applying new style is fast and easy.
4
Present Design To Client
Presentation with features description.
Basic prototype with screen structure
Since we wanted to speed up development process I decided to create app structure with draft components to discuss possible MVP features with the team.
Also prototype was detailed enough for our developer to start building logic and create components.
Also prototype was detailed enough for our developer to start building logic and create components.
App Structure
After discussing prototype with team and client we decided to simplify registration and added some changes to logic and conception.
Visual Ideas And Symbols
Client didn't want app to look too childish, so I tried to find compromise between visual details and functionality.
Application combines 2 main functions. Skill development and interaction with friends in a playful way. I assigned 2 color associations to those concepts and got a color scheme.
Application combines 2 main functions. Skill development and interaction with friends in a playful way. I assigned 2 color associations to those concepts and got a color scheme.
Branding
Logo consists from 3 parts.
Text part is "WOW!" exclamation in сomics style.
Background element is a bubble with comic outline as a symbol of communication.
Also we added stars as a reference to popularity and fame among users.
As nuance background elements we use icons of children's hobbies.
Based on the concept as a possible slogan and the main message of the project i suggested phrase "Progress is fun!"
Text part is "WOW!" exclamation in сomics style.
Background element is a bubble with comic outline as a symbol of communication.
Also we added stars as a reference to popularity and fame among users.
As nuance background elements we use icons of children's hobbies.
Based on the concept as a possible slogan and the main message of the project i suggested phrase "Progress is fun!"
Logo, Icon And First Screen
Elements style
Since too minimalistic style was not suitable for our target audience I stylized elements, made them more detailed and added outlines and shadows to make them more interesting to look at and interact with.
Clickable items are animated.
Basic actions are also accompanied by simple sounds.
Clickable items are animated.
Basic actions are also accompanied by simple sounds.
Overall Elements Style
Icons Style Searching Process
Onboarding
Onboarding is classic and consists of 3 steps with features description.
Onboarding
Feed and Quick Actions
The feed is made using simple comics grid so that you can visually rank the content according to the popularity and possible interests of the user.
In certain places of the feed there are stickers with emotions that enhance associations with comic books and allow you to diversify consumption of the content.
The feed is also seperated with promotional blocks that can be used to direct the child's attention to certain content.
When you tap and hold the content menu appears, allowing you to quickly perform basic actions with content:
- React
- Comment
- Add content to tasks
In certain places of the feed there are stickers with emotions that enhance associations with comic books and allow you to diversify consumption of the content.
The feed is also seperated with promotional blocks that can be used to direct the child's attention to certain content.
When you tap and hold the content menu appears, allowing you to quickly perform basic actions with content:
- React
- Comment
- Add content to tasks
Feed and quick actions
Materials And Goals
Users can add content and use content of others as goals.
For example I like the picture of a dog from other user and want to draw something like this later. I can add it as a goal and it will appear in my goals list.
For example I like the picture of a dog from other user and want to draw something like this later. I can add it as a goal and it will appear in my goals list.
Types of content
Profile and Progress
On the profile page there is a progress bar with user level. Users earns points for typical actions like completing goals and adding new content. The higher level you have the higher places in feed you get. This means more popularity and respect from friends.
In profile you can manage interests, this will affect content what you will see in feed.
In profile you can manage interests, this will affect content what you will see in feed.
Profile And Interests
Audio upload steps
Because most of 7 years-olds only starts to understand how to write, we decided to add ability to add audio comment for user profile and content.
While researching analogues it became clear what the easiest way to do that is by using modal window with 2 steps.
While researching analogues it became clear what the easiest way to do that is by using modal window with 2 steps.
Audio Upload Steps
Avatar Constructor
To make using app more personal and fun we decided to add custom avatar constructor. Avatars are created from pre-drawn face elements.
Rendering style is low-detailed, since avatars are used in the interface in a small size and tiny details become no longer readable.
Rendering style is low-detailed, since avatars are used in the interface in a small size and tiny details become no longer readable.
Avatar Constructor
Prototype
Current prototype made in figma is in russian language only.
The project is now under development and will be updated soon.
The project is now under development and will be updated soon.