Brainy
Android app for remote expert advice
1
Overview
Brainy is a project app I designed during my Career Foundry UX design certification course. It is a mobile app intended to serve users that need professional advice in various fields. Brainy app allows to connect with experts within the platform through chat, video and audio call, as well as provides video courses and specialized articles so that users could learn about the subject they are interested in the way they prefer.
2
The Challenge
Nowadays a lot of people are too busy to meet specialists like lawyers, therapists, and coaches personally if they have a question or want to learn a new skill. There are a lot of resources out there, but it can be difficult and time consuming to find a trustworthy answer to a specific question. To address this problem, I set on a task to create a reliable, intuitive app that would serve as a comprehensive resource allowing users to easily connect with experts and find all the information and services they need in one place.
3
My Role
Competitive Analysis. User Interviews. User Research Analysis. Affinity Mapping. User Personas. User Stories. User Journey Maps. User Flows. Sitemap. Card Sorting. Low, Mid, High- Fidelity Wireframes. Prototyping. Usability Testing.
4
Tools
Balsamiq. Prott. Sketch. InVision. Usability Hub. Optimal Workshop.
View Video Introduction
Competitive Analysis
I conducted a Competitive Analysis to identify the potential in the market and to understand how to stand out against existing offerings. The analysis showed that at the time of the study there were very few direct competitors allowing to conveniently connect with a wide pool of experts within a mobile platform. The number of indirect competitors was significantly larger and included websites with solid expert communities as well as successful expert apps that specialize on a specific niche, such as coaching, therapy, etc. I chose to focus on two main competitors: Magnifi and JustAnswer apps for a more in-depth analysis.
Insights
By analyzing marketing, SWOT and UX profiles I arrived to the conclusion that there is room for new players in the market. The key differentiator and contributor to the success of the app will be its convenience, useful features that are missing from the competition, and a more comprehensive proposition in terms of services and content.
Insights
By analyzing marketing, SWOT and UX profiles I arrived to the conclusion that there is room for new players in the market. The key differentiator and contributor to the success of the app will be its convenience, useful features that are missing from the competition, and a more comprehensive proposition in terms of services and content.
User Research: Interviews
To understand my users and learn about their behaviors, needs and frustrations that can be addressed in this app, I carried out my research by conducting In-person and Remote Interviews with 5 participants. After gathering and recording all the information, the Affinity Mapping method was used to sort and group information in order to find common themes, patterns, and pain points.
Insights
Insights
- Users usually search multiple sources on the web before reaching out to an expert.
- Users may feel frustrated and stressed because of the information overflow online.
- Users need all communication channels (chat, audio, video), so they can choose one depending on their needs.
- Most users expect instant feedback from an expert.
- Most interviewees enjoy staying up-to date through articles and video tutorials on the topic of their interest.
- Ratings and examples of work play a big role in validating a specialist's expertise.
- Users would like to be able to share images and files, and have a convenient availability calendar for scheduling with a reminder within an expert platform.
User Personas
The key findings obtained thus far helped me to shape three distinct User Personas representing different segments of our target audience:
1. Tina is a designer who needs to consult with an online marketing expert in order to learn tips for her online business promotion.
2. Dan, a software engineer, is looking for an online course that allows to communicate with the coach so that he could improve his table tennis skills.
3. Hanna is a housewife who wants to read reliable articles on baby development free of charge in order to learn how to take care of her newborn baby.
To stay connected to the target audience and avoid personal bias, I referred to User Personas throughout the entire product development process.
1. Tina is a designer who needs to consult with an online marketing expert in order to learn tips for her online business promotion.
2. Dan, a software engineer, is looking for an online course that allows to communicate with the coach so that he could improve his table tennis skills.
3. Hanna is a housewife who wants to read reliable articles on baby development free of charge in order to learn how to take care of her newborn baby.
To stay connected to the target audience and avoid personal bias, I referred to User Personas throughout the entire product development process.
Journey Maps
Based on primary goals of our personas, Journey Maps were then created. This process allowed me to better understand how our users may feel, behave and think as they interact with our app in certain scenarios, and what can be done to maximize their experience.
User Flows
Next, User Flows were constructed to illustrate detailed steps and complete paths that users would follow within the app to achieve their goals in the most seamless and satisfactory way. This stage also helped me to map out Brainy's desired pages and functionality.
Sitemap
User flows were then used as a reference point for drafting the app sitemap. This helped to get a better idea of how our pages would be laid out and connected hierarchically.
Open Card Sorting test was run to clarify how users would expect to see content grouped on a website and how they might see these groups labelled. After several iterations based on user input and my own insights throughout the design process, a number of changes were made to the initial sitemap of the app:
Open Card Sorting test was run to clarify how users would expect to see content grouped on a website and how they might see these groups labelled. After several iterations based on user input and my own insights throughout the design process, a number of changes were made to the initial sitemap of the app:
Wireframing & Prototyping
Wireframes were created in Low, Mid, and High Fidelity throughout the design progression. I sketched out Low-fidelity Wireframes that show off the app's core functions, its basic interface elements and content arrangement. This format allowed me to quickly try out different ideas. A series of sketches were created before the most feasible ones were selected for the low fidelity prototypes. Illustrated is expert booking flow:
After low-fidelity prototypes were finalized, these sketches were translated to Mid-fidelity Wireframes using Balsamiq software. This stage allowed for a more complete representation of the app's content and functions.
High-fidelity Wireframes were first created in grayscale, and were used for Usability Testing. Then, the polished mockups went through additional rounds of iterations based on user input, Material Design Guidelines, Accessibiity Guidelines recommendations, as well as my own considerations.
At the high-fidelity level, a lot of change was implemented in terms of elements placement, information architecture, and navigation flow. For instance, as I was replacing dummy text with real content, I realized that the harmonica menu on Discover page does not work for the long list of subcategories, so I added a separate page to the flow for the subcategories list.
User Testing
Once High-fidelity Wireframes in grayscale were finished, I ran my first session of usability testing. My goals were to evaluate the app's overall utility and usability and identify possible areas for improvement for further iterations.
In-person usability tests were conducted with 6 people. After a few background questions, the participants were asked to complete several scenario tasks using Brainy prototype. By observing user's body language during the testing, and analyzing the recorded results through a Rainbow Spreadsheet, I gathered valuable insights to apply to the design of Brainy.
While overall all the scenario tasks were completed smoothly by all participants, there were some issues that required improvement. Some of the major changes resulting from this research are outlined below:
Refining the Design
In order to maintain coherence and make sure the app was aesthetically pleasing, I created a Design System that reflected the defined how logo, color, typography, UI elements, Layout, Language and Tone are to be used in reference to Brainy app. With a focus on a personal, trustworthy, and professional setting, Brainy speaks to its users through a light and clean UI, colors that connote professionalism and wisdom, and clear humanistic tone. Since I was developing a native Android app, I made sure that my designs adhere to the Google's Material Design guidelines.
To make sure that Brainy caters to users with different abilities, Designing for Accessibility was practiced as well. I used Used Color Contrast Checker to ensure that contrast between text and its background complies with the WCAG AA Level accessibility standard. Also, I made sure all the Brainy icons and symbols are universally recognizable. And finally, registration form fields were redesigned to have clear boundaries, visible labels, and email and password glyphs for better accessibility.
Final Mockups
