Social Network For Young Creatives

Gamifying E-learning Through Social Interaction

An In-depth Look Into Pixel Perfect Visual Design

Client
Mykenz
Year

2017

Scope of Work
  • Visual design
Deliverables
  • Web Application
  • Mobile Apps

How can we enable young creatives to learn skills through gamification and social interaction?

Frame

I worked on this project while I was still at Mint IT (Huge shout-out, great partner if you have development projects). I think it is the biggest project that I worked on till now in terms of sheer scale of the deliverable.

I didn’t do much UX outside of revising the wireframes and tweaking some usability issues. The focus was pretty much on visual design. I’m not happy with the way it has been developed (through a freelancer) but I think the case study can be useful.

About the project

Mykenz is a social e-learning platform that helps passionate people develop their talents in various fields such as game development, robotics, web development, film making, and many other disciplines. It offers free online video courses and the best projects are rewarded through its online contests

 

01. Discovery

Understanding the platform

Getting started

Mykenz combines a fully-fledged social network (think something like early facebook) as well as a complete e-learning platform (something between Lynda and freecodecamp). So in terms of features, it’s a complete beast. So the best course of action was to see every feature on its own and then build it all up together.

Social Networking Features

News Feed

Contains post from the user, their friends, the pages they like, their groups as well as curated posts from the Mykenz team

Profile

Has the user’s information, a list of their friends, froups, courses as, well as a log of their activity such as likes and follows

Pages & groups

Pages can publish content like a regular user and they appear on the follower’s newsfeed. Groups have content solely on the group’s page

Posts
Friends
Pages & groups
Projects
My Kenz TV

Social Leanring Features

Skills library

The platform contains a series of courses uploaded from numerous partner members called mentors. The courses are curated and organized into diciplines

Course

Video tutorials with a text summary. Each course is divided into 3 chapters which are divided into 3 chapters containing 3 lessons each and a project. The course isdone when the final project is done.

Showcase

This is when users can discover projects made by other users and get in touch with them in order to give feedback or collaborate on assignments

Projects
Quizzes
Mentors
Trophies
Interactions
Site Map
2. Design System

Consitency to the last detail

Now that the project is well layed out, we need to define a visual language to adopt all around. A styleguide is not only about fonts and colors, it’s about spacing, hieratchy, the choice of components and much more.

1
Navigation header
2
Footer (for non-infinite scroll pages)
3
Pagination
4
Course index
5
Project card
6
Gallery Card
7
Options popup panel
3. High Fidelity Mokups

Bringing It All Together

All the pieces of the project are now readu for implementation. All that’s left to do is to build the interfaces and see if it all makes sense when brought together. Here’s a rundown of the major screens

Landing page

Home Screen

I can build one for your

Need To Get Things Done?

Leave your contact information and let's schedule a call

Get in touch