Back to list

Mobile App

E-commerce

Education

Over the Luna

Over the Luna is a store that sells handmade paper flower boxes while also offering workshops that demonstrate how to create your own paper flower box. The goal of this project was to find a way to reduce my client's teaching responsibilities with her virtual workshops without drastically reducing the quality of her lessons.

I worked closely with the client to conduct semi-structured user interviews to understand the pain points of virtual learning, conceptualize the proposed mobile app, design interfaces, and test the resulting user flows. Together, we created a mobile application that would automate the teaching process and personalize the learning experience through the use of camera AI technology.

June to July 2023

Timeline

Product Designer

Role

Mobile prototype

Output

100% task completion rate

Impact

June to July 2023

Timeline

Product Designer

Role

Mobile prototype

Output

100% task completion rate

Impact

Background

Over the Luna is an arts and crafts store that specializes in handmade paper flower boxes. It also offers manuals and virtual workshops so that customers can learn how to make their own paper flower boxes. The company was planning on opening its first brick-and-mortar store, so the focus was shifting more towards the creation and sales of physical paper flower boxes. Instead of removing the workshops, the owner was looking for a design solution that would alleviate her of the extensive responsibilities of teaching without sacrificing the quality of the workshops.

Discovery

👥

The participants

To design an app that would address the unique needs of Over the Luna, I chose to interview users who have used virtual tutorials to build hands-on projects in the past. This would allow me to understand the specific challenges that these users face when it comes to online learning, and what to improve based on their experiences.

👥

The participants

👥

The participants

👥

The participants

👥

The participants

❓

Asking the right questions

The goal was to focus on the learning process for an individual tutorial and how the app could best support the learner from the start to the end. This involved asking questions such as:

How do students like to be taught when building tangible crafts?
What are some difficulties that students encounter while learning from a manual?
What sort of guidance or feedback system would students find the most helpful?

❓

Asking the right questions

The goal was to focus on the learning process for an individual tutorial and how the app could best support the learner from the start to the end. This involved asking questions such as:

How do students like to be taught when building tangible crafts?
What are some difficulties that students encounter while learning from a manual?
What sort of guidance or feedback system would students find the most helpful?

❓

Asking the right questions

The goal was to focus on the learning process for an individual tutorial and how the app could best support the learner from the start to the end. This involved asking questions such as:

How do students like to be taught when building tangible crafts?
What are some difficulties that students encounter while learning from a manual?
What sort of guidance or feedback system would students find the most helpful?

❓

Asking the right questions

The goal was to focus on the learning process for an individual tutorial and how the app could best support the learner from the start to the end. This involved asking questions such as:

How do students like to be taught when building tangible crafts?
What are some difficulties that students encounter while learning from a manual?
What sort of guidance or feedback system would students find the most helpful?

❓

Asking the right questions

The goal was to focus on the learning process for an individual tutorial and how the app could best support the learner from the start to the end. This involved asking questions such as:

How do students like to be taught when building tangible crafts?
What are some difficulties that students encounter while learning from a manual?
What sort of guidance or feedback system would students find the most helpful?

RESEARCH FINDINGS

Through the user interviews, I discovered that when it came to learning how to create or build something tangible, since the process can oftentimes be confusing or messy, having an organized learning space and being able to jump back into the lessons easily was important. This would eventually help to guide my interface design.

On an educational level, being able to receive feedback and learn how to improve while learning was extremely valuable for users. Being able to receive prompt feedback was helpful in making users feel supported, encouraged, and motivated to keep learning.

"I want to be able to ask or see that I'm on the right track or get advice on what I'm doing wrong."

Bianca, enjoys knitting

"Since it wasn't live, I had to do a lot of self-learning and try to figure it out on my own. It would’ve been better if I could ask questions at the same time while learning. Even though you can still ask her and message her [questions], the responses would be delayed."

Sachi, took an online course to learn how to draw

"In an ideal world it would’ve been nice to ask someone and get immediate feedback. Emailing someone is nice but that can take a couple of days. I also don't know how to articulate my questions sometimes so just having someone to talk to or ask would be helpful."

Annabelle, followed a crocheting tutorial

How Might We

provide timely feedback and answers for users who have questions or require feedback?

Ideation

⭐

MVP goals

Since my client was a small business, I knew that my designs for the MVP needed to be simple, realistic, and within the scope of what a small team of developers would be able to do.

Therefore, I had two goals in mind for the product:

Keep it simple and seamless.

The app should complement the existing manuals and be straightforward to use.

Give room for growth.

The client spoke about future workshops and expansion. So while we were starting small now, the app needed to be scalable for future additions.

⭐

MVP goals

Since my client was a small business, I knew that my designs for the MVP needed to be simple, realistic, and within the scope of what a small team of developers would be able to do.

Therefore, I had two goals in mind for the product:

Keep it simple and seamless.

The app should complement the existing manuals and be straightforward to use.

Give room for growth.

The client spoke about future workshops and expansion. So while we were starting small now, the app needed to be scalable for future additions.

⭐

MVP goals

Since my client was a small business, I knew that my designs for the MVP needed to be simple, realistic, and within the scope of what a small team of developers would be able to do.

Therefore, I had two goals in mind for the product:

Keep it simple and seamless.

The app should complement the existing manuals and be straightforward to use.

Give room for growth.

The client spoke about future workshops and expansion. So while we were starting small now, the app needed to be scalable for future additions.

⭐

MVP goals

Since my client was a small business, I knew that my designs for the MVP needed to be simple, realistic, and within the scope of what a small team of developers would be able to do.

Therefore, I had two goals in mind for the product:

Keep it simple and seamless.

The app should complement the existing manuals and be straightforward to use.

Give room for growth.

The client spoke about future workshops and expansion. So while we were starting small now, the app needed to be scalable for future additions.

⭐

MVP goals

Since my client was a small business, I knew that my designs for the MVP needed to be simple, realistic, and within the scope of what a small team of developers would be able to do.

Therefore, I had two goals in mind for the product:

Keep it simple and seamless.

The app should complement the existing manuals and be straightforward to use.

Give room for growth.

The client spoke about future workshops and expansion. So while we were starting small now, the app needed to be scalable for future additions.

CLIENT VS. USER NEEDS

I also needed to ensure that the proposed designs aligned with what the owner wanted for her business. This meant balancing the owners want of automating and decreasing her workload and while still creating a positive learning environment that supported the students.

Business goals

Provide a positive customer experience

Automate/decrease the amount of time spent on workshops and classes

User needs

Feel comfortable and supported while following the manuals/workshops

Build skills and feel confident in the skills learned from the workshops/manuals

User needs

The most important insight from the user interviews was the aspect of feedback. In order for the users to feel supported and motivated to learn, getting some sort of guidance or feedback was crucial.

However, from the interviews, it was clear that not all feedback is created equal.

In order for the feedback to be valuable, it needed to be prompt, personal, and specific.

However, from the interviews, it was clear that not all feedback is created equal.

In order for the feedback to be valuable, it needed to be prompt, personal, and specific.

Business goals

My client wanted something to take reduce her workload, this meant that if she wasn't there to personally provide feedback, I had to find a way to "automate" the process.

During the brainstorming process I was inspired by apps such as Plant Parent by Glority Global Group Ltd. and Google Lens by Google. These were all AI-powered camera apps that could deliver instant feedback or assistance.

I began to explore the capabilities of each service.

My client wanted something to take reduce her workload, this meant that if she wasn't there to personally provide feedback, I had to find a way to "automate" the process.

I began to explore the capabilities of each service.

Plant Parent

Plant Parent allows users to use their camera to take photos of their plants and receive tips or feedback on how to care of their specific plant. This can include feedback on sunlight exposure, or identifying problem areas and providing advice on how to treat the plant.

Google Lens

Google Lens uses the camera to identify and gather results from all over the internet. The user can point their camera at an object and receive relevant results and answers.

AI FEATURE

I felt that the AI-camera feature could definitely fill in the feedback gap that users felt was missing in their tutorials and meet the needs of my client in reducing her workload.

I began to explore what incorporating the AI-camera feature would look like in a tutorial app. The proposed AI feature would allow users to direct their camera to the object that they require feedback on, the AI system would then analyze the live video feed and generate feedback or prompt the user to reach out to an instructor if needed.

I used the user flow below to outline how this feature would look like and to articulate this process to my client. She was thrilled with the idea and gave me the approval to go ahead with designing this process.

I felt that the AI-camera feature could definitely fill in the feedback gap that users felt was missing in their tutorials and meet the needs of my client in reducing her workload.

Testing & Iteration

🧪

Making sure it works

Once the high-fidelity wireframes were set, I proceeded to the user testing.

Since most users would be new customers, I asked users to go through the process of adding a new class and use the AI assistant to obtain feedback.

Note: the AI feature was given the name "Aurora" by the client, in keeping with the artistic and celestial theme of the branding.

🧪

Making sure it works

Once the high-fidelity wireframes were set, I proceeded to the user testing.

Since most users would be new customers, I asked users to go through the process of adding a new class and use the AI assistant to obtain feedback.

Note: the AI feature was given the name "Aurora" by the client, in keeping with the artistic and celestial theme of the branding.

🧪

Making sure it works

Once the high-fidelity wireframes were set, I proceeded to the user testing.

Since most users would be new customers, I asked users to go through the process of adding a new class and use the AI assistant to obtain feedback.

Note: the AI feature was given the name "Aurora" by the client, in keeping with the artistic and celestial theme of the branding.

🧪

Making sure it works

Once the high-fidelity wireframes were set, I proceeded to the user testing.

Since most users would be new customers, I asked users to go through the process of adding a new class and use the AI assistant to obtain feedback.

Note: the AI feature was given the name "Aurora" by the client, in keeping with the artistic and celestial theme of the branding.

🧪

Making sure it works

Once the high-fidelity wireframes were set, I proceeded to the user testing.

Since most users would be new customers, I asked users to go through the process of adding a new class and use the AI assistant to obtain feedback.

Note: the AI feature was given the name "Aurora" by the client, in keeping with the artistic and celestial theme of the branding.

Aurora the AI

User’s first introduction to Aurora the AI assistant in the class description page.
Users are reminded about the AI assistant in the class overview.
CTA for Aurora the AI in the video lesson screen.

User’s first introduction to Aurora the AI assistant in the class description page.
Users are reminded about the AI assistant in the class overview.
CTA for Aurora the AI in the video lesson screen.

User’s first introduction to Aurora the AI assistant in the class description page.
Users are reminded about the AI assistant in the class overview.
CTA for Aurora the AI in the video lesson screen.

Users are reminded at every step of the way about when and how to utilize the AI assistant feature.

Users are instructed on how to use the AI assistant once they activate the assistant.
Lesson specific AI instructions.
Camera focus is color coded to indicate status.
Camera focus is color coded.

Lesson specific AI instructions.
Camera focus is color coded to indicate status.
Camera focus is color coded.
Users are instructed on how to use the AI assistant once they activate the assistant.

Users are instructed on how to use the AI assistant.

The camera focus is also color coded so the user knows when the system is ready, or when there is an error.

Users are instructed on how to use the AI assistant once they activate the assistant.
Lesson specific AI instructions.
Camera focus is color coded to indicate status.
Camera focus is color coded.

During each usability test, users were surveyed on which icons or copy choices they preferred.

Onboarding

Easy and straightforward onboarding steps with immediate camera integration to get users comfortable with using camera technology.

Organized Layout

Lesson statuses and progress bar is clearly displayed so users can easily resume where they last left off.
Lessons were organized into accordions to provide users with an overview of upcoming lessons.

Lesson statuses and progress bar is clearly displayed so users can easily resume where they last left off.
Lessons were organized into accordions to provide users with an overview of upcoming lessons.

Lesson plans and progress is clearly organized so users can feel less overwhelmed and jump right into learning.

Lesson statuses and progress bar is clearly displayed so users can easily resume where they last left off.
Lessons were organized into accordions to provide users with an overview of upcoming lessons.

Final Designs

Room to be creative

I utilized light and pastel colors to fit the theme of Over the Luna’s business motto: creativity and artistry. The AI feature also took center stage, allowing users a way to get immediate feedback and assistance whenever necessary and feel encouraged that they’re on the right track.

Onboarding: a fun and warm onboarding process that guides first-time users into how to add their purchased manual.

Entering a class: a handy description and instructions on how to use the app alongside the manual greet the user, followed by an organized lesson space.

Activating Aurora: A handy CTA is seen at the bottom of each lesson so users can quickly get feedback. Instructions and prompts are included throughout the user flow.

IMPACT

User feedback following testing was overwhelmingly positive with a 100% task completion rate.

Users loved the interface of the app and enjoyed the simplicity and flow of learning how to use the app. The AI assist was a welcome addition to how users liked to learn material from tutorials and many users were excited at the prospect of using the app.

Reflection

Final thoughts

To date, this was one of my most challenging projects. It was a great opportunity for me to expand my understanding of both UI and AI and to think outside of the box. This project also allowed me to challenge my understanding of interaction design and practice thinking about unique edge cases.

I was initially over-ambitious about what I wanted to achieve with this app. However, I ultimately needed to think in more realistic terms about what my constraints would allow. The concept of MVP taught me that I only needed the product with just enough features to address and balance both the user and business needs.

Since AI technology is still relatively new, I was excited to learn more about the AI capabilities and figuring out how to make the new feature simple and intuitive to learn and use. Unfortunately, due to budget and changing plans, the app never came to fruition. Regardless, the client was satisfied with the designs and the AI feature, especially at the prospect of being able to reduce the time spent answering questions and teaching without sacrificing the support for her students.

More projects

Loop

Exploring the future of efficient task management by changing the way users optimize and organize their day.

Co-creator, Mobile App | Academic Project

Loop

Exploring the future of efficient task management by changing the way users optimize and organize their day.

Co-creator, Mobile App | Academic Project

Loop

Exploring the future of efficient task management by changing the way users optimize and organize their day.

Co-creator, Mobile App | Academic Project

Loop

Exploring the future of efficient task management by changing the way users optimize and organize their day.

Co-creator, Mobile App | Academic Project

Loop

Exploring the future of efficient task management by changing the way users optimize and organize their day.

Co-creator, Mobile App | Academic Project