A Case Study – Redesiging a User Flow on SHOWBIE APP

  • Sector: Classroom Managment System, Youth Education
  • Tools: Figma | Miro | Google Forms | Zoom | Canva
  • My Role: Empathise, Research, Define, Ideate, Wireframing, User Testing, Affinity Mapping, Prototyping, Iterate
  • Time required: completed in 3 weeks (from initial hunch till creating a high fidelity prototype)

Hypothesis:

Based on a hunch, I started this self-initiated case study. In my observations, primary school students struggle to keep up with their work, set reminders and track progress on the Showbie app. A timeline is not present in Showbie’s interface, so it is not possible to visualize completed work.

Side note: The Showbie app caught my eye since I’ve seen my children use it to communicate with their teachers. I had witnessed the struggles they face while using the interface. I did the best I can, but this isn’t supposed to trample all over the Showbie app. Hats off to them for creating one of the most used classroom management systems in the world.

Understand Showbie – The Classroom Management System

Showbie is a classroom management system for communicating assignments, assessments and feedback between teachers and students. I selected this app for my project because hybrid learning platforms have become popular over the past few years and enable millions of educators to manage classroom workflow and give personalised feedback quickly and easily.
Therefore, a lot of work is required to make these apps more user-friendly and enjoyable for a user as young as 5 years old.

Design Thinking Process

The Design Thinking process is beneficial in tackling issues that aren’t clearly defined or unknown by re-framing problems in a human-centric way, creating many ideas during brainstorming sessions, and prototyping and testing solutions. It also involves ongoing experimentation: sketching, prototyping, testing, and trying out concepts and ideas.

Goals

My goals for the redesign:

  • To facilitate a more engaging and seamless experience when it comes to submitting assignments and managing homework
  • To design a more personable and intuitive user interface
  • To design through user empathy

My goals for my own personal development:

  • Learn how to conduct and analyze user research, create flow charts and wireframes, craft through design principles, and design through Figma
  • Complete my design project from start to finish while sticking to my design principles

Context Clarifier – a scoping tool

I made a context clarifier in Miro to:

  • Explore and fully understand the context of the problem or opportunity
  • Identify the wider team and stakeholders who need to be involved in the project
  • Identify potential blockages or key issues I need to investigate before the project starts
  • Expose expectations and potential issues early in the project

Desktop Research

I looked at past research and other information from website analytics, research reports, online raw data, academic papers, search engine results, blogs and articles. My desk research revealed exciting facts and worldwide reviews, which provided a clearer picture of my assumptions and encouraged me to work on my hunch.

Competitor Analysis

To supplement my desk research and stakeholder interviews, I did some benchmarking activities in landscape research. I conducted a comparative website review of the market that have similar offerings or solutions. It helped me see what competitors are doing, possible solutions, what works and what doesn’t.

User Persona

User Interview

It’s hard to avoid being influenced by our biases. We are human. However, being aware of biases in UX research is a step in the right direction.

I conducted user testing with the help of family, friends and some school teachers unfamiliar with my design work and matched up with my personas or user type.

I prepared an extensive, informal yet highly scripted interview guide, which tells how to set the scene for the project and the ‘warm-up questions’. I tried to build rapport, make the user comfortable, and explain what would happen during the interview.

Three 30 mins interviews were conducted. All interviewees were students from different school years. They were asked to share their experience of using the app and show their flow of updating their task on Showbie.

My goal was to better understand Showbie through the teacher’s perspective, so I asked four teachers for their experience with Showbie. Unfortunately, I could not interview any of them personally due to their busy schedule. However, they filled out an online Google form with their best responses. I am thankful for their time and suggestions.

Analysing Interviews

Quantitative and qualitative research are the two main research umbrellas. Each approach has countless methods to discover and use – and they feature different dimensions. During the research process, I tried to encounter both ways side by side during the synthesis.

Students’ Response

Notes were taken throughout all interviews, then later compiled into a Miro board and broken down.

Teachers’ Response

Teachers’ Responses on Google form were also compiled side by side. I tried to capture some clues from the user’s thoughts, feelings or actions and verbatim quotes or direct observations of what was seen or heard.

Additionally, I did some debriefing of the interviews as part of my analysis to improve my techniques and approach to the interviewing process.

User testing data strongly suggests that the system under test might lack some of the required functionalities to make the whole process easy and smooth for every user.

Synthesising the Research

Synthesis is a sense-making process where we uncover meaningful insights from the data collected from our research. We start to look at these individual elements through analysis and synthesis and find patterns, connections, and relationships. By combining these separate elements, we form new groups and themes. This leads us to uncover the insights from our research: the ‘why’ and ‘what’ it means.

Affinity mapping is a process where we group, create relationships, find patterns in the collected data. For example, I created the themes and post-it notes on the Miro board, where I grouped the participant in their own cluster. This way, I can see each person as a whole in terms of their post-it notes. So I put them all together side-by-side and started grouping them to what I think may be similarities.

There’s no right or wrong while creating a theme. I just basically matched it to fit the context and what makes sense to me. It’s great to have verbatim quotes because we get the words from the actual user instead of any interpretation or judgment that we overlay.

Affinity map of students’ interview data analysis

Insights

Once I established my affinity map, I began to draw significant insights and develop functional and inspired solutions. An understanding is a factual and novel finding of user motivation that leads to or reflects an opportunity for our team to explore. Insights offer new ways to interpret the problem space. They compel us to re-examine our perspective and articulate a unique point of view.

I received a positive response for our initial hunch. Students faced issues in keeping track of their daily tasks on Showbie. Some students looked for help from their parents in organising their work.

  • Students get confused between their folder and their teacher’s folder.
  • Students make assumptions about the task assigned by their teacher and what to do with it and where to submit it.
  • Teachers create a daily overview with task names in form of an image so that students can ‘tick’ off their tasks.

Recommendations

From these insights, I developed three recommendations for the case study.

The image below is an example of the required timeline.

  1. There is a need for a timeline for the task assigned by teachers so that students should know a clear pattern of their work and can check the box once done.
  2. There should be an automatic flow of assignment/task uploading on the teacher’s end so that students receive a computer-generated list of tasks that can easily be checked after done.
  3. Showbie should have a reminder application for students to keep themselves organized with the work they need to complete.

CONCEPT DESIGN AND CONCEPT REFINEMENT

User flow

I started my ideation process with an ideal user flow. It helped me to understand the starting point to work on Showbie through a set of steps towards a successful outcome and final action.

This user flow shows how students move from their dashboard towards the end of daily tasks while completing their work.

Crazy 8

Crazy 8s is an example of an excellent sketching exercise to get the ideas flowing. Traditionally used in design sprints, this exercise encourages coming up with eight ideas in 8 minutes. It allows for generating many ideas quickly, without getting caught up in the details.

I did a crazy 8s activity to generate some quick ideas on improving the existing user flow of daily tasks while keeping the insights and recommendations from the user testing in mind.

I sketched eight ideas on a piece of paper to quickly establish the desired outcome.

Storyboard

Storyboarding is the act of visualising or sketching how a solution could be realised with text narration and notes in a series of chronological steps. It is a highly efficient way of explaining a customer’s experience by articulating an idea or some views into an easily understood visual narrative.

In the context of user experience design, a storyboard needs to effectively communicate a user’s context; here, I tried to capture what a user sees, does, hears, thinks and feels before, during and after interacting with the potential solution.

Storyboard for key moments in the experience

Prioritisation – Effort vs Impact

In the context of UX, prioritisation means mindfully selecting solutions that are most fit for the purpose.

The user-centred design framework is practical when prioritising because it helps you to consider the desirability (for the user), feasibility (the technical considerations) and viability (the financial impact). This method quickly prioritises ideas/concepts or features by using the two factors of effort and impact.

User testing results helped me decide which features users find most valuable or most challenging to use. I assigned my Crazy 8 ideas on an impact and effort score. Mapped these scores in a 2 x 2 quadrant, with relative effort on one axis and relative impact on the other. High impact–low effort idea was an ‘easy winner’.

Low-Fidelity Prototype

A prototype is a rough version of what you think a final product or service might be. Prototyping allows you to quickly transform an abstract idea into something more concrete that your audience can see and touch. Paper prototyping is usually used at the ‘concept’ and ‘test’ stages.

I turned the best abstract idea into something more concrete that our audience can see and touch. With the help of a low fidelity paper prototype, I generated divergent ideas and explored multiple ways of solving the problem.

USABILITY TESTING – Insights and Recommendations

Three usability tests were conducted with three app users and obtained feedback on your low-fidelity prototypes.

Almost all testers agreed that it was an efficient and easy solution. They did not find any issue or problem. As a result of the testing, we continued to the next step of developing more detailed prototypes.

Mid-fidelity prototype

The next stage is the simulated experience of the application in the form of Medium Fidelity Prototype, which includes interactive functionality and full navigation. Mid-fidelity prototypes are usually a product of your previous iterations. In this case, these are our low-fidelity prototypes and usability test findings.

Created a mid-fidelity clickable prototype in Figma, showing the user flow of tracking daily tasks on a timeline.

Here You Go!

You can see the mid-fidelity prototype created for the case study in Figma, showing the user flow of completing daily tasks on a timeline.

Iteration

Iteration is one of the cornerstones of UX design. Keep testing the prototypes with users and get feedback to refine the design and make sure we are designing a product that meets their needs. Testing often and creating iterations at this stage is easy, and making changes isn’t difficult. Following this practice ensures that we are designing the right product, which will save time and money in the development stages.

Continue to iterate the prototypes to increase fidelity and introduce user interface (UI) components.

  • Test visual details such as colour, typography and copy
  • Understand how a user feels about the designs
  • Test interactive elements such as navigation or the screen flow
  • Communicate detail and functionality to the product team

This isn’t the end. Instead, I’d continue iterating and increasing the fidelity to create a hi-fidelity design.

Reflecting on the work I’ve done

I knew it was the perfect opportunity to improve my design skills with this project. I had just started a course in UX design, and I wanted to pursue a career in experience and product design. So I figured the best way to learn would be to just throw myself into a project and go from there.

Within the three weeks, I was able to comprehend all the things I set out to learn in order to deliver this case study and so much more. One of the best parts of the learning and creation processes is curating my own path. I learned what works and what doesn’t. I learned how to do things faster, better, and more efficiently. I learned random things along the way while trying to discover the thing I actually set out to learn.

“The cherry on top of all this is that it doesn’t end here. There is always more to learn. Nothing is easier in design process. Rather, you become pro at it with time and practice.”

REFERENCE

And that’s a wrap. Thank you so much for reading till the end!

Let’s connect

I am happy to connect. Please write to me at [email protected]. Thank you!