This document is created for all teams who are operating within Embibe (Product, Tech, DSL, Content, Media, Marketing, Design) and external vendors (Agencies, Vendors, Freelancers, Contractors) and partners (Both Business and Strategic) who use and create Embibe brand properties across all products. This is a visual guideline reference to Consumer Student Application across platforms.
The Design Process: 5 Thumb Rule
The process is not serial of step by step and but happens parallel as the output and inference from one feeds to other and vice versa
Empathise: Design process always begin with thorough research of Similar products (Design Research Template) who operate in the same genre and also products from different genre which showcases or captures behaviours which can be benchmarked as well to the feature or functionality that we are trying to build. Empathy for the user is at the forefront of all research and features.
Define: Cross-functional teams (Design, Media, Data Science, Academic, Content, Marketing & Tech, Users) collaborate and Identify and define the problem we are solving
Ideate: Cross-functional teams work agile to ideate rapidly to solve the problem and approaches are outlined. During this phase, workflows, tasks flows, user journeys (User Flow Template), tech dependencies, algorithms are drawn coupled with quick and dirty design to get everyone on the same page. Designs are tested for use cases (Research Scope / Plan Document) and validated across users (User Research Template) and teams to get it right the first time. Design team continues to build hi-fidelity mockups while the other teams work parallel to co-create.
Prototype: During this phase,all teams work in tandem to build a high fidelity live prototype (Sample prototype) with data, interactions and content to bright the idea to life. Responsive designs(Sample Responsive Design) for various platforms and devices are made during this phase to improve accessibility and span across devices and browsers.
Evaluate: This phase involves rapid testing of the flow for all uses and edge cases validating it with users. Feedback received is quickly pushed to the define phase to redefine the problem or to the ideate phase where the design is iterated and tweaked
Design guidelines are sets of rules and recommendations for good practice in design. They are intended to provide clear instructions to designers and developers on how to adopt specific principles, such as intuitiveness, learnability, efficiency, and consistency. Instead of dictating conventions, design guidelines provide helpful advice on how to achieve a design principle that can be platform-specific or cross-platform. Design Guidelines are fundamental truths that can be applied anywhere, like design principles. They’re also not about telling people exactly how to do things, like design rules and their applications.
Considerations:
The guidelines have been created in mind keeping kids who are:
5 years and older
Have an understanding of a basic vocabulary and interactions and usability of various digital products across desktop, mobile, TV, Wearables and have developed expertise in the use of common user-interface design patterns on a range of devices
Understand the psychology that manifests into the behavior to design effectively for any audience, both younger or old, a designer should have an understanding of who they are creating for and the mindset of their users.
The current generation of kids is the first generation to be born into a world where technology is extensively integrated within the functions of society. The current generation has not seen the struggles and transition of computer and communication devices and has been born into the world of smartphones, smart gadgets, computers, and gaming devices. This has insulated a tendency among kids to experiment, look at the problems and solutions on their own, and therefore have become capable of achieving it independently. Even though the current generation is born into smarter times, there are different challenges and considerations when one has to design for kids.
1. Age groups are way more diverse in kids than the adults
“Kids are a very different and distinct user group in almost every alternate year”
Kids from different age groups have different comprehension and cognitive abilities, therefore it’s important to create content keeping different age groups in mind. This is very important while defining and deciding on the content type, creating the level of complexity, and style of explanations, etc.). These different age groups are:
Kids from 10 to 12 years – Growing up
Kids from 13 to 14 years – Early teenagers
Kids from 15 to 18 years – Teenagers
What does it mean for design:
While designing for kids, ensure that the design also manifests a sense of progression as the kids grow. The design should look different for different age groups.
2. Kids are way quicker in forming opinions, often are very judgemental
“Not every kid would be expressive, however, they notice everything”
In our previous studies with slightly older kids, we have observed that kids form their opinion very quickly, often to the extent of being judgemental. This tendency often results in extreme liking or disliking towards a product.
In one of the Feature videos study we did, we felt that some kids did not like the presenter in the video as she came across more like a TV News anchor. Though the content in the video was explained well, however, they thought that the presenter was pretentious and had no idea what she was talking about in the video.
What does it mean for design:
Use elements that bring credibility. For example – A presenter Should come across as an educated person so that students could believe in what they say and their credibility as a ‘teacher’. They should communicate in a manner that it doesn’t come across as if they are only reading the script.
3. Kids instinctively strive to be adults
“Treat them like kids, however, let them feel like adults.”
Humans like to mimic and the mass media experiences (Movies, games, web) make kids feel like grown-ups. We often see that the most popular games and TV shows generally involve activities or jobs that adults do.
Even in most games and movies, we have observed that adults are often pitted antagonists/ villains in kids’ games/ movies. Being an adult/ grown-up is an aspiration of a kid, often imagine themselves as doing what adults do
What does it mean for design:
Avoid using stereotyped cartoonish figures and images just because it’s for kids, which also doesn’t mean that you create a design that kids can not associate with themselves. Instead, try to strike a balance between the two.
4. Keep it simple but not stupid and should be in sync with the kids comprehension level
“Just because they are kids, it doesn’t have to be dumb”
K.I.S.S is a popular and successful theory often used while creating products for kids, however, kids born in this digital generation, are way more digitally savvy than the kids a decade before, therefore have a higher level of comfort with technology and digital products.
There is a popular saying in design that “if you don’t know how to use it then ask an 8-year-old”.
This doesn’t mean that the product needs to be dumbed down for the kids, however, should be customized at a level that any kid could understand. instead, we can create different stages for kids to seamlessly grasp the product or content.
What does it mean for design:
While creating products, ensure that the design reflects the kid’s mental model. Consider adding different stages in it, so that kids could seamlessly grasp the product or content.
5. Don’t limit yourself while creating the experience, more is better
“Only if I had many options, I could use one”
Kids like to explore, they like to hit and try. While designing for kids, from different socioeconomic backgrounds and different regions, it’s highly likely that no two kids may behave alike in terms of understanding, learning, and application. Therefore using one style of explanation and communicating a concept may not be effective and engaging.
For example, in the past, we have observed that some kids like to contextualize what they learn so that it’s easier for them to understand whereas some kids like to follow the methods as mentioned in the books. Therefore within one concept, introduce multiple methods of learning
What does it mean for design:
Don’t stick to only one method of explanation, using different methods and examples to explain the content.
The design should feel personal instead of giving a sense that it’s ‘common for all.
6. Avoid overdoing, only provide relevant information
“A designer may have many ideas, doesn’t mean they have to use all”
Kids like to explore products however find it difficult to grasp if there is too much information provided. A good design (whether intended for kids or for adults) reduces cognitive load and minimizes the mental resources needed to understand and interact with the system. When the users are young, their working memory capacity is even smaller than that of adults, so it is crucial to pay attention to how much information your users need to carry around to use your interface.
In our previous research we have observed that if there was too much information on the page, the kids did not seem too interested in exploring it, and missed out on noticing important features and CTA’s on the page.
For example, Kids from 7th grade were not interested in identifying their Behaviour ratings while taking up a quiz on the platform, instead were only interested in knowing if they answered correctly or not. Information such as accuracy and behavior only confused them and they were not sure what to do with it. This also gave them a sense that the product is too complex and difficult to understand and was not too keen on exploring it further.
What does it mean for design:
Reduce cognitive load by designing self-explanatory interfaces and preventing possible errors.
Too many products or choices Per Page may overwhelm the users. Follow a focused approach, so that the kids know what to expect and do on each page.
Prioritize information. Layered information across multiple pages instead of putting everything upfront.
Create interfaces that are soothing to the eyes and don’t overwhelm the users.
7. Follow consistency
“Little change is good, more change is not necessarily better!”
Consistency is one of the design principles that often gets violated in an attempt to make the product visually appealing.
Consistency is one of the most important aspects of design. Consistent design is intuitive, helps in improving usability and learnability. If the consistency is followed, it helps in learning and adjusting with the product better and doesn’t require too much hand-holding while using the product.
What does it mean for design:
Avoid using different visual styles for different pages. Different visual styles followed on each page will only confuse the user and they would never get a grip while using the product.
Type sizes defined for the entire platform and consistently followed. Three type sizes defined and used based on the priority of the information on the platform.
Use of Bold font weights only in the case of the most important information on the page instead of getting used randomly.
Brand Guidelines
Brand book can be found in the drive link mentioned below
Our primary colors are Embibe Dark Blue (Navy Blue), Embibe Bright Blue (Cobalt Blue), and Embibe Aquamarine. These colors have been selected to reflect the brand’s characteristics and attributes and to provide visual distinction.
We have carefully chosen vibrant colors to complement the primary colors in representing the brand’s unique characteristics. These also allow for greater flexibility and extendability while creating communication for different age groups across different topics and subjects.
Our typography is as unique and easy to use as we are. It speaks the brand persona in type form. With its smooth edges and clean and modern construction. it easy to read and highly recognizable even in smaller font weights
Embibe icon guides (Adopted from the standard) must be followed for designing custom icons. Primarily, the icons should follow the “outline” theme. Icons must be used only for universal actions or to add support to the text and in no way should be treated as a replacement for text/titles. The icons can be resized in steps of 2px.
The wave styling used uniformly in all our iconography forms is directly derived from the logo itself. it is to be used in a minimal manner giving the icons not only a clean look but also a strong connection to the brand.
Application of the styling must not appear to be forced. In situations where the icon has got minimal elements, the rounded form of the logomark should be maintained in the styling
Considering how various TVs render your application requires an understanding of “Safe Zones”. These are the recommended areas to ensuring the edges of your TV screen which doesn’t crop the content of your application
Consumer App Grid
Grids and Safe zone help in rendering the content suitable for various mobile screen resolutions. Here is the standard resolution which we’ve demonstrated for an error-free layout for the Embibe application.
Desktop website font treatment
Grids and Safe zone help in rendering the content suitable for various mobile screen resolutions. Here is the standard resolution which we’ve demonstrated for an error-free layout for the Embibe application.
The illustration is a very important element of the brand system. Illustration helps to present larger-than-life scenarios. Also, it helps to bring harmony among the brand. It makes complex ideas easier to understand. It represents our Embibe brand’s – personality, voice, and platform – in an efficient and clear way. It can scale up or down depending on the context.
Button interaction in designed accessibility as a primary focus where it has a contrast ratio of 9.86 : 1 and 17.83 : 1 complementing the dark blue background color which enhances the contrast on a digital screen.
A card UI design is an entire interface based largely on presenting the user-customized content on cards. The logic behind this is to avoid long texts and render content more scannable. Even though users might not be familiar with the concept of a card from a design point of view, Users instantly know & understand the cards implemented across the UI.
A drop-down list also known as a drop-down menu, drop menu, pull-down list, (picklist) is a graphical control element, similar to a list box, that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value.
Input Box allows users to enter text or select a choice from a predefined input option into a UI. They typically appear in forms and dialogs. The Input box component design provided a clear affordance for interaction, making the fields discoverable in layouts, efficient to fill in, and accessible.
Toggle switches are used when are two or more mutually exclusive options and always have a default value. Toggles selection takes effect immediately in the UI.
The Graphs lets the user visually encode the website or app’s back-end data into a story that’s both visually appealing and more memorable than a long range of numbers, providing the user’s data that can be acted upon.
Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
Scan to Download the App 
