Type . Mobile App Design Class Project

Duration . 2019 July - August | 4 weeks

Method . Affinity Diagrams, Paper Prototypes, Wireframes, User Testing

Tools . Illustrator, Adobe Xd, Pen & Paper

the SPLASH 

• The animated splash page creates anticipation, while making the user feel welcome.

• It allows time for users to get ready so that they aren’t suddenly addressed by the virtual assistant.

• Pauses between each command create a smoother human-machine interaction.

• Visual cue indicates when the app is in active listening state.

• Real-time text feedback is given as the user speaks.

• A percent-to-completion animation distracts the user to make the wait more pleasant.

• A change of pace in the animated bubbles indicates active listening is on.

• Virtual assistant shrinks to a minimized view to make room for the report.

The name Blabla is catchy, and a fun alternative to the word "communication”.

I have chosen a sophisticated, warm-colour palette of charcoal black, off-white and mustard yellow. Using an off-white background conveys calmness, comfort and hope. Mustard yellow can energize and stimulate the mind and increase positive emotions.

Circles convey playfulness and harmony while the Montserrat typeface creates a modern yet professional look. To ensure the app is inclusive of those who are visually impaired, it uses the larger x-height to make the text more visible.

the PROCESS

Blabla started after being assigned “Health Care” as a prompt for a class project. After brainstorming, thinking about my own experiences, and gaining insights from my peers, I knew that my focus had to be Mental Health.

NARROWING DOWN THE FOCUS AND EXPLORING FURTHER:

In order to understand the Mental Health field in more depth, and find out what issues we are currently facing as a society, I started researching online and reading articles related to the topic.

Words that stood out during my research: wellbeing / happiness / self-care / positive thinking / social / communication.

ORGANIZING THOUGHTS:

After interviewing with peers and friends, I discovered that people’s awareness regarding wellbeing was centred/built around the core idea of maintaining good mental health, as opposed to improving poor mental health. I felt more strongly about creating an app around positive thinking and change behaviour patterns.

FOCUSING MY IDEAS:

The idea of improving communication skills came up while having coffee with a friend. The pain point came from personal experience.

“I was feeling frustrated so I asked a friend to meet for coffee. He listened to me then shared his thoughts. He meant well, but I felt my feelings were not being heard and understood.”

I realized that intentional, thoughtful wording and tone can make any interaction more positive. Blabla was created with this in mind.

I studied Maslow's hierarchy of needs, and it shows that as humans we communicate to meet a range of different needs. Good communication skills are especially important to satisfy the psychological needs, such as belongingness and esteem.

EARLY-STAGE CONCEPTUALIZING:

I made a flow chart to help visualise the overall idea and the features of the app.

CONCEPT TESTING:

Blabla’s first user testing was conducted by sharing a set of quick drafted paper prototypes with peers. Feedback was received on both the user experience and concept itself.

1ST ITERATION:

Based on the feedback and observations from user testing, I made some changes including:

• Clear instructions for the Voice User Interface design.

• Begin by asking the occasion of the conversation.

• Option to send reports to a single user, or both users having the conversation.

• Option to delete recordings.

2ND ITERATION:

• Simplified onboarding. Users were given the option to skip this process.

• Added prompts to establish what type of conversation the user was recording, e.g. a casual chat with a friend, a business meeting, or a family discussion.

• Wrote script for native voice assistant.

LATEST ITERATION:

Additional user testing was conducted with a group of two, then just one, in order to get feedback on the single-user experience. Here are the changes I made:

• Decided on the app name.

• Removed the hamburger menu on onboarding.

• Reviewed and redesigned the onboarding questions and procedure.

I wanted to create an app that would be fun and interactive, and the visual design had to live up to that goal.

The visual qualities such as retro-futuristic / psychedelic / nostalgic / past pop culture triggered feelings of playfulness and memory.

When I started looking for visual inspirations, some TV shows and product designs from the 80’s came to mind.

There are similarities between the popular culture of the 80’s and ours now. We still have the same sense of excitement about the future of technology. Smarter products are emerging every day, and we become increasingly fascinated by them.

Two different approaches on retro-inspired design. One takes on the idea of nostalgic / 80’s product design while the other is about retro-futuristic and psychedelic.

VISUAL FEEDBACK:

1. Retro-inspired and minimalist:

• Reminded users of vintage Braun products and made they feel nostalgic.

• Feels like a physical product more than just an app screen.

• Visually comfortable and easy to use.

• There is a sense of safety and trust.

2. Retro-futuristic and psychedelic:

• Speaks of fun and playfulness, but may not be sophisticated enough for a Mental Health app.

• The colour scheme is too dark and unwelcoming.

Feedback showed that the more approachable and comfortable option was the best fit for the app.