A Case Study:

Mindful Journey Mobile App

Giving expat spouses a safe space for mindfulness support & connection

Mindful app phone mockup

Project Brief

Roles & Responsibilities

Design Team:  Me, myself, and I

My Role Details:
  • Liaison
  • Research
  • Content
  • Craft
  • Interaction
  • Accessibility
  • Usability
  • Storytelling
Frank the author
Angelic the client

Client Background

My client, Angelic Ingram, is an inspiring holistic health practitioner, mindfulness coach, & an expat wife from San Diego.

She's very passionate in helping other expat spouses thrive in their adopted countries and lifestyles.
  
As an expat spouse herself who spent many years in the UK supporting her husband, she strives to maintain a digital safe space where all expatriates worldwide are welcomed, supported, and heard.
  • Create a social media mobile application on iOS specifically for poets to showcase their work, communicate with other poets, get booked for events, and get paid.

  • 3-week timeline to deliver a lo-fidelity wireframe minimum viable product (MVP).

Project Objective

  • The objective of the project was to redesign my client's life coaching business website. She expressed frustration about not attracting enough clients.

  • Her initial wants was to increase business thru coaching appointments, blog signups, and a mobile version of her site.
bullseye
problem summary

Problem Summary

  • Before offering any solutions to improving her site, I needed to conduct research to find the problem that needed solved.

  • After initial audit and usability tests of her current site along with a user survey, I uncovered the following key insights:
    • Demand for a mobile app at 74.5%
    • Users wanted updated mindfulness content
    • Users wanted to connect with other expat spouses
The research data helped defined the problem statement below:

Problem Statement

This is a block of text. Double-click this text to edit it.
problem statement

Solution Summary

After research confirmed initial assumptions and revealed surprises, the MVP solution and scope was defined in the following feature set:
  1. Create mobile app version of site.
  2. Implement community feature combining a forum board and chat feature for expats to connect with each other.
  3. Create onboarding process for membership due to community feature.
  4. Make online scheduling for appointments easier and more prominent.
  5. Make blog newsletter sign ups easier and more prominent.
problem solution
couple in airport

Users & Audience

  • The primary users are expat spouses who relocate to non-native countries in support of their spouse’s career.

  • The secondary users are expatriates themselves whose spouses have relocated with them.

Scope & Constraints

  • 3-week timeline to deliver a hi-fidelity wireframe and prototype minimum viable product (MVP).

  • Create an iOS mobile application of current site with a 5-feature solution set defined above.

  • $0 budget – used free tools and resources.

  • Stakeholders: My client and Thinkful academic staff.
Scope and Constraints

Accessibility

Human-Centered Design

While practicing lean-agile methodologies, we often made reference to a human-centered design and implementation process.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
principles of universal design

Important Survey Questions

The survey was key in helping us inform our design and decide what type of digital product to create. Two questions stood out to us most:

Question 1:  
What platforms are poets regularly posting their content on currently?

Key Insight:
Our data showed that almost 90% of poets were posting on social media apps. It was important for us to explore these responses further in user interviews.
  • Because A Mindful Journey is a mobile app, I had to be mindful of the screen size and how to ensure complex screens didn’t overwhelm users which could result in cognitive overload.

  • To keep the app simple, I made sure to apply proper element hierarchy and employed the principles of universal and visual design.

Important Survey Questions

The survey was key in helping us inform our design and decide what type of digital product to create. Two questions stood out to us most:

Question 1:  
What platforms are poets regularly posting their content on currently?

Key Insight:
Our data showed that almost 90% of poets were posting on social media apps. It was important for us to explore these responses further in user interviews.
  • Furthermore, I ensured there was enough space between elements to avoid accidental taps.

  • Finally, I used consistency throughout the app to make it both usable and learnable so that users would be comfortable using it and have a positive experience while in the app.
principles of visual design

Design Process

Design Sprint

This is a block of text. Double-click this text to edit it.
design sprint image
  • Because the timeline was only three weeks and I was a one man team, I employed a lean Agile process in a fast-paced 3-week design sprint.

  • This allowed me the flexibility to quickly change direction if needed and make continuous iterations throughout the project cycle.

Design Process

Human-Centered Design

I also referenced a human-centered design and implementation process during the project to ensure I kept my focus on the users & their needs.
human centered design process
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Assessment

Exploratory Research

Our team used a Kanban board in Jira to help keep us organized, understand the workflow, and on track to meet strict deadlines.
After meeting with client and discussing her requirements, I conducted research on the expat community to learn what questions I needed to ask.
  • Some common expat concerns include fitting in, language barriers, loneliness, loss of independence, finances, & healthcare.

  • As of 2013, the total number of expatriates worldwide was around 50.5 million people and was expected to grow at an annual rate of 2.4% for the foreseeable future due to globalism.

  • Of those 50.5 million people, 65% were either in a relationship or married — that’s a significant market for this app.
person researching
site audit image

Site Audit

Before I could offer any solutions to my client on how to improve her site, I first scrutinized her web presence and found the following issues:
  • Content and layout of site was inconsistent.
  • Several typefaces were in use.
  • Button shapes, sizes, and colors were inconsistent.
  • No visible call to action (CTA) on home page above the fold.
  • Confusing user flow.
  • Site not mobile responsive.
After gaining a better understanding of the poetry landscape, our team searched the Internet for similar apps that met the following criteria:

Usability Testing

Human-Centered Design

After our preliminary research findings and meeting with our client, we collaborated on a virtual whiteboard in Figma with sticky notes. We tried to understand the thoughts and emotions behind what people may say & do, think & feel, and hear & see while using our app.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Usability Tasks

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
I then conducted usability tests on her site to see what problems would be uncovered. I asked testers to complete the following three tasks:
  • Task 1: Schedule an appointment.

  • Task 2: Locate the price for an "Individual session rate".

  • Task 3: Sign up for the weekly blog newsletter.
woman at computer
key findings

Key Insights

The usability tests revealed the following key insights:
  • Confirmed my initial assumption that the user flow was confusing.

  • Testers had a hard time figuring out how to schedule an appointment.

  • Testers found it almost impossible to subscribe to the weekly blog newsletter.
After gaining a better understanding of the poetry landscape, our team searched the Internet for similar apps that met the following criteria:

Branding

Human-Centered Design

My client already has a color palette and branding logo she wants to keep using. I suggested possible iterations in the future after conducting preference testing on her brand.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Branding

Style Tile

Even though the client wants to keep her current color palette, I conducted a style tile to try and convey as many adjectives to represent the style I want the brand to have. These are just some of the words that came to mind.
Style Tile
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Branding

Mood Board

After setting my frame of mind using the style tile with mood statements, I created a mood board to try and capture the feeling I wanted the brand to convey.
Mood Board
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Branding

Typography

After the initial audit on my client's site and finding many different typefaces in use, we decided to go with Lato, a sans-serif typeface that conveys simplicity and grace.  It's not overbearing and it displays well in many different font sizes.
Lato Bold 34 - Large Title
Lato Bold 28 - Title 1
Lato Bold 22 - Title 2
Lato Bold 20 - Title 3
Lato Regular 17 - Body 1
Lato Bold 17 - Body 1 Bold
Lato Regular 15 - Body 2
Lato Bold 15 - Body 2 Bold
Lato Regular 14 - Body 3
Lato Bold 14 - Body 3 Bold
Lato Regular 16 - Action/Callout
Lato Bold 16 - Action/Callout Bold
Lato Regular 12 - Caption 1
Lato Bold 12 - Caption 1 Bold
Lato Regular 11 - Caption 2
Lato Regular 13 - Footnote
Lato Bold 13 - Footnote Bold
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Branding

Branding Logo

Even though the client wishes to keep her current branding logos for now, I did suggest the horizontal logo can be difficult to read especially on smaller screens because of the swirl in the background.

I wanted to try and at least tweak the design but, unfortunately, the client no longer has the original files it was created in. This can be addressed in future iterations by conducting preference testing.
Branding Logos
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Users & Research

Proto Personas

Human-Centered Design

I made initial assumptions based on my research of the expat community by creating two proto personas.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Proto Persona 1 - Dana Powers

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Expat spouse relocated to London to support her husband’s career.

  • HR manager in her late 30's.

  • Loves connecting with people of different cultures and backgrounds.

  • Often feels isolated in her adopted country. Would like to meet other expat spouses.

  • Really misses her family and friends back in the States.
proto persona 1
proto persona 1

Proto Persona 2 - Ted Caldwell

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Expat spouse relocated to Shanghi, China to support his wife’s career.

  • IT professional in his early 30's.

  • Technology buff and big sports fan.

  • Would love to get involved in the local community and connect with locals.

  • Misses hanging out with his friends to watch sporting events.

Competitor Analyses

Human-Centered Design

I then conducted a SWOT analyses on three similar sites that target expat spouses living in non-native countries.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
SWOT analyses

SWOT — Competitor Strengths

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Use of effective call to action (CTA) buttons.

  • Relevant content.

  • Effective content and messaging.

  • Visual design acceptable.

  • Effective appointment scheduling.
SWOT strengths
SWOT weaknesses

SWOT — Competitor Weaknesses

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Inconsistent use of colors and typography.

  • Ineffective hover effects.

  • Bloated primary navigation.

  • Too much content and pages.

  • Confusing messaging.

  • Sites not mobile responsive.

SWOT — Client Opportunities

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • No mobile app available for competitors.

  • Competitors don't offer option to connect with other expats.

  • Confusing user flows on other sites.

  • Others do not offer mindfulness products for sale.
SWOT opportunities
SWOT threats

SWOT — Client Threats

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Easy and prominent scheduling option.

  • Offers plethora of mindfulness content.

User Surveys

Human-Centered Design

Next, I conducted a user survey that asked 15 questions shaped by my research and meets the following criteria:
  • Expat spouses living in non-native countries supporting their spouse’s career.
user survey
I received 17 responses and the survey was key in helping to inform my design and to decide what features to include in the digital MVP product I create. Out of the 15 questions I asked, two stood out to me most:

Survey Question 1:

What do you consider the most important feature of this type of app?

Key Insights:

  • Users want updated mindfulness content.
  • The answer that stood out to me the most was users want to connect with other expat spouses at 35%.
  • This gave me the idea for a "Community" feature combining a forum board and chat option so expats can connect with each other.
  • This could lead to friendship and support and a compelling reason to keep using the app.
survey question 1
survey question 2

Survey Question 2:

What device do you prefer for this type of app?

Key Insights:

  • Overwhelmingly at 74.5%, users preferred mobile devices (iPhone & Android combined) to consume digital content.

  • This answer convinced me to develop a mobile app instead of redesigning my client's site. Mostly, because I foresee an onboarding process for membership due to a "Community" feature.

  • Develop initially for iOS because iPhone was more popular in the survey.

User Interviews

Human-Centered Design

Unfortunately, I was unable to perform any in-person user interviews because I didn’t have any volunteers that agreed to do one.
user interview
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Pain Points

Human-Centered Design

Here are some of the most common pain points shared by the expat spouse community.
pain points
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

How Might We (HMW) Strategy

Human-Centered Design

I then brainstormed using the How Might We (HMW) strategy by asking important questions to try and converge my ideas into a digital solution that falls within the project scope and meets the needs of the users.
How might we board
  • Her pain points and goals reflects our users. They experienced frustration finding reputable venues to perform at and getting paid on time, if at all, for their art even though they attracted hundreds and thousands of people for event hosts.

  • Our research confirmed there is a strong demand for a safe place for poets like Martina to showcase their work and be rewarded through exposure and monetary compensation.
After gleaning key insights and pain points from our research, our persona, Melodious Martina was born.  Like most poets and spoken word artists, she is very passionate about her craft because she believes she can change the world by giving a voice to the voiceless and empowering generations to come.

Her pain points and goals reflects our users. They experienced frustration finding reputable venues
to perform at and getting paid on time, if at all, for their art even though they attracted hundreds and thousands of people for event hosts.

Our research confirmed there is a strong demand for a safe place for poets like Martina to showcase their work and be rewarded through exposure and monetary compensation.

Converging on a Solution

Human-Centered Design

I focused on the 5 most important HMW’s that would solve my client’s needs while also allowing me to complete an MVP within a 3-week design sprint.
how might we sticky notes
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Problem Statement

Human-Centered Design

After synthesizing all the research data, I finally found a problem that needed solved in the following problem statement:
problem statement
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Core Features for MVP

Human-Centered Design

This is the core feature set I focused on for an MVP that meets the scope and client’s requirements.
problem statement
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Survey Question 1:

What do you consider the most important feature of this type of app?
  1. Create a mobile app version of site.
  2. Implement a community feature combining a forum board and chat feature for expats to connect with each other.
  3. Create onboarding process that allows users to create a membership.
  4. Make online scheduling appointments easier and more prominent.
  5. Make blog newsletter sign up easier and prominent.
puzzle piece

User Personas

Human-Centered Design

So after deriving key insights and pain points from all my research data, the personas of Dana Powers and Maria DeLeon were born.
  • User Persona 1 - Dana Powers
  • User Persona 2 - Maria DeLeon
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

User Stories

Human-Centered Design

I then created user stories for both Dana and Maria to help flesh out the user flows needed for the core features of the app.
  • User Stories - Dana Powers
    For Dana’s user stories, I included the first three in the core features of the app.  However, in the fourth user story, I decided not to pursue the job board feature because of time constraints.
  • User Stories - Maria DeLeon
    For Maria's user stories, I included all four in the core features of the app.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

IdeatE & cREATE

User Flows

Human-Centered Design

I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
  • Account Sign Up User Flow

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    User Flow 1
  • Schedule Appointment User Flow

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    User Flow - Schedule Appointment
  • Community Forum & Chat User Flow

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    User Flow - Forum + Chat
  • Blog Newsletter User Flow

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    User Flow - Blog Newsletter
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

App Site Map

Human-Centered Design

I then created a static site map that helped me determine what content should go where and what screens I needed to create.
App Site Map
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Sketching Solutions

Human-Centered Design

Now that I had a better idea what screens and features I needed, I sketched out wireframes informed by the user flows while also keeping accessibility in mind.
research data landscape
  • Splash & Onboard Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Wireframe Sketches 1
  • Onboard & Sign Up Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Wireframe Sketches 2
  • Login & Home Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Wireframe Sketches 3
  • Home & Appointment Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Wireframe Sketches 4
  • Community Forum & Chat Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Wireframe Sketches 5
  • Chat, Blog, & About Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Wireframe Sketches 6
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Digital Wireframes

Human-Centered Design

Now that I had a better idea what screens and features I needed, I sketched out wireframes informed by the user flows while also keeping accessibility in mind.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Digital Wireframes

Mid-Fidelity Wireframes

Based on my sketch solutions, I created mid-fidelity wireframes for onboarding, signup and login, home, appointments, community forum, community chat, and blog screens.
research data landscape
  • Splash & Onboard Wireframes
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Mid-Fi Wireframes1
  • Sign Up & Login Wireframes
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Mid-Fi Wireframes2
  • Home, Appt, & Community Forum Wireframes
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Mid-Fi Wireframes3
  • Community Chat & Blog Wireframes
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    Mid-Fi Wireframes4
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Digital Wireframes

Hi-Fidelity Wireframe Iterations

Next, I applied color and images to the wireframes and turned them into hi-fidelity versions.  During this process I began to iterate on specific screens after scrutinizing them with accessibility in mind. 

Here are a few screens that I made iterations to:
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
Onboarding Screen Iterations
The next round of iterations, we added content, icons, buttons, a navigation menu, and titles on each screen.

After adding these additional elements to provide clarity, I spotted accessibility issues that needed to be addressed. Specifically:

On screen 1, some elements on the ‘Create Profile’ screen are still too small. They need to be bigger for accessibility.
  • Increased the size of text below the illustration to be more readable.

  • Added "Skip for now" under the "Next" button.
Wireframe Iterations 1
Wireframe Iterations 2
Appointment Screen Iterations
The next round of iterations, we added content, icons, buttons, a navigation menu, and titles on each screen.

After adding these additional elements to provide clarity, I spotted accessibility issues that needed to be addressed. Specifically:

On screen 1, some elements on the ‘Create Profile’ screen are still too small. They need to be bigger for accessibility.
  • Increased the size of the month, days, and date numbers in the calendar to be more readable.

  • I also changed the buttons below the calendar to be outlines instead of using pulldown menus. My thinking behind this was to use those buttons to trigger modal popups as opposed to using a pulldown interaction.
Forum Screen Iterations
The next round of iterations, we added content, icons, buttons, a navigation menu, and titles on each screen.

After adding these additional elements to provide clarity, I spotted accessibility issues that needed to be addressed. Specifically:

On screen 1, some elements on the ‘Create Profile’ screen are still too small. They need to be bigger for accessibility.
  • Increased the size of the displayed text in the topics frame to be more readable.
Wireframe Iterations 3

Digital Wireframes

Thinkful UX/UI Feedback Iterations

I then addressed feedback from the Thinkful UX/UI team for my wireframe assignment by making another round of iterations. 

Here are a couple of more screens that I made iterations to:
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
Grader Feedback Iterations 1
Create Account Screen Iterations
The next round of iterations, we added content, icons, buttons, a navigation menu, and titles on each screen.

After adding these additional elements to provide clarity, I spotted accessibility issues that needed to be addressed. Specifically:

On screen 1, some elements on the ‘Create Profile’ screen are still too small. They need to be bigger for accessibility.
In the create account screen, the grader said the logos I'm using for additional sign up options do not meet branding requirements for those companies.
  • After studying up on each brand's requirements, I replaced my custom icons with their standard sign up option logos.

  • To save valuable real estate on this screen and to avoid clutter, I decide to remove the Apple sign up option altogether which became a casualty of this iteration.
Appointment Screen Iterations
The next round of iterations, we added content, icons, buttons, a navigation menu, and titles on each screen.

After adding these additional elements to provide clarity, I spotted accessibility issues that needed to be addressed. Specifically:

On screen 1, some elements on the ‘Create Profile’ screen are still too small. They need to be bigger for accessibility.
In the appointment screen, the Thinkful UX/UI team said the "Pick Time" and "Options" button heights should be 44px to meet best practices.
  • I increased the button height to 35px from 28px instead of the recommended 44px because this would require a major redesign of this screen.
  • Because of time constraints I decided to address the redesign in future iterations.
They thought the "Name" and "Email" fields didn’t meet accessibility contrast requirements. After using a contast checker tool, I found they were right.
  • I fixed this by bumping up the transparency on the placeholder text from 60% to 65%.
  • I also realize the form fields should have labels. I will address this in a future iteration.
Grader Feedback Iterations 2

Digital Wireframes

Mockup Iterations

Next, I turned my attention to mockups.  Here are a couple of key core mockup screens within the app that I made some iterations to after getting feedback from my fellow UX/UI cohorts:
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
Mockup Iterations
Appointment Screen Iterations
The next round of iterations, we added content, icons, buttons, a navigation menu, and titles on each screen.

After adding these additional elements to provide clarity, I spotted accessibility issues that needed to be addressed. Specifically:

On screen 1, some elements on the ‘Create Profile’ screen are still too small. They need to be bigger for accessibility.
I ran a contrast checker on some of my core screens and found that my default buttons did not meet accessibility contrast requirements. I made the following changes to all default buttons within the app:
  • I increased the brightness of button labels to be pure white instead of off white.

  • I changed the color on the button backgrounds to a slightly darker shade (hex #BC9B5D to #B38F4A).

  • As you can see, the buttons are now easier to read.
Community Chat Screen Iterations
The next round of iterations, we added content, icons, buttons, a navigation menu, and titles on each screen.

After adding these additional elements to provide clarity, I spotted accessibility issues that needed to be addressed. Specifically:

On screen 1, some elements on the ‘Create Profile’ screen are still too small. They need to be bigger for accessibility.
  • Instead of using the chat icon with a fill color of green to indicate a user is online, I decided to use a more traditional round circle to indicate online status.

  • With that change, I moved the chat icon to the left of the circle and removed the messaging icon altogether.

  • I believe these changes were needed to better match mental models of most users and to simplify the interface.
Mockup Iterations 2

The Solution

Hi-Fidelity Prototypes

Human-Centered Design

I created a hi-fidelity prototype in Figma incorporating the user flows into a product that I could now assess in usability tests.
Figma prototype
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Unmoderated Usability Tests

Human-Centered Design

To assess my prototype, I conducted 15 unmoderated usability tests using Maze and got some unexpected and surprising results. I have documented each of the tasks below with their results and any iterations I made to address the most glaring issues.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Usability Testing

Task 1:  Go thru onboarding process & create account

Test Results:
Overall happy with success rate of 73.3%.  This tells me the on-boarding process is straightforward and easy to follow.
Task 1 Test Results
Key Insights:
After examining the heat maps, this is what I found that brought the success rate down to 73.3%.
  • Screen 2: 87% success rate with 71 usability score and 27% misclick rate. Most of the misclicks were from users tapping all over the screen instead of the "Next" button.

  • I don't believe any changes are needed since I want users to click the "Next" button. Allowing users to tap any part of the screen to move to next screen may cause accidental taps by users resulting in frustration.
Task 1 Heatmap
Iterations:
  • No iterations needed.

Usability Testing

Task 2:  Schedule an appointment with Angelic

Test Results:
I admit I was rather surprised at the low success rate on this task at 64.3% and high-bounce rate at 21.4%. To find out why it was so low, I looked at the heat maps.
Task 2 Test Results
Key Insights:
After reviewing the heat maps, I found the following issues:
  • Screen 2: 75% success rate with 59 usability score. Unsuccessful attempts included clicking on the wrong calendar date or clicking on other options before choosing a date.
Task 2 Heatmap
Iterations:
  • Made numbered dates bigger on calendar.

  • Greyed out unavailable dates on calendar.
Task 2 Iterations

Usability Testing

Task 3:  Scroll through the list of forum board topics

Test Results:
I was surprised at how low the success rate was for this task. To learn why, I had to examine the heat maps.
Task 3 Test Results
Key Insights:
After reviewing the heat maps, I found the following issues:
  • Screen 1: 54% success rate with 54 usability score. The heat map shows that clicks were almost split evenly between the "Community" navigation icon and the "Blog" navigation icon.

  • I believe this is due to my poor instructions for this task. I asked users to go to the Forum Board feature but that left users guessing on where it might be. It's not clear from the home screen where it would be located.
Task 3 Heatmap
Iterations:
  • No iterations at this time. Additional in-person usability testing may inform a better way to promote this feature.

Usability Testing

Task 4:  Interact with Sherry Zhu in the Chat feature

Test Results:
I was quite surprised at how low the success rate was for this task. To learn why, I had to examine the heat maps.
Task 4 Test Results
Key Insights:
After reviewing the heat maps, I found the following issues:
  • Screen 1: 38.5% success rate with 38 usability score. Most testers couldn't figure out where the chat feature was. Most ended up clicking on the "More" navigation icon instead of "Community".

  • This could be due to poor instructions on my part since it's not obvious that chat falls under community.
Task 4 Heatmap
Iterations:
  • No iterations at this time. Additional in-person usability testing may inform a better way to promote this feature.

Usability Testing

Task 5:  Subscribe to Angelic's weekly blog newsletter

Test Results:
I was rather surprised how low the success rate was at 53.8%.  I thought this task would be one of the easiest to complete. To learn why, I had to examine the heat maps.
Task 5 Test Results
Key Insights:
After reviewing the heat maps, I found the following issues:
  • Screen 1: 62% success rate with 47 usability score and 31% misclick rate. Most of the misclicks were from clicking on other buttons or navigation icons instead of the "Blog" navigation icon.

  • Not sure why this was so difficult for some testers since "Blog" is a main navigation menu icon.
Task 5 Heatmaps 1
  • Screen 2: 88% success rate with 75 usability score and 25% misclick rate. Even though most testers clicked the "Subscribe to Blog" button at top of screen, the misclicks may suggest that the subscribe button doesn't stand out enough since it's the same shape and color as the "Filters" button next to it.
Task 5 Heatmaps 2
Iterations:
  • Screen 1: No suggested changes at this time. Would probably have to conduct in-person usability tests to find out why this is difficult for users.

  • Screen 2: I differentiated the "Subscribe to Blog" button from the "Filters" button. I made the "Filters" button an outline button and kept the subscribe button a solid color.
Task 5 Iterations

The Hi-Fidelity Prototype

Human-Centered Design

While practicing lean-agile methodologies, we often made reference to a human-centered design and implementation process.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
Mindful Journey Mockup

Clickable Interactive Prototype

Click or tap on the phone to open an interactive prototype of the Mindful Journey to Freedom mobile application.
  • Error Prevention (a prompt asking "are you sure you want to upload this?")

  • Help (we didn't have any FAQ's or walkthroughs, etc.)

Prototype Video

Click or tap on the video to watch a tour of the Mindful Journey to Freedom mobile application.
  • Error Prevention (a prompt asking "are you sure you want to upload this?")

  • Help (we didn't have any FAQ's or walkthroughs, etc.)
Next Sign

What's Next?

Text placeholder
  • Create new branding logo.

  • Address additional accessibility concerns.

  • Conduct additional usability testing and user interviews to address issues uncovered in the unmoderated usability tests.

  • Implement job board in the community feature.

  • Create additional screens that didn't make it into tnis MVP.

Conclusion

Reflections

Human-Centered Design

While practicing lean-agile methodologies, we often made reference to a human-centered design and implementation process.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Important Survey Questions

One of the hardest challenges I faced was to define what the problem statement should be.  I had a lot of mental blockers at first because I couldn't wrap my mind around what problem really needed to be solved!
  • It was my first time working on a team in a design sprint. It was challenging, stressful, awesome, very time-consuming, and rewarding! We looked out for each other, we laughed, we bickered, but mostly, we took pride in bringing the client's idea to life!
Orb
Earth Globe

Important Survey Questions

I found how hard it is to be a one-man design team responsible for all facets of a design project without any support.  I learned that I have to be super organized or else the data can easily get away from me.

Having said that, I believe developing my own template workflow system will help me in the future to get up and running on projects quickly and will help keep me on target and in scope.
  • It was also my first time really learning about accessibility and how to apply it to a design project. At first it was daunting because of all the accessibility standards and principles I had to try and remember. I wasn't confident I could pull it off at first. However, I quickly learned it is part of a continuous iterative process to apply accessibility and eventually get it to a place where the app is both usable and learnable. Awesome learning experience!

Important Survey Questions

I'm learning never to assume that I know the best way to design something.  The research data and usability testing is always an eye opener and is needed to help keep me curious and humble.

Furthermore, user surveys and unmoderated tests need to be combined with in-person surveys and tests to really uncover answers to problems that need solving.
  • I learned to overcommunicate in a team of eight. With that many people working in their own lead roles, it was very easy to overlap and step on one’s toes. Transparency was our mantra to prevent animosity between team members.
reflection orb

User Interview Quotes

Human-Centered Design

"It looks amazing! Not too shabby for a prototype! ;) It's given me some more excitement around building my community and business, thank you so much!"
− Angelic Ingram, the Client
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
Scroll to top