Redesigning Function Space

Making science more beautiful

Adit Gupta
Jun 16, 2014 · 6 min read

“Recognizing the need is the primary condition for design.” — Charles Eames


For those who have not heard about us, 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.

Discussion screen in first version of Function Space (V1)
Articles screen in V1

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.

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.

The User Experience Pyramid. Arrow comments refer to design status in V1

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.

The Hook Model

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 centralised 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 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.

Wireframe for preferences modal screen
Wireframe for centralised feed

The Design philosophy was based on separation of concerns. Navigational elements were kept together in an expandable sidebar. Real-time feed was kept at center and occupied 8 grids. All platform notifications occupied top-right corner, search in 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.

Interaction Diagram for real-time feed

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 variatons.

Color palette on Function Space

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.

Proxima Nova
Skolar

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 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! ☺

Function Space Home page
Preferences screen
The Knowledge Feed
Beautiful search. More about search technology in upcoming articles.
Learn section
Profile page

Function Space is the result of our love for science, design and technology. We have created some exceptional tools (like compute and equation caller) to help you learn science in the best possible way. So, why miss all the knowledge and fun? You can get started here and tell us how you like it. ☺

And yes, we have an iOS app coming very soon!

    Adit Gupta

    Written by

    https://aditgupta.design

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade