Background

With over 2.3 million unique visitors on their website, OpenStudy is an educational social network that connects students from around the world so they can get help and give help, on subjects ranging from Algebra to Biology to Physics.
After the success of the Open Study App we began working with them on a new project which would begin to roll out a complex virtual economy into their thriving social network.

Design Closeup

Their Goals

Open Study wanted to create an economy that would allow their users to purchase enhancements to their profile, open study gear and promote their questions to top users guaranteeing efficient, high quality help. This update would create a brand new revenue stream and further engage their user base.
 

Our Approach

Before starting on UX and UI design we held extensive discovery sessions with the Open Study team to truly understand objectives and shape a strategy that would effectively introduce this complex new component to their audience. There is always a risk that changes to a successful formula will confuse and alienate an audience so it was critical for us to determine how best to introduce new behaviors without adversely affecting Open Study’s established and successful user model.

We looked at how other social networks and softwares introduced new functionality and decided to release the various new elements in several stages so that the changes would be gradual and intuitive.

Header

Updating the User Interface

Open Study also decided that now would also be a good time to update their UI and improve their UX across the board. We updated the Menu structure and header design to facilitate easier navigation throughout the site and allow for greater site growth that the new functionality required. We also updated the profile section as well as buttons and other small UI elements throughout the site. These updates improved on the old designs without deviating from their brand identity.

Icons and Btns

Apart from improving the existing user experience, the cosmetic changes also updated the site to be retina compatible. For this to happen we had to create UI that was pixel perfect across multiple pixel densities. We built a comprehensive UI Style Guide to create and manage the assets for multiple resolutions.

Bottom image

Owl Icon