Marlow is a coaching platform that allows working professionals to acquire the resources and guidance they need to achieve direction, success, and happiness in their careers. They offer 1-to-1 coaching and training powered by software.
Company
Marlow Inc.
Role
Product Designer Bubble.io Developer
Type
UX/UI Design
Development
Duration
4 Weeks
Year
2021
The Overview
Introducing a new learning method to the coaching world.
The Marlow was seeking to add more to the coaching experience of its current clients.
Based on feedback from Marlow’s coaches and clients (users), there's a recognized need for increased autonomy in skill learning and progress tracking beyond coaching sessions. Some clients desired greater access and options to enhance their coaching experience. Our goals were to:
Build a mobile experience that would allow for users to grow further on their own in sought topics, even those that are not within their curriculum,
Alleviate workload of our coaches
Display progress in the experience to allow users to visualize their growth
Solution
We created "Micro Activities," a mobile experience where users plan and engage in skill acquisition courses, log their activities, and track their progress. This platform transforms career-related education, offering convenient access to resources and learning reinforcements in a gamified-like setting. With a mobile-first design and an optional web version, it caters to diverse preferences, streamlining coaches' workloads while facilitating independent users’ practice. This solution adapts to busy lives, delivering an effective learning experience.
My Contribution
As the Product Designer and Bubble.io developer, I handled user outreach, and user research, and constructed the end-to-end experience by creating user flows, wireframes, and final designs. In addition, I conducted usability interviews and independently translated mobile-first designs into a web interface. I played a key role as the main developer implementing these designs on Bubble.io, a code-free building platform.
Our Design Process
The Research
Understanding our purpose.
Before we moved into visualizing the mobile experience, we knew it was necessary for us to understand the content that we would recommend to our users, and leverage ideas from already-successful applications. We had two main phases when it came to the research.
Assessment Brainstorm
Our first objective was to create an assessment for the users to customize an ideal learning experience for them. Through delegations with the CEO and Marlow coaches, we gained valuable insights. Following our brainstorming session, we originally create twelve questions, but narrowed it down to six to allow users to quickly get into the experience.
01
For demographic targeting, we incorporated questions about our users' managerial roles, including the number of people they supervise and those whom they report to.
02
To support our envisioned gamification system, we integrated questions probing the users' "level of certainty," aiding in determining their proficiency stage in particular categories to create a level system.
03
We took time to identify specific skill acquisition topics that users focused on during coaching sessions with Marlow, ensuring precise curriculum alignment for the mobile experience.
Competitive Analysis
Next was to focus on the users’ interaction with Micro activities. To better understand a desired execution, we conducted a competitive analysis of different learning platforms. Our strategic approach involved gamifying the learning material, prompting us to target and draw inspiration from products that excelled in integrating gamification elements into the learning process. This is what we found.
Competitive Analysis Takeaways
Duolingo
Strengths:
Motivation to user through rewards, accolades, and levels
Well organized and established curriculum
Ability to fine-tune the amount of time to spend per day
Weaknesses:
Too many distracting features from the core experience
UI seems very dense which makes it hard to quickly navigate
It may be too "cartoony" for majority of its users being that language learners typically range from the early 20s to late 60s, and their largest demographic group is 18 to 24
Udemy
Strengths:
Have access to all sorts of courses at once
Great overview of the lesson plan before taking the course
Weaknesses:
Everything is locked behind a pay wall. A user has no idea if paying for this course will beneficial for them before paying.
Well organized and established curriculum
Ability to fine-tune the amount of time to spend per day
Coursera
Strengths:
Allows freedom of ciriculumn creation, enabling them to make their own learning plan
Very clean UX, easy to navigate for first-time users
There are certificates to validate things that a user has learned
Weaknesses:
The experience is left too open to the user. The user may have problems deciding what courses they should actually take in order to advance in a subject of their choosing
In order to take a class, you must enroll in the class and join a cohort instead of learning at your own pace
Thrown into the app without any guide whatsoever
The “Define” Process
Navigating the challenge.
With the valuable data collected, we now had to identify the problem to make sure we are solving for the right one.
Problem Statement
Although we discussed the problem we were solving for through our delegation during our initial research phase, we wanted to pinpoint exactly what we were solving for to make sure we were staying on track throughout the sprint.
How might we create a mobile experience that gives users guided learning materials while giving them autonomy over their learning experience?
User Flows
We created two different user flows to account for the first-time users and returning users. This was to help us understand what would happen in the actual experience
Overview #1
Detailed Flow #1
Overview #2
Detailed Flow #2
The Ideation & Test
Putting together the building blocks.
It was finally time to start executing the solution and making it a reality.
Sketches
We sketched our ideas. Independently, the other designer and myself collaborated to select the most effective components from each.
Wireframes
After a day of sketching and coming to a consensus on the design, we then translated the sketches into low, then mid-fidelity wireframes, shaping an interactive experience for users to test in our next stage.
Onboarding Flow
In-app Flow
Usability Testing
To validate our designs, we reached out to a handful of different users. Additionally, we tested internally with coaches and the CEO for additional insights. The goal of the test was identify red flags in the experience to address them, and preserve the green flags. The users where presented with four tasks.
Task #1: Sign-up as a new user.
Task #2: Go through the onboarding flow.
Task #3: Go through one section with three lessons of the Micro Activities.
Task #4: Go into the other tabs and describe what each entails.
Usability Test Takeaways: Needed Work
01
Problem: Lack of structure — Users wanted more structure on how many tasks they should perform per day. In the current design, they are thrown right into the experience with virtually no direction on how many lessons they should do even with the engagement time set in the onboarding .
Solution: We added a “daily goal” feature where users will be tasked with completing a number of tasks based on a preference they set in the onboarding experience. In the onboarding experience, users are able to set how many minutes per day they would like to engage in Micro Activities, which would then equate to the number of tasks they should complete for that day. (e.g. 5 minutes per day = 1 lesson or 3 tasks).
02
Problem: When a user would go through a lesson or exercise, they would be confused as to what was in the actual lesson, and how long it would take to complete. There had seemed to be a lack of clarity.
Solution: We added a overview page that would break down what would entail in the lesson, how many tasks will be included, and how long it will take them to complete it.
Usability Test Takeaways: Worked Well
01
Tracking habits and progression were a favorite among all of our testers. They felt that they could see growth by having their progression displayed.
02
The hierarchy of the text and graphical elements were clear. The users were able to tell what lesson was connected to which category in the curriculum. They noted that the visual hierarchy made sense on the main tabs and within the lessons/tasks themselves
03
The plans feature was mentioned to be a great perk. Users can set the time duration per day, the days of the week, and the duration overall experience that they’d like to indulge in the micro Activities. Users felt this worked well.
The Design
Palette to perfection: painting the building blocks.
With everything in order, we finally moved into adding flavor to our design building blocks.
Typography & Color Pallet
We kept the designs very close to what we already had on the Marlow platform for the most part. We did add a few changes to the color pallet to create a feel for a new immersive experience.
Iconography
The selected icons were meant to showcase a professional feel that also held a feeling of playfulness. This was to create a feeling of accessibility for all users interested in FX, not only experts.
Final Designs
Here are the final designs of the experience.
Desktop Designs
Although this was a mobile-first product, we were aware that accessibility is paramount to good design. Some of our users weren't as tech savvy as most of our users. As a result, we translate the mobile design into a desktop friendly version so that they could comfortably dive into the experience as well.
Building in Bubble
The project's biggest challenge was integrating the designs into Bubble.io for a full-functioning experience. Unlike drag-and-drop platforms such as Webflow or Wix, Bubble.io demands an understanding of backend logic to build your product end-to-end. This experience provided me with an understanding of the developer mindset, which enabled me to take a slightly different design approach to account for the development limitations of designs that I wasn’t aware of prior.
The Solution
Micro Activities, but a mega impact.
From a blueprint to a working experience, Micro Activities aims to evolutionize learning.
01. Getting Started
Go through the welcome screens to learn about what Micro Activities is all about.
02. Lessons Targeted for You
Take the Micro Activities questionnaire to gain access to a curriculum that is a perfect fit for you. Don't have time? No worries. Select desired topics to set up your own curriculum.
03. Setup Your Learning Plan
Create your plan so that you can engaged with Marlow Micro Activities whenever YOU feel like.
04. Complete Daily Tasks
Complete tasks recommended by Marlow. Read informative articles, watch insightful videos, and validate your learnings through challenging quizzes and self assessments.
05. Preview Your Plan
Feeling curious about your recommended curriculum? Look into your plan, choose an engagement date, and scope out the tasks to complete for that day.
06. See Your Progress
Keep track of your learning, the days of engagement, and the amount of time spent learning in Marlow Micro Activities.
Prototype
The Conclusion
Final thoughts & next steps.
Our users voiced their eagerness to get their hands on this experience!
A final usability test was conducted after we finalized the designs and developed them. The feedback reflected that there was a lot of excitement about the upcoming experience. A crucial takeaway for me was the realization that products are never truly finished. Embracing a holistic approach in crafting meaningful digital experiences, I learned the importance of remaining open and empathetic to user needs, steering the product in the right direction. This experience highlighted the significance of being problem-focused rather than solution-centric, acknowledging that the answers don't always come on the first try.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
