Hey, how's it going? :) My name is Lana. I'm a business analyst at Fulcrum Rocks. Today, I will share with you the key principles of creating an educational website design using the parenting website Bloss as an example.
Bloss is a platform that connects people who are planning to have kids or already have kids with experts who can help them along the way. Bloss is dedicated to the entire journey of parenthood. Therefore, it will also be suitable for nurses, grandparents, single parents, kindergarten teachers and so on.
This is an educational website and it has its peculiarities. For example, it appeals to different audiences - "learners", experts, and brands. Bloss brings together parents, grandparents, parents-to-be, and experts who can help plan a pregnancy and raise a child (from nutrition to legal advice).
Thus, the flow of the project will also differ. How? Let’s figure it out!
The Discovery stage as the first stage of product development
Some entrepreneurs and startups think that working on an app or a website starts with the design, but it doesn't.
Any self-respecting company starts with the discovery phase. This is exactly the phase where development companies conduct research that is super important to the success of the project. Forewarned is forearmed, folks. They also conduct evaluations and create prototypes. Based on this data, they can move on to designing the product.
For the Bloss project, the Discovery stage consisted of:
- a vision workshop;
- MVP scope research;
- product vision;
- decomposition (epics + user stories);
- user flows;
- design brand book;
- technical requirements.
User flows are a super important part of the website design process. They show the user's journey from point A to point B (each feature needs to help the user achieve specific goals). You see the problems and inconveniences that can appear. Hence, come up with all possible flows for all types of your target audience. Provide them with the functionality they need at all stages.
Bloss, for example, has four user types - experts (+ advanced experts), parents, organizations, and site administrators. We worked out flows for each target audience. You can check them out here.
Let’s take a look at the Expert flow. An expert should be able to sign in, manage a profile, work with content, edit an account, and connect payment details. This flow also has smaller steps - adding/removing a photo, adding/editing first and last name, adding social media accounts and websites, adding locations, etc.
One of the deliverables of the Discovery stage is the PRD (a product requirements document) where you can find:
- an MVP design prototype;
- brand identity;
- the main page concept;
- design scope research;
- a website design prototype;
- a design brand book.
How we did it:
Have all this information? Cool! You can start working out educational website design.
Visual Positioning of the Educational Website
Colors, typography, materials, shapes of a logo, website, or business cards are components of the brand's visual positioning. It’s the first thing you face when you meet the brand. Since the first impression matters a lot, visual positioning is very important. It creates memorable experiences for the customer. It helps build emotional connection and, in the long run, trusting relationships with the brand.
Successful visual positioning shows the values of the company and tells what it is all about. It intrigues and attracts so that the customer has a desire to learn more.
To create a brand identity for Bloss, we used a visual positioning matrix technique. It helps identify the most important aspects and their effect on branding.
It has two axes that stand for important values of the market. The first axis has Simple and Complex positioning. A Simple variant is perfect when:
- you will use a logo in small sizes (favicons, app icons, etc.).
- a logo will be extruded on a real device or will be made of hard materials.
- a product target audience is aged or has vision disabilities.
Complex positioning is perfect when you want to show the long story and legacy of the brand behind it (Porsche logo). Also, it’s suitable when you want to show that it gathers multiple products or directions (Unilever logo).
The second axis represents Concrete and Abstract positioning. Concrete logos are for a single product that people use in everyday life. They represent objects that people use while using your service. They are a must-have for a young audience with a lack of background to recognize the abstraction on the logo. Abstract logos work best when:
- a logo is a master brand sign;
- your service is intangible.
In the case of Bloss, we decided to walk a line between concreteness and abstractness but stuck to the simple logo. A speech balloon represents a conversation between an expert and the one seeking advice. The “B”, like an anchor, stands for the first letter of the name of the product. And a heart represents love because what’s parenting if not love :)
You can learn more about the product positioning matrix for Bloss here.
A brand book is a magic document that contains your company's visual style standards. It describes the main values and features in brand promotion and development.
Why is it important? If you don’t have a single set of rules, every designer and marketer might implement their ideas according to their vision. There is nothing wrong with diversity. But lack of unity can work against your brand. Using different design styles and techniques for interacting with people, it’s harder to build a strong brand and convince potential customers that your company is the best in its segment.
The well-developed and consistent style adds ten points to brand awareness. For example, the style and visual design of MasterClass and Coursera are already easily recognizable.
Of course, we did it for Bloss. You can check it out :)
Visual guidelines for educational website design should cover:
Logo – its colors, size, proportions, variations for different platforms, social media, channels. How we did it for Bloss:
Decide on primary and secondary colors and a monochrome version. How we did it:
Discuss the corporate fonts that will be used on the website, in social media, in headings, bodies, in documents. The results of our brainstorming session:
Patterns is a perfect tool to solve branding boredom and reinforce branding. It supports brand message and consistency in educational website design. You can use it as a background in social media, for branding graphics, buttons, as an overlay on images, design for the newsletter, etc. Our choice:
Brand elements including graphics, elements of web design, banners, buttons, shapes, colors should be carefully selected and stay consistent. According to the Lucidpress report, the annual revenue of the brands with consistent design is 23% higher. A tiny example of what we did for Bloss:
Now, when you know why visual positioning and a brand book are that important, we can move directly to educational website design.
Common Features for Online Learning Platforms
Yes, every educational website is unique. Still, there is a set of must-have features that every educational website needs in 2021. By the way, all of them are implemented in Bloss ;)
So, let’s go over them quickly:
- Experts are verified through user ratings and reviews (all experts are certified, have specific to their field qualifications).
- A website is full of useful content, both freemium and premium (series, videos, blog posts).
- An opportunity to schedule online meetings or in-person appointments & DM experts.
- Expert calendar & eCommerce integration (e.g.commission for experts services).
- Extra services for subscribers (e.g. chat forum & marketplace).
- Functionality to market own business (for experts).
- Seamless touch-free payments (Stripe, Paypal).
- Instruments for parents to manage their lives and parenting (e.g. planners).
- Support from Bloss.
We also promoted experts across search engines, social media, and used e-mailing and ads to get them discovered.
So, our approach was quite comprehensive, based on the needs of this educational website. That’s what we do for each client. Because we love each project and want it to resonate with as many people as might reap the benefits of it.
Want your project to be born and grown in love? Drop us a message. Fulcrum Rocks will help you!