Problem & Solution

“Many pupils are facing the challenges of handling their needs, wishes and obligations (tasks) after school and need help to develop a good study life balance."

“Creating an App that helps pupils organize their workload better, as well as offering better study techniques along the way to create a comfortable and stress free study experience.”

Balance - An influence or force tending to produce equilibrium; counterpoise.

Quote - thefreedictionary.com

Initial Goal

When starting the project, I was not really sure where it might lead me. I felt quite confident about the Issue I wanted to tackle "Reduce stress for pupils" (age 10-18). But at this point I did not really know what the pain point of this young generation was. So I was eager to find out.

To learn more about the topic, I tried to find other applications and website which might offer some help for my demographic by conducting a competitive analysis. Even thou I was able to find some blogs and articles about the subject, there was no such thing as a web service or an application, addressing my demographic as whole.

Source: freepik.com

#1 User Interviews

I started conducting in person user interviews with pupils. The findings of these interviews where quite revealing because the core assumption was verified. Many pupils have already suffered from high levels of stress in the past, and most of them had a bumpy ride until they found learning techniques that worked for them. (Some of them were still struggling.)

Some of them managed to create study groups with their friends. Other had to leave their school in order to cope with the stress. As diverse as the solution where, the common theme was the struggle to find develop a successful study routine.

• Organizing their homework is a stressful task for most of my participants.
• Finding a suitable way to study was difficult for many of them.
  
  

#2 Affinity mapping

In the pursuit of sorting my findings I created an Affinity map to get a better understanding of main points that the application needs to address.

These are the 4 main assessments fo the Affinity-Map

• In need of support
  
• Learning techniques
  
• Spare time with friends
• Motivation

I decided to focus on "The need of support" and "Learning techniques" to help the pupils.

#3 Personas

So...whom am I designing this app for? In order to keep in mind that BeKiyo wants to help and what they are struggling with. I created three personas. Melinda, Max and Monica are representing students and parents and my plan was to help the pupils as well as the parents.

• The uninformed student
  
• The ambitious learner
  
• The single parent
  

Due to time restraints and resources I ended up focusing mainly on the pupils because they are foremost the people BeKiyo wants to help first.
But never the less, having the parents on my radar helped me design the App in a more holistic way and adding the parents later in the process did not feel as an after thought but more like a natural evolvement of the service.

#4 Mental Models

Once the personas where in place, I was able to project how BeKiyo can potentially help my personas. In order to do that, these mental models where created. Giving us a good overview over the struggles our personas might go through.

These are the main pain points I wanted to soften.

• Feeling lost. Finding help, if a subject or task is tough.
• Invisible success. Make it visible.
• Diffult to keep an overview. Help with organization.
  
• Feeling alone. Encourage to have joint study session.

Succeed - To accomplish something desired or intended

Quote - thefreedictionary.com

#5 User Flows

One step at a time. The user flows helped me to walk my users through the main interactions I wanted them to experience or tasks I wanted them to fulfil.

This way I was able to find problems in the general structure of BeKiyo before investing and loosing any time in creating a prototype that would not work.

I had to amend these user flows over time and they would naturally evolve with the progress of the project.

Source: https://www.freepik.com

This is the point where the direction and the approach of the project where finally formed.
All my research and analysis where pointing at three core elements of BeKiyo.

1. Better organization.
2. More participatory learning.
3. Finding the right study techniques.

#6 Wireframes

Creating the wireframes really brought the concept to life and I was able to define how the core pages of the application would interact with each other.
However, it was very important to keep it simple at this stage and focus more on functionality of the pages and page elements and less on styling...

The wireframe defined...

• The header menu.
• The tap menu at the bottom.
• Basic page structure.

#7 Mid fidelity

Once the drawing was done, I was able to progress, by creating a set of low and mid fidelity prototypes which already included all the basic functions of my application.

At this stage of the project I started using Figma as my main prototyping tool. The first prototype allowed me to keep focusing on navigation and interaction.
Still paying very little attentioin on styling and colours.

This Prototype allowed me to all the hypthesis and findings I made so far and also allowed me to conduct the first user test.

---

Struggle - To proceed with difficulty or with great effort.

Quote - thefreedictionary.com

#8 Constant Itteration

All Prototypes from Mid to High fidelity where now constantly improved by conducting usability test (in person and via video call), as well es AB preference tests on usabilityhub.com.

This part of the project was engraved by a lot of repetitions and at times it felt like I had to start over and over again.

Every new feedback potentially questioned some previous decisions.

Main struggles

• Define how much information is to much.
  
• Colour selection.
• Select the feedback and recommendations.

Iterations for Prototype0.1
At one stage I decided to tune the colour range down to create a product that felt more consistent in its appearance.

---

Iterations for Prototype0.2
The now adjusted colour pallet leaned towards blue and was influenced by Androids Material Design.

The progress of the iterations also shows how some ideas went back and forth. The tap menu e.g. kept changing quite a bit and took a step back, when I realized that a floating menu at the bottom created some irritating visuals when the content of the page extended beyond the visible area.

#9 Style Guide & Design System

While creating the style guide for BeKiyo, I furthermore learned the importance of consistency thruout the app. Border, spacing, colour and font all needed to follow a set of rules to create a seamless experience for the users. With Style Guide ready, I was able to finalize the high fidelity prototype.

Goal - The terminal point of a journey or race.

Quote - thefreedictionary.com

#10 Iterations from Low to High fidelity prototype

The Home page developed from a static page to a feed based content which changes its appearance according to the most recent and the nearest upcoming tasks and reached achievements.

The calendar went through many iterations to find the best way of showing the weekly tasks in the right size and colour, as well as finding a way to display detail information either on the same page or on a separate page (final solution).

The detail goal view developed from a full-page element to an expandable and collapsable tile. The representation of the progress was a critical point because the earlier version where hardly understood by my participants. The final version now has the right hierarchy and logic that make it work.

---

# BeKiyo 1.0

httpsde.freepik.comfotosbildung

---

#11 Recap

What would I change?

• If I could go back in time and make some changes about this project, my main goal would be to focus more on one user group (the pupils) a bit earlier in the process.
  
  
• I therefore underestimated the complexity of the calendar function which could have been a project in it self and I much rather would have had a more complete solution for the calender than e.g. the additional "Tips" section.
  
  
• Another point is using a Design Kit earlier in the process and also focussing earlier building a solid design system. Implementing these elements later in the process caused a little bit more work ;)
  

What would be the next step?

• If this project would be getting e.g. another month of refinement. I would get into another round of user testing with 3-5 participants to gather more information about the current usability.
  
• I would do this with a strong focus on the interactions with the calendar, defining further how entries are created and edited.
• On top of that the link between the calendar and the goals needs further refinements to make the process of creating and editing new goals as easy as possible.
  

httpsde.freepik.comfotosschuleSchule Foto erstellt von stockking - de.freepik.coma

httpsde.freepik.comfotosbildung'Bildung Foto erstellt von freepik - de.freepik.coma

httpsde.freepik.comfotosschuleSchule Foto erstellt von stockking - de.freepik.coma

#BeKiyo

‘‘The process of creating BeKiyo was a little bit like carving a statue out of a piece of rock. Starting of if a rough edged sketch and finishing with a refined prototype."

I am really glad how everything turned out and all the little details, make up the appearance of the final product.

#Thanks

I am deeply thankful for all the help I received during this project.

Thanks to all the wonderful people who participated (free of charge) testing the different versions of my prototype as well as those who sat down for interviews which helped me to understand my target group. 
I big shout out goes to my Mentor Szumiao, my Tutor Janar as well as to Tobias and David who where kind enough to spend some of their time to get this project through the rough waters.