— ROLE
UI/ UX Designer,
Researcher
— DURATION
5 Weeks
— TOOLS
Figma, Webflow, Figjam
Intro:
“BeeWise” develops a simple and fun platform about pollinating insects, which will be tested by 5th-7th graders in the spring. Teachers and students can freely use the platform. The client prioritizes fieldwork, where students will explore nature. The website must be user-friendly. Therefore, I have designed an interface and created a website that I hope meets the client’s needs. This is just the beginning of a product in development.
Goal:
My goal was to create an engaging digital learning platform about pollinating insects for 5th-7th grade students and teachers, on behalf of the client “La Humla Suse” The platform was designed to meet the client’s requirements, including interactivity, universal accessibility, and responsive design. Given the client’s desire for students to explore nature, I focused on creating simple and easy-to-understand content on the pages.
Process
I structured my process by creating headings such as "Preparation," "Understand," "Explore/Define," and "Ideas," under which I listed smaller tasks for each section.
Preparation
Step 1:
- Create ToDo/ Kanban board in ClickUp ✔️
- Set up time tracking in ClickUp ✔️
- List criteria, read the assignment carefully ✔️
- Mindmapping/ thoughts around the topic ✔️
- Create Figma document ✔️
- Understand the next steps ✔️
Understand target audience
I defined the primary target audience as both teachers and students (grades 5-7), and the secondary audience as parents and others. Therefore, I added an option on the homepage of the website allowing users to choose whether they are teachers or students.
Research
To understand my primary target audience, both teachers and students, I conducted research. I gathered articles and documents (sources listed) and categorized the information based on their needs, challenges, and interests.
Research
I prioritized these points while developing the platform for students and teachers:
- Clear and Simple Understanding: I ensured that all information was easy to comprehend.
- Adapted Reading and Writing Skills: Used large fonts and easy-to-read materials.
- Time Management: All tasks have clearly indicated time requirements.
- Clear Project Instructions: Provided clear instructions and a “Next” button to guide users through tasks.
- Stimulating Creativity: Included tasks that encouraged creativity, as well as the use of colors and shapes to make learning more engaging. I also edited images to make the design more playful.
- Entertaining Education: Focused on making tasks fun and visually clear.
- Hands-on Experience: Encouraged outdoor exploration and fieldwork.
- Interactivity: Incorporated zoom features, moving backgrounds, and hover effects to make the platform more interactive.
- Clear Resource Information: All resources are easily accessible for teachers in each module.
Do I understand the client?
Project brief: To gain a better overview of all the resources and documents provided by the client, I chose to gather everything into one document. This was to ensure that I included everything the client wanted in my design solution.
Explore
I spent a lot of time gathering inspiration from competitors. I took notes on some good points I found. Here, I summarize the points I want to carry forward:
- Simple and easy-to-read presentation with minimal text.
- Use of colors, animations, and simple navigation to capture attention.
- Opportunities for videos and attractive design to enhance engagement.
- Ability to see time spent on each task and an overview of goals for each module.
- Interactive backgrounds and clear overview.
- Zoom functionality for modules.
- Playful appearance.
Define
I formulated a problem statement to ensure that I meet the client’s requirements and objectives. This led to new points:
- Intuitive navigation: Students should be able to easily navigate the website and see a clear pattern.
- Professional appearance: The site must convey a sense of professionalism.
- Aesthetic appeal: The design must be attractive and aesthetically pleasing.
- Limited scrolling: Minimize the need to scroll down the page to improve the user experience.
Low-Fidelity
I was now ready to start my first paper sketches. I continuously developed new thoughts and ideas from my initial sketches to my digital High-Fi Wireframes.
Digital Wireframes
Mid-Fi Wireframes
Before I checked the contrast between text and color, my pages looked very different.
High-Fi Wireframes
Webflow
I considered using CMS in Webflow from the start for easier content editing by the client. However, due to time constraints, I chose to build each page individually. To streamline the process, I copied content between similar pages and ensured class names were changed to avoid conflicts.
Assets- Webp, svg
I chose to use WebP format for images and SVG format for logos, with only two exceptions in PNG format. This was due to limitations caused by the cost of a new Photoshop subscription.
Animation
I chose to implement animation on buttons and interactive elements to increase user engagement. I considered including animation on images of teachers and students, but it seemed unnatural since it wasn’t an integral part of the user experience. My goal was to encourage users to click on buttons, so I focused on this, as well as on the modules, to make it more playful.
Accessibility
Contrast
After using the Colour Contrast Analyzer to check the contrast, I noticed a significant improvement in both the appearance and readability of my website.
VoiceOver
I tested all the pages with VoiceOver. I noticed that on my modules, an image was being read aloud at the end. This was due to the use of an interactive background image behind the modules.
Rem
I converted all pixels to rem using the automated tool Finsweet in Webflow.
Thoughts about solution
In the tab where the tasks are placed (preparation, fieldwork, post-work, and bonus tasks), the primary target audience is 5th to 7th-grade students. This made the design process easier, as I had a clear focus on the target group for each tab. Although these pages are also accessible to teachers, the most important content is aimed at students. However, I added a button at the top where teachers can download the activity booklet to print for the students. While this may not be as useful for the students, it gives them the opportunity to explore the tasks digitally first.
Button Design Rationale:
I changed the buttons on the homepage to white with black text for better contrast and readability. This adjustment was made to reduce the buttons' visual prominence, encouraging users to engage with the content first before clicking. The original orange buttons were too attention-grabbing.
Next project->