Physium — learning hub: landing page showcase (concept)

Daniel Denver
5 min readNov 4, 2019

--

Physium — is the leading online and free education platform, where folks can learn physics, math and other exact sciences on their desire

“Physium — learning hub” presentation shot on Dribbble.com

About Physium

Physium is a learning resource for those who’s in love with physics and applied science. Its resources and knowledge base are all FREE, created by community unless you want to better schedule your learning with the real teacher, attend classes and have a mentor to find a job with help of our expert.

Physiusers have access to videos, articles and exercises and to make their learning more fun and confident they get rewards achieving set goals and answering quiz-like questions after each video and article. Also in Free account you’ll get schedule and projects templates.

Features

  • free-to-use resources
  • videos and exercises
  • community and feedback
  • teachers and experts
  • job search
  • learn & exercise management tool
  • schedule and templates
  • goals, rewards and achievements
  • learn & fun
  • growth and control

My role

I’ve done everything what you are seeing here.

  • User experience design
  • User interface design/IA
  • Logo design
  • Content
  • Illustrations
  • Visual design

User experience approaches

At this point I’d say the main UX approach for this project is gamification on both visual and interactive pieces of such marketing tool like a landing page.

So, as long as the main goal of this landing page is to get visitors involved in learning physics, assure them that it’s all FREE and the learning path won’t be the hard, but playful one. We need to get their emails, and convert visitors to students using email campaign aimed for those who had signed up.

How do we get them involved in the first place?

Let’s dive right in with the most important tool in design.

Empathy map

Empathy map that i tried on Miro.com recreated in Figma and loaded with our data

This empathy map is based on users experience they walk through trying to find the best solution to learn science from scratch. Physics to be more specific. At this stage we listen carefully, as what users (in this case students, which are the future users of ours) say, feel, hear around and what they do about it. And in fact that isn’t necessarily what they really say, feel, hear and do. Because you know… We’re social yet emotional species. You get the picture🙃.

So, it brings us further to the next point of design. The point where we define adventure our visitors are given to take to achieve their goals. It’s proudly called ‘User journey map’.

User journey map

User journey map defines the path and critical touches for users on their way

Using this tool is essential in design process. It helps us find all of the bumps and disruptions user might meet on the way to the goal. Speaking of which, I can say that this is the very point why we’ve gathered in design and product development industry in the first place.

Pointing out all the bumps, pain points and struggling on the way clarifies the funnel stages we get the users in. Respectively, we now know what impact we need to put to get things done.

This is where AIDA funnel comes in to play.

Funnel

AIDA model with additional bad boy called Success!

It’s a predefined template for marketing workflow, but as we’re building stuffs brick by brick it’s crucial to adjust each stage to our needs.

Now it’s time to build the structured skeleton so we can see very clearly where and how we should put the content.

Wireframes are here to help.

Wireframes

Low fidelity wireframe/sketch just to put text and contents around the page for both mobile and desktop
Low-fidelity wireframes created just to put contents around the page

As you remember we live in 2019, so it’s a good tone to start from mobile and rearrange stuffs on desktop version of the website.

These are quite differ one from another. And it’s no secret, that these are different devices as well. For this reason we need to find best experience solutions for both and in between (I mean tablet).

That being said, it is completely okay to have them alter just a bit, as different devices give us different experiences.

But this only touches us when we will come into development mode.

Now, when contents are put on their places, the flow meets its requirements and the funnel touches the gutter in the end, we now should define style and overall surface for Physium’s landing page.

Showcase

“Physium — learning hub” logo

Yeah, not the best logo ever. But it clearly represents science-ish and adventurous mood and impact of that product.

So, let’s take color palette, fonts and shapes from it and apply it on the landing page. Or at least similar ones. Why not? We definitely can and may do that.

Here we’re coming to the end point of the great adventure.

Meet the Physium’s stylish landing page.

Physium landing page adapted and mocked on devices

Styles

Typography and color pick for Physium’s landing page

Work

Figma workspace screenshot

Wanna screenshot of WIP of mine? Here you have it!🙂

Final mockup?

Yes, for sure.

The final version of the landing page for huge desktop (1920)

Here we came to the end stop of our marvelous adventure of creating promotional landing page for non-profit online resource and learning hub.

All the type, colors and custom illustrations packed up together bringing story to the light.

Conclusion

As a new digital product for those who want to learn physics, but fear lack of information out there, it was definitely interesting possibility to make this product useful and usable. And the main goal of this landing page was to involve people in and assure them that there’s no anything impossible.

Physium — gathered by community of advanced learners, teachers and content creators.

Welcome on board!

Created by Daniel Denver — 23 y.o. UX designer from Berdyansk, Ukraine.
Ready for work and open for the new horizons of polished digital experiences.

I’m on Twitter: @i_am_denver66
and on Dribbble: iamdenver

--

--