The Day I stopped designing Just Another EdTech Startup & started designing the Medium of Education
Benchmarks, analytics, wireframes and how to keep it simple
The 20th of December.
I came up with the idea that Medium has quite the same structure of distributing knowledge as I* implement:
- Knowledge is divided in small portions (here they are called stories).
- These small portions are united in one topic (here it is called a collection).
This simple division describes the structure of the course that consists of atomic lessons. By atomic I mean one lesson covers one piece of knowledge.
* By I here I mean me and the EdTech product I am designing — Stepic. Behind Stepic currently there is a team of 7 people, more than 11k users, two significant milestones: the birthday on the 1st March 2013 and the beta release on 3rd September, and some more details, but not to be told now.
Medium’s collections
There are some assumptions for courses/collections that work both in education and Medium:
- There are many collections on approximately similar topics, i.e. Design or Writing.
- One article is possible to add to several collections.
- When writing a post you could share the draft to your collaborators.
These 3 assumptions that were laid in Medium were also our basic thoughts on how to organize the new educational stronghold:
- Many professors from similar areas could create courses covering different aspects of one topic. That’s why many courses on Journalism or Physics are possible.
- Pieces of knowledge (our atomic lessons) are like LEGO-bricks: you could use one brick to build a space shuttle or a table in your kitchen or a dino’s tail. The same is with knowledge — a lesson on Königsberg bridges is helpful to learn both Bioinformatics and Combinatorics and perhaps even Urban Planning.
- There’s always someone who knows what you don’t know. Hence contributing to lessons as one does to Wikipedia articles is crucial.
Taking into considerations that Medium’s and ours starting points have the same directions I decided to keep on researching how Stepic could use Medium approaches as benchmarks.
Navigation
I started to analyze the architecture of Medium — what is presented to users first, how to get to the smallest item (story) from the main page, what are the one-click-access, two-click-access and three-click-access elements, etc — and created some initial screen flows.
1. Main page
The main page of Medium contains a header, a list of posts with 3 range options and a footer with 3 links. The header itself has a menu button which is a logo, a big picture, one call-to-action button “New Story”, the site’s name and its motto.
The selections of elements on the main page tells about Medium’s orientation on content.
Looking at the content through the lens of education: collections = courses and posts = lessons. And here’s a question. Why do course-providers hide the content on their pages?
Challenge
Many platforms with online courses have not content-oriented main pages with either no courses/lessons shown at all or with more than half a page containing irrelevant to the content information.
So the challenge is to change the attitude of course-providers and learners towards the content. And implement best practices of iOS App Store or Mac Store:
- a large carousel,
- accents on one large icon + one title in bold,
- both collections and items.
Therefore the orientation of content implies not only collections (courses), but also items (posts on Medium, applications on App Store, lessons on Stepic) to be presented on the main page.
On the sketch above both courses and lessons are shown.
The “Top courses” block contains the carousel where a current banner shows the most required information.
This banner’s elements:
- Course title
- Time indicator (horizontal line) shows when the next banner comes by slowly disappearing from the left to the right
- Left and right arrows switch between banners
- Course icon is unique for each course featured on the main page
- Number of lessons in this course
- All lines, text and elements described above are used for enhancing typography
2. Collections
Talking about collections of stories on Medium one thing is worth noticing — Medium is still about content. There is a list of stories with good spacing between and only necessary details. Stories are possible to range by 3 options as ones on the main page.
And the list is headed with a short description, a big picture which is also a collection’s avatar, and a number of collection followers.
There’re special collections as well with advanced characteristics.
Anyway the goal of the collection is to give the content to users keeping a one-way direction. That means users entering the collection page see the order they are supposed to consume the content.
Challenge
Course-providers try to put everything they have about the course just on the very first course page. Even if there is a separate course landing page with detailed information. So entering the course page a user sees plenty of ways to go on, mostly discouraging.
The problem is in providing the fast access to lessons from the course page. Rearranging tabs and starting not from announcements, but from lessons’ lists is an option.
Nevertheless, two clicks yet is more than one click.
The initial Stepic’s vision of tile-presentation of content fits Medium’s idea of one-click-access from the collection page.
One-click-access to items. Check.
White space. Check.
One direction to consume content. Check. And possible to change the direction (by date or by order) keeping it single. Check.
Chapters and numeration. Check.
Clear. Simple. Swiss design. Check. Check. Check.
Content-first principle.
Other information is placed either in the header (may be with a help of a dropdown) or in the footer of the course page.
3. Items
Now it’s atoms’ turn. Speaking about stories or lessons.
When reading a story on Medium nothing distracts you. You start with a header covered by a big picture, read the story’s title and subtitle, throw a glance at the author’s name and the collection’s name and then scroll down or just click the arrow to read the story itself.
On a story page there is only content. Nothing more. Text. And illustrations.
A user had a long march from the main page through collections to finally grab this item. And there must be a clear way to do it.
Challenge
Course-providers compose overwhelming lesson pages. With a lot of distractions. There are some options to eliminate some distraction. But the issue is about how to make it better from the very beginning.
Codecademy shows an example of a great try: it hides all the external navigation and information to keep users strongly concentrated on the lesson. However, there are more than one ways to consume the content. And some bells and whistles confuse a bit.
Since Stepic runs lessons in a special player (like the one on YouTube) it will be appropriate to show the process of consuming the content on the example of YouTube item (video).
This is a video on YouTube. Yes, the one in the left top corner with Ads by Google on it.
And this is a video if YouTube were Stepic.
So here comes the wireframe of Stepic lessons page.
One more thing is about progress.
When a user finishes reading one story on Medium another story comes.
The same works with lessons.
And some statistics on the current lesson appears.
4. Dashboard
Now it’s time for statistics.
Medium has a separate page showing stats for all user’s stories.
But it only covers user’s story as a creator. Not a reader.
But when it comes to courses and lessons one should know what courses were taken and what are their statuses.
Challenge
Sometimes it is really hard to understand your progress though all the courses (perhaps the most relevant information you’ve ever needed) when looking at the dashboard. But instead a bulk of trash details is given.
Why do I need to know whose course it is (I’ve aleady taken it and read the course info) and what is this awkward progressbar for?
Un-enroll as a call-to-action option here?
Are you kidding me?
My task was to make it as easy as pie to understand:
- what course is it (remember — you’ve already taken it),
- what progress is,
- some epic meaning,
- the final deadline, so say when the course ends.
And to keep the overall grace. That’s why I suggested the following sketches.
One banner starts with the status (a crown means everything is solved now) and ends with the end date. Seems legit.
Conclusions
Finally I want to highlight some ideas from this post.
- The content-oriented main page contains not only collections but also the content itself.
- Make it easy to consume the content.
- Nothing should distract users from their aims. Don’t be afraid to simplify.
- Accent the main elements. Keep it simple.
I will be glad to hear your feedback and any suggestions or improvements on ideas or text.
If you liked the post I appreciate you hit the Recommend button.
