Case Study
Product Showcase
Summary: Enhancing a Swedish educational platform for a smarter, more engaging learning experience.
At HPappen, a Swedish educational platform, I worked as a UX/UI designer as part of a four-person design team on the full redesign of the platform—HPappen 2.0. We worked closely with the founders, developers, and education experts, running many student interviews to better understand their struggles and improve the user experience.Alongside the platform, I also redesigned the Webflow marketing website on my own, focusing on clarity, SEO, and conversion. This project helped me grow in creating user-friendly, engaging designs that meet both user needs and business goals.
Role:
UX/UI designer
Webflow developer
View
Educational platform
Product Overview
Embarking on a transformative journey, our compact team at HPappen set out to redesign the platform into HPappen 2.0, aiming to elevate the user experience for students preparing for exams. Over several months, we worked closely with founders, developers, and education specialists to enhance key features, address pain points, and optimize usability. Additionally, we overhauled the Webflow website, focusing on SEO, user engagement, and conversion strategies. This project was a collaborative, user-centered design effort, creating an intuitive platform for more effective learning.
Role
UX/UI designer
Webflow developer
Tools
Figma
Photoshop
Adobe Illustrator
After Effects
Webflow
Project Duration
Date Start: 1th Oct 2023 - 30th April 2024
Total Duration: 7 month
Design team
Roles
Lead designer
Lead a team of 4 designers, setting the design direction and ensuring consistency. Collaborate with cross-functional teams to implement user-centered solutions and align designs with project goals.
UX/UI designer
Collaborate with the team to create user-focused designs, ensuring consistency and quality. Gather feedback from users and work with cross-functional teams to refine and implement solutions aligned with project goals.
UX/UI designer/Webflow developer
Work closely with the team to design user-friendly experiences and build responsive Webflow pages. Gather feedback and collaborate across teams to refine and deliver effective, goal-driven solutions.
UX/UI designer
Collaborate with the team to create user-focused designs, ensuring consistency and quality. Gather feedback from users and work with cross-functional teams to refine and implement solutions aligned with project goals.
Challenges
Problems Statement
Challenge/Problem Overview
Students preparing for exams need a platform that is not only effective but also engaging. The old design felt dull and uninspiring, making studying feel like a chore. Young learners crave an intuitive, visually appealing experience that keeps them motivated. We saw the need for a modern, interactive redesign—one that balances simplicity with engaging features. Our challenge was to make the platform visually attractive and easy to navigate, while adding detailed lesson insights, rewarding animations, and highly requested features to enhance the study experience.
Goals
Qualitative interviews (In-depth insights)
Quantitative interviews (Measurable data)
Redesign website
Incorporate microinteractions
Create an engaging visual identity – modernize the interface with a youthful, inspiring look
Enhance Usability - improve user experience based on feedback
Design Process
Steps
Approach
Many students preparing for the Högskoleprovet struggle to stay motivated and focused using outdated, cluttered study platforms. These platforms often lack clarity, engagement, and customization—making studying feel more like a chore than a productive experience. We saw the need for a modern, user-friendly solution that makes learning both efficient and enjoyable. That’s why we redesigned HPappen: to give students a smarter, more intuitive way to study, stay motivated, and reach their university goals with confidence.
Understand
User research
User interview
Competitve analysis
Define
User personas
Empathy map
User Journey Map
Ideate
New design ideas
Brand strategy
Brand value
Design
Wireframe
Hi-Fi designs
Prototype
Test
Feedbacks
Iterate
Future concept
Understand step
UX Research
Interviews and insights
During the user research phase, we conducted several quantitative and qualitative interviews to gather insights from students preparing for entrance exams. Based on the findings, we created a User Interview Affinity Diagram to categorize common pain points, study habits, and feature requests. This structured approach helped us understand user frustrations and design solutions that truly enhance the learning experience.
Understand step
Competitors
Competitive analysis
We conducted a competitive analysis of two major competitors: https://hpguiden.se/ and https://xn--allartt-9wa.nu/. By reviewing their features, design elements, and user engagement strategies, we identified gaps and opportunities to improve our platform. This analysis allowed us to pinpoint areas where we could offer better user experiences, enhance usability, and differentiate our platform by focusing on specific student needs not fully addressed by these competitors.
Define step
User Persona
Goals and frustrations
We updated our user persona because the original one, created at the start of the project, was outdated. The new persona reflects more recent research and user feedback, ensuring we better understand the current needs, goals, and frustrations of students preparing for university entrance exams. This update helps us create a more relevant and effective study platform.
Define step
Empathy Map
What they think, feel, hear, see, say and do
The Empathy Map is crucial because it helps to focus on users' emotional and cognitive experiences. By understanding what students think, feel, see, and hear, it highlights pain points and motivations. This insight allows designers to make informed decisions, ensuring that the platform’s features align with the actual needs and behaviors of users, creating a more relevant and engaging experience.
Define step
User Journey Map
User Journey Map
We did User Journey Map because it visualizes the steps users take when interacting with a platform. It helps identify pain points, expectations, and opportunities for improvement at each stage of their experience. By mapping the journey, we can better understand how users engage with the product, which features matter most, and where users might face friction, leading to more informed decisions that improve the overall user experience.
Ideate step
New design ideas
HPappen 2.0
Based on user interviews, we identified key pain points and feature requests, leading to a full redesign of the platform and the introduction of HPappen 2.0. This update included a modernized interface, improved usability, and new features such as AI chat for smart study assistance, marking/highlighting options for better note-taking, and a referral program to earn discounts. The redesign focused on making the platform more engaging, interactive, and efficient, ensuring a better learning experience for students preparing for exams. In the example below we can see the old design, which shows why students don't find it interesting and motivating to learn
Ideate step
Brand strategy
Tone of voice
As a team, we developed a brand strategy to strengthen HPappen 2.0 and position it as the top study platform for Högskoleprovet students.
Design step
Wireframe
Design process
As a team of four designers, we worked hard to redesign the HPappen platform to create a more engaging and efficient study experience. Through extensive user surveys and meetings with stakeholders, we gathered valuable insights that shaped the new design and features. After defining key improvements, we moved into the wireframing stage, ensuring a user-friendly layout before refining the interface with high-fidelity designs. This collaborative process resulted in HPappen 2.0, a modernized platform tailored to student needs.
Hi-Fi designs
Details
UI design
We refined the tone of voice to be more friendly, supportive, and motivating, making sure students feel encouraged and confident throughout their study journey.
We also added educational videos to help students get the most out of HPappen, explaining how to use the platform effectively and highlighting the core values that drive our mission.
We removed tabs after learning that users found them confusing and hard to navigate. Instead, we divided the exam into two major sections, each containing four clearly defined parts. To improve clarity, we designed four interactive cards, each with a custom icon, name, and description, helping students easily recognize what they are about to practice. We also added a progress bar, allowing users to track their completion and stay motivated as they move through each lesson.
Titles and subtitles at the top of each section help students easily understand which part of the exam they are studying.
We restructured the lecture section with expandable buttons to open or collapse content. Previously, all sections were shown at once, taking up too much space and making it hard to see other sections. This change makes the platform cleaner and easier to navigate, allowing students to quickly access and focus on the content they need.
Settings for each exam part, like number of questions and difficulty level, were highlighted for easier customization, allowing users to adjust their practice preferences for a more tailored learning experience.
The Upgrade to Premium process was simplified by focusing on only the most important and valuable information. Users previously struggled with too much text, so now the price card only includes the price, discount, and subscription period, making it easier for students to quickly understand the offer without feeling overwhelmed.
A discount code feature was added for users, making it easier to apply special offers during the upgrade process. This addition allows students to easily redeem discounts and enjoy a more affordable premium experience.
After completing a lecture, we added a "Done" screen with a fun animation to engage users and provide a sense of achievement. This interactive feature encourages students to continue learning by celebrating their progress in a motivating way.
The animation for the "Done" screen was created using After Effects and Adobe Illustrator. It is simple yet engaging, designed to motivate users without being distracting. The animation adds a sense of accomplishment, enhancing user experience while keeping the focus on learning.
Other screens
Details
UI design
This project was completed in two key phases. First, we redesigned the existing platform with a focus on usability, cleaner layout, and a modern, fresh visual style. We introduced smooth micro-interactions and motion design to create a more dynamic and intuitive user experience. In the second phase, we explored future ideas and features based on user surveys, prioritizing what users truly wanted. This included new ways to boost engagement through animated elements, interactive components, and a more playful interface feel—all designed to keep users involved and make the platform feel more alive and responsive.
Hi-Fi designs
My additional task
Website redesign, new marketing pages
To increase monthly income and attract new students, we redesigned both the platform and the website. In addition to refreshing the old pages, we also added new marketing pages to better describe and promote the product. The website redesign was a task I handled independently, without assistance from other designers, allowing me to focus on creating a more engaging and user-friendly experience that helps to drive conversions and showcase the platform's value to potential students.
Educational platform
Conclusion
Made for Students
This case study showcases my work as part of a cross-functional team, including three other designers and a team of developers, to redesign a study platform aimed at improving the learning experience. My role was split between UX/UI design and building the website using Webflow. I focused on creating simple, clear user flows and a consistent visual style. Working closely with the team helped make sure the design matched both user needs and technical possibilities. Together, we improved the platform to make learning easier and more enjoyable.
