Conceptual Design & Wireframes

 

Now, we’re diving into the next phase of our project: Ideation!

In the previous post, we completed the Empathize and Define stages, pinpointing the core needs and challenges for our primary user, Lisa Kim. This post highlights how we explored solutions using creative methods and translated those ideas into wireframes to shape our design.

Methods and Tools Used

Methods:

• LEGO Serious Play

• Crazy 8’s

Tools:

• LEGO bricks

• Figma

Ideation Process: LEGO Serious Play

On 17 November, we started with LEGO Serious Play (LSP) to think creatively and collaboratively. This method helped us to break down complex problems with Lego bricks, spark innovative ideas and build a shared understanding of Lisa Kim’s needs.

Process Highlights:

1) User needs

Using LEGO bricks, we modelled Lisa Kim’s specific needs based on her persona and task analysis. The needs that we addressed during this process are:

• Interactive virtual classroom.
• Addressing student disconnection.
• Work-life balance support.
• Reliable network access.
• Organized interface.
• Motivation to conduct online classes more frustrations.
• Her determination as a teacher.

Below is our explanation of the Lego that we built that represents user needs.

2) Features functions

Next, we modelled the features and functions required to meet Lisa’s needs:

• Noise-cancelling feature.
• Breakout room.
• Clear visuals and easy-to-navigate buttons.
• Instant feedback for quizzes.
• Whiteboard with recording and saving options.
• Virtual classroom tools.
• Seamless quiz platform integration.

Below is our explanation of the Lego that we built that represents features functions.

3) Connecting needs to features

Finally, we connected the LEGO models of user needs to corresponding features, refining our understanding of how each feature supports Lisa Kim’s challenges.

Based on the connections above, we can conclude that Lisa Kim, a dedicated and determined teacher, needs to conduct virtual classes to balance her work and personal life. This is because she has frequent appointments during class hours, necessitating the use of virtual classrooms. Despite the challenges, her motivation to conduct online classes outweighs her frustration.

As the user is the focal point of the design, Lisa requires a reliable network to facilitate an interactive virtual classroom. The features she needs for conducting these classes include a noise-cancelling function to prevent distractions for her students, especially from her children. Another essential feature she wants is a digital whiteboard, enabling students to receive immediate feedback during lessons.

Additionally, she desires breakout rooms where students can engage in discussions and collaborative activities. The interactive quiz feature in the app addresses Lisa Kim’s challenge of toggling between tabs to administer quizzes during online classes.

One of Lisa's biggest challenges is managing student disconnection during classes. She notices this because she genuinely cares about how her students feel and react to her lessons. To address this, the app should include a feature allowing students to rate and comment after class. This would enable Lisa Kim to understand her students' feelings and minimize or eliminate any sense of disconnection by reflecting on their feedback and making necessary improvements.

Crazy 8’s Method

On 20 November, we moved on to Crazy 8’s, a fast-paced brainstorming method. Each team member had just 8 minutes to sketch 8 interface designs. The quick format kept us focused and creative without overthinking.

• Once the sketches were done, the top 3 sketches were presented
• All members voted for the best ideas

Sketches:

On 10 December,  we continue our Crazy 8's method to cover the remaining functions. But since we don't have enough paper, we draw it using our tablet.

Video presentation:

Wireframe Design

For the wireframe design, we applied ideas generated through the Crazy 8's method and conducted a brainstorming session to refine and enhance the design, making it more detailed and functional for the user.

Wireframe sketches:

Wireframe using Figma:

This is our final wireframe created using Figma. We chose a desktop frame size because Lisa Kim expressed her preference for using a desktop to conduct virtual classrooms. You can view our complete wireframe here. 

Highlight:

We try to address all of Lisa Kim's needs based on our conversation with an AI that simulated her preferences and requirements.

1)         Interviewer: "What are some of your frustrations with the current virtual classroom applications you use?"

Lisa: "One major frustration is the lack of integration; I have to jump between different apps for video, quizzes, and feedback, which disrupts the flow of the class. It’s also difficult to keep track of each student's engagement level. The tools I currently use don’t make it easy to monitor or encourage participation. Finally, I feel the current apps don’t provide enough control over classroom dynamics, like managing group work or tracking individual contributions during breakout sessions."

Interviewer: "Currently you are 40 years old. Are there any technology limitations you experience, and is there anything you dislike about current virtual classroom apps?"

Lisa: "Yes, there are some limitations. As someone who didn’t grow up with these technologies, adapting to constant updates and learning new features can be challenging. I sometimes struggle with the need to navigate between multiple platforms for different tasks—like video conferencing, quizzes, and providing feedback—which can disrupt the lesson flow. I’d much prefer a unified, intuitive platform that’s easy to use for both myself and my students.

Hence, we designed this application as a one-stop center for Lisa Kim, eliminating the need to switch between multiple applications to access interactive tools in virtual classrooms. With this platform, Lisa Kim can easily set up virtual classrooms, create quizzes, record classes for students' future revision and view students' performance reports.

2)         Interviewer: “Lisa, how do you keep track of your virtual classroom resources, tasks, and lesson materials, especially with your busy schedule?”

Lisa: "It’s definitely a lot to manage, so I rely on both digital and physical notes. I keep a detailed checklist on my laptop with reminders about what materials to share, what quizzes to prepare, and the timing for each part of the lesson. I also have my ‘go-to’ setup saved on my platform with settings for breakout rooms, polls, and whiteboard tools so I don’t have to rebuild the classroom environment every time. This setup keeps me from forgetting steps, especially on days when I’m balancing doctor appointments and lesson planning."

To further enhance the user experience, we enabled users to create their own planner within the application. The planner is displayed as the first thing upon login, ensuring users won't overlook any important details. Lisa Kim can easily add tasks or events to the integrated calendar to stay organized.

3)       Interviewer: "What do you feel the need to improve your online teaching experience?"

Lisa: "I need an app that’s intuitive and simple to use, both for me and my students. I’d love something that supports real-time feedback, allows me to easily set up interactive quizzes and polls, and has features for group work, like breakout rooms. Since my home can be noisy at times, a noise-canceling feature would also be fantastic. Overall, I’m looking for a tool that lets me focus on teaching rather than troubleshooting or navigating complicated steps."

To accommodate all of Lisa's needs for conducting virtual classrooms, we also included features such as the ability to create polls in the chatbox and provide real-time feedback in group chats. Additionally, she can utilize a noice-canceling feature during classes for a smoother and more focused learning environment.

4) Interviewer: "Lisa, if you could design the perfect virtual classroom app, what features would it have?"

Lisa: "In my ideal virtual classroom app, everything would be integrated in one place. I’d love to have seamless video conferencing with built-in interactive tools like quizzes, polls, and breakout rooms. Setting up these features should be quick and intuitive, without needing to switch between multiple platforms like Google Meet, Quizizz, and Kahoot.

The app should also have real-time feedback options—maybe a digital whiteboard and chat where I can interact with students directly on the screen and monitor their responses instantly. A noise-canceling feature would be a huge help too, especially when I’m working from home and need to focus.

Finally, it would have a dashboard that tracks each student’s progress and engagement over time, allowing me to easily spot anyone who needs extra support. I want an app that supports my teaching, doesn’t add to my workload, and genuinely makes learning enjoyable for my students. That’s the kind of tool I’d love to work with every day."

We also included a feature that allows users to monitor students' performance. This is crucial for identifying students who may need additional support. To facilitate immediate action, we added a messaging button that enables users to directly contact students after reviewing their performance.

By addressing Kim's needs, we are confident that our app will significantly simplify the user’s role as a teacher, making it much easier to conduct virtual classrooms effectively.

That's all for this phase! 

Stay tuned for our next post, where we’ll showcase the prototype phase! :)