MyHouse
Turning a physical workshop into a fully online experience.
Introduction
Fun People Inc. is a fictional educational company born in 2014. They currently offer in-person courses for languages, music, yoga, and cooking.
Their main attraction is workshop camps and dozens of people join them every month in different locations, as the school has a very special approach: they integrate classes, outdoor activities, technology, humor, games, and other cool stuff into their mission of teaching people additional skills.
Details
Problem Statement
Develop an online learning platform that will transform in-person learning into a fully digital experience, allowing people with limited time and resources to participate.
First Sprint
4 days
Second Sprint
another 4 days
Research, iterations & Mid-Fi prototyping
Rebranding &
Mid-Fi testing & Hi-Fi prototyping
Rafa Areses & Marta Carcavelos
Conceptual Project
Initial Stage
Initially focusing on language learners, from self-guided enthusiasts to classroom students, we explored various tools but discovered that creating a Lean Survey Canvas was the most effective. It streamlined our inquiry process, allowing us to collect and analyze crucial insights, which helped us develop and refine impactful solutions for our educational platform
What we do
Develop an online learning platform that will transform in-person learning into a fully digital experience, allowing people with limited time and resources to participate.
Details
Develop an online learning platform that will transform in-person learning into a fully digital experience, allowing people with limited time and resources to participate.
First Sprint
4 days
Myself
Rebranding &
Mid-Fi testing & Hi-Fi prototyping
UX/UI Designer
Conceptual Project
Problem statement
However, many people are unable to attend due to time and cost reasons, but still want to take part in a course. Fun People Inc. needed a way to provide an engaging online experience for those who could not attend.
My role as a Product Designer
in a nutshell
290+ screens
Dark & Light Mode
The problem
We were only displaying offers. Awful UI overall.
The solution
Something better for the eye. Let's see how the work was done.
Let's dive into it!
My Design Process
UX
Atomic Design
We hold weekly cross-disciplinary meetings to craft our design system, 'gemüt,' reflecting comfort and cohesion. Leveraging Atomic Design, we categorize our design elements in Notion and begin with typography, colors, and spacing. This foundational work supports consistent color variations across our products, detailed further in the following section.
Taking into account: grid system
Creating components
To ensure the quality of our components, we prioritized three key elements:
Accessibility: We checked the color contrast ratio and used all lowercase to respect the brand and comfortable character spacing on CTAs to enhance accessibility. The minimum size of tab buttons on mobile is 48px.
Intuitiveness: We followed an adaptive design approach to ensure our components are platform-friendly. For example, a progress indicator component was used to guide the user through the survey and provide an understanding of the survey's progress without tiring the end-user.
Aesthetics: We believe in stepping up our UI game by using modern design elements such as clean and minimal design, rounded corners, vibrant colors, and smooth shadows, in accordance with Jakob's law.
Impact
Working on our design system has posed significant challenges, but it has yielded several benefits for our company on various fronts.
Regarding our team:
Development: Our design system has simplified the lives of developers by enabling seamless communication with the design team when discussing implementation.
This has allowed them to focus on features rather than low-level UI primitives such as color and space values, small components, interactions, states, etc.
Design: Thanks to our readily available library of components, designing high-fidelity interfaces has become a straightforward task, reducing the time taken from days to just a few hours.
For the user:
While the benefits mentioned above pertain to internal aspects of the company, the true impact of our design system can be seen in the enhancement of our user experience.
Woohoo!
This design system has allowed us to build prototypes quickly for other clients, test more ideas, evaluate our hypotheses faster, and create more variations to A/B test.
Go ahead and check out one example!
Validation
We conducted user testing with a group of volunteers to test the app's usability and effectiveness. The feedback we received was largely positive, with users finding the app easy to use and navigate.
However, some users suggested that the app could benefit from additional features such as the ability to scan barcodes to add products to the cart and the ability to schedule pickup times. Here are some other improvements we made after the user testing phase:
Super fast orders & payment
Users can quickly add products to their cart and pay using their preferred payment method, such as credit card or mobile wallet.
Easy pickup
Once the order is ready, users can simply walk into the store and pick up their order without waiting in queues.
Learnings
The process of resolving this issue has provided an exceptional opportunity to enhance our expertise in design system creation and UX design. Although we encountered a few obstacles during the course of this case study, we were able to draw upon our extensive knowledge and experience to overcome them.
Our mastery of various design principles and techniques enabled us to navigate through challenging circumstances, resulting in substantial improvements to our skill set.
The challenges we faced included managing time and resource limitations, ensuring that our product components were bilingual to accommodate our diverse user base, and bringing together various stakeholders for seamless collaboration.
Next Steps
Expand mental health services through partnerships.
Introduce personalized matching algorithm.
Continuously improve user interface and experience.
Launch social support feature.
Enhance app security and privacy.