Before even getting onto drawing & storyboard, the idea was unified, to provide design which is “Minimalist, Fast, Responsive & Precise”. Now that the vision was clear, our designers along with our engineers started designing multiple-draft UI designs & layouts.
The designed layout was sent for a review to across team and the winner was “the live site” which you are accessing.
Design Idea
Designed with evergreen classic white background as a base, the team got onto work. Since its a website with users being students we have added lots of our information via visual medium (Image/videos) instead of plain text, which gives user an experience instead of user have to feel like going through a word document.
Along with a classic white background , we have used a lots of gradient color option to increase visual appeal even of a simple content placed on a button. Yes, that’s right, even for a simple button our team chose gradient, that’s the attention we pay even to the smallest details to better user’s experience on our website.
Content Delivery Aspect
After preliminary designs , it was time to focus on the important aspect, the content aspect. Our design team sat with our technical team who’s responsible for all the course contents & resources. The technical team worked hard in making sure the content which is delivered puts user’s ease and experience first. Here’s our chat with our technical team’s head of content delivery.
We may have 100’s of video contents, coding sheet & other resources to showcase our user, but if that isn’t provided them which supports content delivery on across format & platform, the purpose of knowledge transfer is defeated. To provide effective & optimum experience, we’ve added lots of features, out of which these are the one’s which stands out in providing efficiency to users
1. Resolution Selection Option :Now that almost everything has gone online, the data usage & speed of the broadband have been put to test, and we do not want to burden our user by our content having to use more data, hence we provided an option to user to select a resolution as per their broadband’s data usage & limits. The resolution starts from 240 P and goes up-to 4K for some videos. Learning has to be as visual as possible, that too when you’re working on hardware aspects, Personally, here’s my favorite part, we have also provided Auto resolution feature, where the video player auto adjusts with the speed of the user’s bandwidth.
2. Chapter Marks : We provide users with varied exciting contents on emerging technologies, for better navigation and to lessen the user’s time spent of working with the forward & reverse toggle on our video player, we have provided chapter marks within the video. What chapter mark does is its acts as a Sorter, the user can select exact part in the video which they want to view/re-view. Our video content has different aspects such as “Overview Part, Hardware Part, Coding Part, Coding compilation part’ App development Part & output part” , the chapter marks assist them to go the precise part of their choice, thereby limiting the time in navigating within the video and effectively increasing the time in learning.
3. Resource Downloads : Coding Sheets & additional resource which user’s get along with the Premium & Pro internship is made downloadable, which makes the learning part even better as students can use these for their Research & project works.
We have made sure, highest of attention to given to user experience, at the end of the day, they should be engrossed in learning rather than having to wait for video content to stream or design of website to render.
Head – Content Delivery (Tech Team)
Content Development Aspect
Our design team sat with the content development team who oversees the contents made available on all formats ( Videos, coding sheets & additional resources). The content being the most important factor as that’s what the site is all about, our content development team meticulously planned every aspects of it, right from the word go, the literally were into it continuously working day & night. Let’s here from the head of Content Development team.
Now that the world has opened up and open-source platforms are making lives easier in terms of innovation & technological development, our challenge, rather objective was to make sure we do not over-burden the user to lots of contents at the same time we also did not want to disappoint them by providing simple contents. We want our contents to be useful from a beginner to an advanced user, synergy was important in order to cater to all users. Firstly, we designed a flow for the video, almost all our video contents are worked upon on this flow ;
Session Overview -> required tools -> Session’s project application -> hardware part -> sensor overview & brief -> coding part -> software & online platform explanation(if any) -> coding compilation part -> output part.
We were just finalizing the contents during which another question popped, what will be the duration of each video (which we call a session), now this brought us back to brain-storming. Through our experience of 10 years , we were quick to come with a solution, there cannot be a set time for a video, practically it is not possible, as our contents are designed such that as the sessions progresses the content’s level progresses ( i.e we start with simple projects & end with a complex part as per the internship selected). Hence, we came up with two default templates based on project’s nature.
1. A time-frame of 8-15 Minutes for session
2. A time frame of 15-25 Minutes for a session
Even for this derivation, we had to relay upon experience of our engineers who have trained over 41600 students, on an average student will take 3-4x of the video run time to complete a project, our engineers were able to demonstrate within the said time due to their experience , for user who’s a beginners / intermediate level ( a 8 minute video will take between 30-45 Minutes for student to complete) as he has to work on hardware, work on software & see the output.
To making the coding part easier, we have provided a coding sheet, and our content delivery team even made is downloadable so that it adds up to the ease. Along with the coding sheet, we have provided additional and very important documentation “Coding Terminology/Glossary” . We want our users to not just code or type what’s given under the coding sheet, we want them to understand each function and its characteristics before typing it.
We will regularly update new features/resources to sustain the ease of learning on our website.
Head of content development
These were the ideas which we were able to successfully implement on our website.
Until next time.
Take Care,
Your friends at Barola (Design Team)
