Video Walkthrough | Media Coverage | Timeline – 2013-2015
What is Function Space?
Function Space is a social learning network for science that provides a complete ecosystem (articles, video lectures, problem-solving, discussions, and networking) for participants from academia to corporate research. If you like e-learning science and want to connect with science lovers over the globe, Function Space is the network for you.
Design has always been at the core of Function Space. When we decided to go ahead with the second version (V2) of our product, it was quite clear that we will have to rethink our design so as to make the experience more engaging, intuitive and fun. This would be an MVP as against an OVP. An OVP has a well-established market with extensive customer data that needs to develop a long-term competitive advantage.
The first version (V1) of Function Space had a functional and usable design.
It was appreciated by users and received a lot of positive feedback. But was this enough? As good as it may seem, it still had a few user experience issues. The design was good but not thoroughly engaging for the user. The UI layer was doing its job well but we were not getting great results at the UX level.
In mature markets, where you have stable, usable products, taking it to the next level means focusing on more experimental things like emotion, clever language and aesthetics.
It then reflected upon us that we will have to rethink the whole user experience for V2.
Research & Concept: Focus on User Behaviour, Psychology and Design
“Recognizing the need is the primary condition for design.” — Charles Eames
With V2, we decided to change our design approach and focus on user behaviour, persuasion and psychology so as to create a more engaging experience.
We decided to follow the top-down approach as we were relatively well placed in terms of functionality, reliability and usability of the product. Our focus was then on the first two tiers of the pyramid. A meaningful product should be of personal significance to each user whereas a pleasurable experience comprises of friendly language, aesthetics, arousing curiosity, creating flow and leveraging game mechanics. Moreover, the Hook Model was kept as the basis for user experience on the platform. The model has been described in the book Hooked authored by Nir Eyal. It’s based on the study of psychology and cognitive biases that can lead to a good user experience.
Simply speaking, the Hook Model describes a cyclic process comprised of Triggers, Actions, Rewards and Investments. You engage users with triggers like emails, notifications, newsletters, recommendations, etc that lead to user actions on the platform. Users are then rewarded for these actions and thereafter they invest on your platform in the form of contributions and higher engagement.Keeping these factors in mind, we introduced some new features on the platform:
Personalisation — To let users choose their favourite subjects and levels so that they can get appropriate content on the platform. This covered the “meaningful” aspect of the pyramid.
A centralized real-time feed — Central location comprising of everything on Function Space based on users preferences— Peer activities, Discussions, News, Books, Articles and Challenges. A real-time feed meant reduction in cognitive load thereby making the whole experience more pleasurable. (second tier of the pyramid).
Quarter Topics — Sharing 4 interesting science topics in a day with users to keep them engaged on the platform. (Acting as a trigger)
With most features decided, it was time for Wireframing and Interaction Diagrams.
Wireframes and Interaction Diagrams
Wireframes and Interaction Diagrams were hand drawn on a dot-grid book. Paper and Pen are always more easier to express ideas ☺. Each screen was color coded and notes were added for better understanding of UI and UX.
The Design philosophy was based on separation of concerns. Navigational elements were kept together in an expandable sidebar. The real-time feed was kept at center and occupied 8 grids. All platform notifications occupied the top-right corner, search in the center and Quarter topics on right(just like additional notes in a text-book). Interaction Diagrams were created as an overlay on wireframes to get a better IXD understanding.
User Interface — Layout, Colors, Responsiveness, and Typography
V1 of Function Space was built upon a customized version of Bootstrap and it worked really well for us. V2 was to ship within a month(including design + development), and hence it was decided to use a well-designed framework rather than reinventing the wheel. We went ahead with Flat UI and customized it according to our needs. It’s built upon Bootstrap and made it easy for us to quickly implement the UI for our wireframes. The color palette was mostly based on Flat UI with some subtle variations.
The whole UI layer(with RWD) was completed in 3 days which gave us enough window to properly brainstorm the typography. We researched various websites and went through several typography articles and blogs to get the right match of typefaces and typographical elements for our platform. Font Book helped us a great deal in making the decision. A combination of Slab Serif and Sans Serif seemed perfect for all the content on Function Space.
We went ahead with Proxima Nova, a beautiful Sans Serif Geometric font for body copy and Skolar, a Slab serif font for headings and titles. Word spacing and letter-spacing were adjusted according to letterfit, type, and size. Unserifed faces look best when set ragged no matter what the length of the measure and that’s what we did with paragraphs that were using Proxima Nova as a typeface. The ratio of line-height to body copy font size was kept at 1.70. Most typography books suggest a ratio of 1.5, however, we had a longer measure and increased the leading accordingly. With every design element figured out, we were ready to showcase the newly designed Function Space to the world! ☺