As people, we reciprocally rely on each other's strengths for the services we need, so we need to thoughtfully decide who to trust. Forte allows individuals to market their trade skills and for clients to efficiently compare a roster of talent. I created Forte with Adobe XD and Figma from the ground up, where I took on the UX researcher and UX/UI designer roles.
Before doing a deep dive into my project, I want to share my design framework, which has the following five stages as seen below. This framework helps me see the bigger picture from the start, stay organized, use critical thinking skills, and never lose sight of user-centeredness throughout the design journey.
Furthermore, an example of how I leverage my unique perspective from health to the UX field is translating a clinical framework called the Evidence-based Practice Framework during the Discovery stage. This framework helps clinicians develop patient-centered treatment plans by equally considering clinical research and data, their own professional expertise, and patient's values and preferences. Similarly, I combine background/market research, my own professional and personal experiences, and user research to strongly understand my users.
.svg)
1) For services like babysitters, lawyers, and mental health counsellors, agencies or firms usually connect me to the next available professional. Reviews on the web can give a general impression of their business as a whole. Still, I have no idea if the individual or the team I will be working with is talented.
2) Also, finding parallels to compare between agencies or firms can be time consuming because their websites and business models are all different, and I would have to call each business for quotes.
3) If that's too much work, I might ask a friend for recommendations, but they can think of one or two people at best. Thus, it is difficult to make a roster list of talents to compare.
I scoured the internet and the App Store thinking that there must be something that addresses these problems. I was able to find direct competitors, including Fiverr, Upwork, and Freelancer, that provided a list of freelancers for various professionals like designers, developers, lawyers, etc. I also considered indirect competitors, including Uber and Tinder, where the general role is to find a match to your needs. Exploring each of their apps, I evaluated their strengths and weaknesses to see how Forte could fill in any gaps in the market.
1) Direct competitors like Fiverr, Upwork, and Freelancer solve my first problem by indicating how talented each individual is with a star-ranking and review system.
2) However, none of the competitors can easily make a roster list and compare them side-by-side.
I conducted market research to see if surveys, articles, and academic literature also justify the need for an app addressing the problems I mentioned earlier.
1) The desire for individuals to create a side hustle income and the importance of networking your skills highlights the importance of an app like Forte that helps users advertise their skills. Moreover, because users like to use various devices for their productivity, this is a solid reason to create responsive app across desktops, tablets, and mobile.
2) There is enough justification for moving onto the user interview stage to ask unanswered questions, such as if users experience frustration with trusting the freelancer's competency and the time-consuming nature of comparing talents.
1) Users interested in hiring various professionals through an application. I kept the first criteria broad to ensure that I was inclusive and diverse with my target audience criteria. (5 out of 5 Participants)
2) Accredited professionals interested in advertising their private service through an application. While keeping the criteria broad, I also wanted to gather insights from accredited professionals like Lawyers and Therapists since they are harder to find in apps such as this. (2 out of 5 Participants).
I conducted user interviews to deeply understand what would attract users to using an app to search, find, and hire talent in the long run. The interviews were semi-structured with open-ended questions and follow-up questions and were conducted via Zoom with 5 users. Overall, I was looking for common answers amongst the users. I considered it a significant insight if there were at least 40% or more similar responses.
Finally, the main open-ended questions were:
1) What is the process you use or may use for searching, finding, and pairing with non-accredited professionals for their service? (e.g., babysitter, landscaper, cleaning service, any freelance work, etc.)
2) What is the process you use or may use for searching, finding, and pairing with accredited professionals for their service? (e.g., mental health counselors, lawyers, physical therapists, etc.)
3) What are the 'must-keeps' in the process you are or may be using?
4) What are the barriers about the process you are or may be using?
5) What kind of professions would you like to see?
6) If there is anything I missed, describe what an ideal app to be like.
During the user interviews, I took notes on what the users were saying, how they were feeling, and what methods worked well in the past and what didn't. Then, I synthesized the information I had gathered by identifying common patterns and keeping a tally of them in a table. Doing this led to the following user insights.
“During law school, I got matched with a mental health therapist through the school’s law society program. If I have a terrible time with the therapist, I might switch, but I don’t know who is even on the roster list, so I feel limited with my options.” - Quote from a user
“I usually call in to get to know the services someone or an agency offers. Sometimes, they transfer me over to someone else if what I am looking for isn’t what they are offering. It’s also hard to equally compare my options because there is no standard. In general, finding services can be time-consuming and confusing, so I end up going with the first place that seems decent, which doesn't always mean that I get the best service.” - Quote from a user
“A 5-star rating system and reviews alone aren’t good enough to trust someone’s integrity and competency because everyone has a different standard for good service. Also, everyone has a different bar on the significance of a 4-star vs. 5 stars. There needs to an expansion on one’s rating system.” - Quote from a user
1) Need a roster list. A large majority of users want a roster list of professionals based on their categories to see their full options.
2) Show friends' recommendations. A large majority of users value recommendations from their friends, so they want this app to show this in a meaningful way.
3) Reduce time to compare professionals. Many users find inconsistency in how all businesses advertise themselves, so it becomes more time-consuming to find parallels for comparison. Users want a more efficient way to compare professionals to decide who they will select.
4) Keep 5-star system. Many users find that the typical 5-star rating system should still be incorporated into this app to review each talent.
5) Expand on the rating feature. Many users also believe that a 5-star rating system and reviews aren't enough to give them confidence in understanding each talent's integrity and competency.
To make the design more humanistic and put faces to who I am designing for, I constructed 2 personas. Creating personas can be helpful when communicating to stakeholders about how Forte can help subgroups of customers. These personas represent what I learned during the market research and identifying insights from user interviews.
.png)
.png)
After learning about the market and my users, I contemplated how Forte could attract new users and keep users highly satisfied. I also considered how Forte could incentivize business stakeholders to invest in the app to help it grow. Therefore, having a vision of how Forte would meet user and business-focused goals forms a general foundation that leads nicely to the next stage of developing a design strategy.
Based on the market research, observing my competitors, users' insights, and my vision of Forte, I began forming an idea of the architecture of Forte. I translated these ideas into a sitemap to create a logical and seamless experience for my users. I created this sitemap knowing that Forte may not exactly look like my first sitemap draft after multiple iterations through the design journey.
Next, I wanted to dive deeper and better understand the overall journey my users would be taking throughout the app from start to finish. So, I selected one of my persona, Ariana, to better empathize with the scenario she may be in and the different decisions she would be making. To do this, I created a user flow to step into Ariana's shoes.
I used my ideation stage to make an informed decision on how to design Forte. First, I started with desktop paper wireframes by sketching 2 to 5 versions for each page and then combining components I liked from each to make a final version. Next, the desktop wireframes served as a reference to create the tablet and mobile wireframes. Finally, I created a low-fidelity prototype from the digital wireframes. This would help me quickly test the design on real users and make any priority revisions before integrating the branding and visual design.
To evaluate the efficacy and clarity of Forte, I conducted 1 usability test. The users were asked to share what they were doing, thinking, and feeling while interacting with the prototype and trying to complete the tasks given to them. Theconsisted of 5 participants who helped inform the necessary changes from the low-fidelity to the final product.
Method: Remote, Moderated usability testing
Participants: 5
Age range: 20 to 60 range
Marginalized groups: 2 of 4 are less familiar with the use of technology; 2 of 4 are less fluent in English
# of Tasks: 6
Error-Free rate: 80%
Task completion rate without guidance: 90%
To synthesize my findings from testings, I took all my notes and observations and created an affinity map. I used the affinity map in the following ways.
1) Flow Priority For each task, I graded the participant [1 = Completed with ease // 2 = Completed but with difficulty // 3 = Incomplete]. I took the average scores across all participants, so tasks with scores closer to 3 were deemed a higher priority to fix.
2) Quality Priority For each task, I asked quality-based questions like 'Did you find this task beneficial?' and 'Does this task align with what you want?'. The participants gave me a score from 1 to 5 [1 = Strongly agree = Best answer // 5 = Strongly disagree = Worst answer]. I took the average scores across all participants, so tasks with scores closer to 5 were deemed a higher priority to fix.
3) Common Qualitative Feedback I would also ask open-ended questions like 'Describe how you would change this task if applicable.' I grouped common answers within each task. I considered it a significant insight if there were at least 40% or more similar responses.
When I was iterating my prototype, I considered the occasional outlier feedback if I felt that the user who said it made a strong justification for it. But, for most cases, I grouped common patterns within a task and across all tasks to identify the underlying missing pieces preventing Forte from being a better product. As mentioned before, I considered it a significant insight if there were at least 40% or more similar responses.
1) Increased flexibility to find and sort results
Users felt that there needed to be more than one way to search and be able to freely sort results in various ways. Thus, I added the ability to search by typing, categories, and professionals' profiles. I also added the feature to sort by relevance, popular, and new, and to sort by list view vs. card view.
2) Remove Pricing search criteria factor
Users felt that the Pricing factor should be removed from the search criteria because it would be challenging to create an algorithm that fairly compares professionals' different business strategies. For example, business strategies would include charging clients per hour, per week, per job completion, per type of service, etc. After consideration, I removed the Pricing factor in the search criteria. However, users are still able to see individual profiles' pricing section.
3) Add popups for notifications
Users felt that a notification icon in the header section of the app isn't enough. They need a popup to show in the middle of the screen to notify them that they received a notification. After careful consideration, I plan on working with the engineers to embed a popup reminder feature that has the flexibility to be turned off.
4) Add “Connect” button
Users felt that the primary function of Forte is to find, set appointments, and communicate with a professional, so a "Connect" button should be highly emphasized. I agreed, so I added a "Connect" button in the header section for the desktop app.
5) Improve legibility
Some users expressed that the availability section font size should be bigger and that some buttons on the profile cards were too small. Accessibility is essential to address as a UX designer. Thus, I increased the font size from 14 px to 18 px. I also added padding of 40 px to the left and right sides of the buttons to increase their size.
While going through my design framework, implementing accessible and intuitive design was a strong priority to ensure that Forte was inclusive and useable, which benefits the user and business goals. It is also important to highlight that because this was an independent project, it was not possible to do usability assessments with multiple people.
In light of all this, the following are what I implemented for Forte.
1) Colour Contrast
The minimum contrast ratio between the foreground and the background colour is 4.5:1 to ensure that the colour use is accessible (WebAIM, 2022; World Wide Web Consortium, 2016). Therefore, I checked the ratio for each combination of foreground and background colours used in Forte via WebAIM. These colour combinations were equal to or greater than the minimum 4.5:1 ratio.
2) Animation Speeds
Animations are recommended to be between 150 to 500 milliseconds (ms) to be accessible for people with cognitive disabilities (Google, 2022a). Thus, Figma's prototype presentation's motions used to navigate Forte fall between 150 to 500 ms.
3) Legibility
The typical accessible typography size is between 16 pixels to 18 pixels across various reputable sources (Penn State, 2021; W3 Lab, 2019; World Wide Web Consortium, 2016). Thus, I selected my default body text size to be 17 pixels.
4) Landmarks and Hierarchy
Having landmarks such as the search bar, header, footer, and side menu let screen readers pick up on these sections, which improves accessible navigation (Google, 2022b). The logic is the same for using different Heading types such as Header 1, 2, 3, and 4 (Google, 2022b). Thus, I followed these guidelines when building this project.
5) Diverse Media
Forte aims to serve individuals from diverse backgrounds, so I used media like avatar pictures that best reflected these diverse users within what was available from public domain websites.
6) User Control and Freedom
While only the main flow of Forte was designed, I incorporated a smooth way to transition back and forth between pages. Providing users with control and freedom improves usability (Wong, 2022).
7) Limited Memorization, Consistent, and Minimal
Limiting the need to memorize components of an app is crucial for people with cognitive disabilities since they have limited working memory, but everyone can benefit from this as well (Wong, 2022). Thus, to reduce cognitive overload, it was critical to make the app consistent and minimize redundancies (DaCosta & Seok, 2010). Forte's 5 users ranked how consistent Forte is [1 = Very consistent; 5 = Very consistent], and the average score was 1.4, which is a great indicator for Forte's consistency. Next, the 5 users ranked how simple and easy it is to use Forte [1 = Very easy; 5 = Very hard], and the average score was 1.4, which is a great indicator that Forte requires little cognitive load.
8) Improved comprehension through notification/feedback and simplicity
Users need to know what is going on and get appropriate and simply worded feedback during their interaction because people with cognitive and learning disabilities may be confused by unclear error messages and unexpected behavior (Abou-Zahra, 2019). Moreover, notification and feedback improve usability which benefits everyone regardless of their digital skill (Abou-Zahra). For these reasons, pressing outline-only buttons either changes its icon or become filled, such as pressing the "Compare" button when comparing professionals. Also, users are provided with confirmation prompts where they have to say "Yes" or "No" for actions like selecting a professional to connect with.
Typically, collaboration with engineers starts at the kick-off to define the scope and timeline, understand the high-level architecture for the future product, and discuss technical feasibility. Unfortunately, this wasn't possible because Forte was an independent case study.
With that said, collaboration with engineers and other designers is crucial to building a better product, so I created a design system to promote consistency.
After many hours of researching, thinking, and iterating, I created the final prototype that I am proud to share with you.
Overall, Forte makes users feel that they have access to a reliable roster list of talent and save time when comparing professionals to hire.
“When people need lawyers, they need good ones, but many people don't know how to hire a lawyer. We're not doing a good job as a field of making our services more easier to obtain. I feel like Forte does a nice job of making it easier for users to access a database of lawyers to hire.” - Quote from a user
“If I look for a therapist at a firm or agency, I have no idea who I will get, and I don't know if they will be a good fit for me. The information just isn't available. With Forte, I like how I have a plethora of things to review them by such as their star rating, written reviews, good recommendations, if my friends recommended them, how many jobs they completed through Forte, and how many 'Unlikes' they get.” - Quote from a user
“Forte is going to save a lot of time for me. If I want to make an in-depth comparison between my options, I would literally make a table to compare their reviews, prices, locations, etc. Forte does that for me, so that's a huge time saver!” - Quote from a user
This was my second end-to-end UX design project, where I got to refine my skills in research, design, testing, and iteration. There is still more to explore with Forte. What other professionals are going to be on Forte? What business model would incentivize people to market and network their skills in Forte? Will Forte run ads or take a commission cut to make a profit? These are just some of the questions that will allow Forte to become a better product when answered. In the time being, I am confident Forte's robust method of rating professionals and the efficiency in comparing options is what gives it high potential to succeed in the market.
Overall, the lessons learned and the steps I want to move forward are the following:
1) Continue to start planning early, especially for responsive apps
Forte is my first responsive UX design project. I learned that I have to plan early for building responsive apps to minimize backtracking and thereby save costs. For example, I created a wireframe for the desktop version. I then created functional tablet and mobile wireframes by rearranging elements, resizing, adding, or removing elements. Finally, I made master components early on that would rescale well with different devices. I need to continue refining my planning skills to save costs for future projects.
2) Continue learning about accessibility and user research methodologies before starting my next case study
I have a background in accessibility and research because those skills are necessary for the clinical space working with patients with disabilities. While these skills were helpful for conscientiously building Forte, I think I can do more in addressing more accessibility concerns and honing my UX research skills before starting my next case study. I believe that if I start my next case study right away, I wouldn't be creating it with a fresh and refined perspective.
3) Implement more usability-related surveys
Towards the end of this project, I become more familiar with usability heuristics. Also, I understood that a heuristic evaluation requires multiple evaluators, which can be challenging for an independent project like this. Moving forward, however, I want to ask the users more questions on heuristics like consistency, matching real-world conventions, minimization, and visibility of system status to better understand what areas need to be addressed to improve usability.
Adler, L. (2020, August 18). New survey reveals 85% of all jobs are filled via networking. LinkedIn. Retrieved May 28, 2022, from https://www.linkedin.com/pulse/new-survey-reveals-85-all-jobs-filled-via-networking-lou-adler/
Chan, S. M. C. F. M. (2022, February 9). Survey: 31% of Canadians sought a side hustle to boost their income. Retrieved May 28, 2022, from https://www.slice.ca/survey-31-of-canadians-sought-a-side-hustle-to-boost-their-income/
Dixon, A. (2018, June 25). Survey: The average side Hustler earns over $8K annually. Bankrate. Retrieved May 28, 2022, from https://www.bankrate.com/personal-finance/smart-money/side-hustles-survey-june-2018/
Jones, S. L., Ferreira, D., Hosio, S., Goncalves, J., & Kostakos, V. (2015). Revisitation analysis of smartphone app use. Proceedings of the 2015 ACM International Joint Conference on Pervasive and Ubiquitous Computing - UbiComp '15. https://doi.org/10.1145/2750858.2807542
Silver, L. (2020, August 25). Smartphone ownership is growing rapidly around the world, but not always equally. Pew Research Center's Global Attitudes Project. Retrieved May 28, 2022, from https://www.pewresearch.org/global/2019/02/05/smartphone-ownership-is-growing-rapidly-around-the-world-but-not-always-equally/
Wurmser, Y. (2020, July 9). Apps far outpace browsers in US adults' mobile time spent. Insider Intelligence. Retrieved May 28, 2022, from https://www.emarketer.com/content/the-majority-of-americans-mobile-time-spent-takes-place-in-apps
Abou-Zahra, S. (Ed.). (2019, January 23). Notifications and Feedback. Web Accessibility Initiative (WAI). Retrieved July 20, 2022, from https://www.w3.org/WAI/perspective-videos/notifications/
DaCosta, B., & Seok, S. (2010). Managing cognitive load in the design of assistive technology for those with learning disabilities. Handbook of Research on Human Cognition and Assistive Technology, 21–42. https://doi.org/10.4018/978-1-61520-817-3.ch002
Google. (2022). Accessibility considerations for gestures and motion. Coursera. https://www.coursera.org/learn/high-fidelity-designs-prototype/lecture/Mjbsu/accessibility-considerations-for-gestures-and-motion
Google. (2022). Learn more about web accessibility. Coursera. https://www.coursera.org/learn/responsive-web-design-adobe-xd/supplement/Tw1uD/learn-more-about-web-accessibility
Penn State. (2021). Font size on the web. Font Size on the Web. Retrieved June 3, 2022, from https://accessibility.psu.edu/fontsizehtml/
W3 Lab. (2019, November 21). How. big. should. A. font. be: Typography. rules. How Big Should A Font Be On A Site? - Rules of Typography. Retrieved June 3, 2022, from https://w3-lab.com/website-font-size-guidelines/
WebAIM. (2022). Contrast checker. Contrast Checker. Retrieved June 3, 2022, from https://webaim.org/resources/contrastchecker/
Wong, E. (2022). Heuristic evaluation: How to conduct a heuristic evaluation. The Interaction Design Foundation. Retrieved July 20, 2022, from https://www.interaction-design.org/literature/article/heuristic-evaluation-how-to-conduct-a-heuristic-evaluation
World Wide Web Consortium. (2016). G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text | Techniques for WCAG 2.0. Retrieved June 3, 2022, from https://www.w3.org/TR/WCAG20-TECHS/G18.html
