User Interface Design

Juicebox App


Juicebox project

How can we empower high school students in their pursuit of higher education?

High school is undoubtedly a difficult time, where HSC subject selection choices plays a major role in pursuing higher education and career paths. For students of low socioeconomic, remote or disadvantaged backgrounds, their ability to engage in this process is further hindered by different environmental and social factors and most importantly, lack of guidance.

JuiceBox is a mobile application which allows Year 10 students to be paired with an industry mentor to discuss academic and career pathways. Students are able to access curated resources to help in aligning their subject selections to career goals.

Designed as part of a 24 hour Hackathon, our team of 4 university students researched, conceptualised and created an interactive Figma prototype to present in front of a panel of IBM industry professionals.

⌛ 24 hours

🛠 Figma, Miro, Adobe Illustrator

👤 Designer, Researcher

🥇 1st Place in IBM x DigiSoc Product Design Hackathon

The Challenge

High school students have trouble navigating the journey towards higher education in relation to their future career prospects. Integrate the IBM Watson Assistant into your solution.

Research

Defining the Problem Space and Target Users

Our team started by exploring potential issues faced by the broad user group of Year 10 students. We conducted primary anecdotal research with current students as well as drawing upon our own personal experiences and narrowed down the target users into 4 user groups: clueless, explorers, indecisive and goalers.

Further ethnographic research was done into the impact of social and environmental factors affecting the user groups. Online research combined with personal anecdotal experiences from one of our team members drew us to the demographic of students from low socio-economic backgrounds. It was found that many low SES students lack access to resources about higher education (Brown, Wohn, & Ellison, 2016), which is a major contributing factor to the lack of motivation to pursue higher education.

We ultimately narrowed down the problem scope to the absence of a centralised space which can provide informative resources and guidance for students, particularly those from disadvantaged backgrounds who lack support from experienced individuals in the education and career space.

User Personas

Out of the 4 user groups, we decided to target the clueless and explorers who will benefit the most from guidance. User personas were crafted to represent our two target users: students and mentors.



Ideation

After defining our problem space and target users, we began ideating. Many of our initial ideas circulated around the concept of a support network.

We ultimately decided on a mobile application which allows Year 10 students to be paired with an industry mentor to discuss academic and career pathways. This aims to solve the issue of lack of guidance as students will be able to communicate with experienced individuals who may be university students or industry figures. The IBM Watson Assistant would be integrated into the flow as a chat robot to personalise the mentor matching process. Furthermore, the app acts as a central access point to resources to map relevant subject selections to tertiary courses and job prospects.

It was here that our brand identity “JuiceBox” was born. Encapsulating a dynamic and refreshing essence for its youthful users, our application aims to be a handy and practical companion just like a juicebox.

User Flow Diagram

In order to clarify the user experience architecture behind our product and determine a centralised understanding across our team, a user flow diagram was constructed. The diagram starts from login/sign-up and maps out different user flows based on the type of user (student or mentor) and their applicable tasks (e.g. match and chat with mentors, browse career paths and subjects).

Next, we fleshed out the IBM assistant which was to be incorporated into the onboarding process as a friendly, personable chatbot named Pip. We mapped out possible input and output scenarios from the user to the assistant based on the user personas. These mini user journeys ranged from setting up a user's profile to mentor matching.

Prototyping

Medium Fidelity Prototype

After a quickfire individual paper sketching session with the team to hash out low fidelity designs, Figma was used to draft up a medium fidelity prototype to scope out the overall design and functionality of components.

I was also solely tasked with programming the IBM assistant for the app's chatbot, making sure to follow the previously defined table of input and output scenarios. User are able to interact and converse with Pip to get matched with a mentor.

High Fidelity Prototype

The brand identity was injected into the interface of the high fidelity prototype through a vibrant colour palette and spunky illustrations, bringing the application to life. Click through the interactive prototype below:

The Solution

Juicebox provides Year 10 students with mentorship opportunities and accessible resources to aid in their journey towards higher education, all packaged in a vibrant, friendly user interface. Students are able to interact with Pip, the friendly chatbox assistant powered by IBM Watson, to be automatically matched with an industry mentor whom they can message with. Students also get access to handy career and higher education resources and can update and check their list of provisional HSC subjects anytime.

Usability Testing

Given the time restraint, we were able to conduct one quickfire round of user testing on three Year 10 students. Our prototype received positive feedback with the users noting that they liked the vibrancy and simplicity of the interface. Suggestions for future features included a friending option between mentees as well as suggestions for conversation topics while messaging with mentors.

Results

Business Plan and Implementation Roadmap

At the end of the hackathon, we had the opportunity to pitch our solution to IBM representatives. Our presentation included an introduction to Juicebox, a business plan and implementation roadmap. This pushed us to think about our design as a viable product through a business lens. We gave the product development cycle a rough estimate of 9 months and included details on how we could engage student and mentor to use the app. In the future, Juicebox presents bountiful opportunities for potential expansion through the widening of service offerings and potential monetisation by partnering with institutions.




Reflection

Given the timeframe of 24 hours, I believe we successfully delivered a solution that really appeals to the user demographic. After undergoing this extremely compacted version of the product design process, the biggest takeaway for me was the importance of defining a clear and specific user need and problem space. Narrowing down the scope allowed us to clearly define our design goals and focus our attention on crafting the most appropriate solution rather than a one that tried to solve everything. I also enjoyed thinking about the impact of our product through a business lens and believe that this was a significant factor that pushed our product to the top.

If I had more time, I'd aim to spend more time iterating our designs and conducting usability testing in between each round. Future steps are to flesh out the other app features such as 'browse career paths' and 'check my subjects', as well as scoping out the suggested features gathered from usability testing.