The Challenge

Professional networking sites are great once you’re outside of education, but when soft skills, roles and connections are just as important as your grades they're not as helpful as they could be.

Our client wanted to bridge this gap, helping students navigate their educational journey, connect with like-minded individuals and reduce the scary unknowns along the way.

Screens from the main application

A deep-dive into the student mind

We confess – it’s been a while since we transitioned out of Uni. So, we got re-acquainted with all the worries, decisions and potential pitfalls that can hit between school and higher education.

Speaking to students, it was clear they wanted to be able to track the soft skills, club affiliations and contacts they had built up within their wider groups. This information can be added, to a student’s profile, along with recommendations and achievements, so when they apply for jobs/internships they can include these soft skills along with their academic results. ‘Soft skills’ include things like adaptability, creative thinking, work ethic, networking and problem-solving.

They needed a helping hand

Outside of building a profile, students identified a feeling of being lost when they started higher education. Some felt the information provided by Universities did not answer some of their biggest questions. They would also rather build connections with students or departments before they arrived.

Breaking down the value proposition

Hello Human helped define a high-level strategic roadmap and a defined value proposition built around guiding students in and out of higher education. The core values were to:

  • Guide them through the onboarding experience and provide real people to answer their questions

  • Help students record activities they feel are important to them, whether it is inside or outside of education

  • Connect to advisors and ambassadors to assist when they need it most

  • Get them and their profiles ready for the start of their professional careers

Renewing the platform

Before building any features, you need a solid product foundation, so while the development team worked on setting up the core platform (.NET Core 2.x and Angular 6.x), the design team focused on defining what features are needed most at which times.

Creating a journey around the value proposition

Starting as usual with lean sketching sessions, Hello Human drew out a high-level journey from the onboarding of a high school student, their progression through University, affiliations with departments, connections to other students and finally, connecting to Organisational Internship programs.

The all-important design system

Designing product platforms always benefits from a design system from the very beginning, if at least just from a conceptual level. Taking the newly-aligned value proposition, flows and features we can start to break the designs down into shared Components, variants and layouts.

Utilising Sketch Symbols, the Hello Human design team were able to add a higher level of consistency throughout the entire platform. Then as each component was designed and scoped, it could be built by the front-end team into Storybook. This process rapidly sped up the design > development > delivery workflow and gave us much needed efficiencies to get to Production as soon as possible.

Componentised message types

Lose your head!

Renewing the platform gave us opportunities to think of better ways of managing data and content. One such idea was to migrate the content out of multiple locations, hardcoded or within a basic .NET CMS, into one location that would not only allow content to be easily updated by their content editors but also allow the content to be pulled into any number of external applications or websites.

Moving to this headless CMS,, also allowed us to rapidly spin up marketing websites and layouts all connected to one content source.

Amplify communication

A common feeling experienced through the education journey is the lack of connection with the education providers, advisors or departments. While other brands and services are increasingly moving online and building 24/7 relationships, education providers were still asking for emails or phone calls to be made during staffed hours, leaving students with burning questions left unanswered.

Connect with a role model

We found many of these questions might not be to do with the University, its fees or admission requirements but instead were about social life around the University, e.g.:

  • Where can I find people to share accommodation with?

  • What do I need to bring with me when I start?

  • Where is good for food?

  • What social aspects are there, sport/nightlife?

  • Are there other people with similar interests/hobbies?

Universities can point them in the right direction, normally in the form of a blog post or webpage, but what students really wanted was to build connections with other people who have experienced similar things or knew people who could help them.

The problem is, how do we encourage communication and connections but make sure they find the right person to ask and that that person is both willing and able to do so. Introducing the concept of Role Models meant Universities, Departments, Social clubs or any other sub-entity could assign students the Role Model “badge”. This not only gave them kudos and further soft skills for their future careers but meant they could be ‘findable’ and open to answering questions to other students.

Real-time communications

Finding the connection is one thing but without solving the need to ask questions as soon as they crop up, we would only be marginally better than current phone or email options. Our client wanted a solution that would not only provide live chat but could be customised to allow for key future features:

  • Group chat

  • File sharing and commenting

  • Discovery of similar connections, e.g similar departments etc

  • Open/Close hours for departments

Current offerings by the large social network providers, Facebook/Snap, did not allow customisations that would give the students a better overall experience. But on the flip-side we did not want to have to rebuild the messaging wheel; we’d rather spend the time understanding and enhancing features for our customers.

We decided to implement Sendbird, a messaging platform that provides core messaging functionality, data storage and privacy enhancements but lets you provide your own presentation layer. Essentially allowing them to achieve all of the current and potential features with a much faster time to production.

Real-time communication

Getting mobile

Building 24/7 relationships and timely communications required a truly mobile experience. Rather than build each feature again for a native app, we decided on getting the core features that benefit from instant updates and sharing and let the desktop app provide profile building and curation.

Deciding on a mobile technology is a tough one., After much discussion we decided on React Native, which allowed them to offer near native experiences whilst still maintaining the component-based methodologies implemented on the website.

Implementing messaging with Sendbird was made easier thanks to their provided integration libraries and samples, plus with push notifications enabled out-of-the-box, we were able to provide timely notifications regarding messages or community updates.

Versioning and keeping up-to-date

With the rapid development and launch of the mobile app to market we knew there were bugs likely to be found and fixed or new functionality to be rolled out. With apps released to the App Store you may have an update ready to roll but the phone may not auto-update, or the user must select if they want to update the app. This is especially bad if you are making breaking API changes or are working on platform refreshes that require the system to be rolled out in chunks.

As React Native is Javascript-based, we had the ability to integrate with MS App Center and CodePush (now part of the MS App Center). Using MS App Center, you can trigger new builds, and push to all the AppStore’s easily. CodePush takes this one step further by pushing new Javascript to the app without the user having to update it, so if you make changes to API calls you can simply update the logic and the user can download the much smaller updates next time they use the app.

A little pro-tip!

Some segmentation tools, like MixPanel, can also trigger push notifications and in-app messaging to customers using older app versions. By using these notification tools, you can direct them to the app store to update the app themselves, rather than having them contact customer support or delete the app entirely if it stops working.

Filling in the blanks

Encouraging people to fill in their profiles is an ongoing challenge! Some services tackle this in different ways. For example, LinkedIn used to do “Profile superstars”, with tips to complete your profile and unlock new connections.

We wanted to encourage profile completion but didn’t want to punish them for potentially not having all this information (yet). To fill these areas out, we hired an Illustrator to provide drawings for a number of scenarios that we could then use throughout the application.

We noticed that by adding these illustrations to the onboarding steps, we were able to increase profile completeness by 30%. Sentiment towards the onboarding experience also increased due to its friendly nature and added “warmth”.

Onboarding and job search experience

Monitor, hack and grow

A new product needs great analytics to track progress. While Google Analytics can give you a great overview and funnels throughout your site, it does not give you the depth and categorisation that we needed to understand our customers and their usage better.

We decided to implement MixPanel, mostly in part due to its amazing segmentation tools that allowed us to have a holistic breakdown of usage by user role/location or features used. For example, with MixPanel we could see the number of connections made by new users over time from different devices in different locations. We could then use that data to influence our roadmaps and push certain features earlier in the onboarding process.

This data allowed our team to test new functionality and solve problems before they became bigger issues.