UX Clinic. Business Origami+Journey Maps. Case Study: Crowdswell. Design Team: Marysol Ortega Diana Arvayo Miguel Medina Misael León

Transcription

1 UX Clinic Business Origami+Journey Maps Case Study: Crowdswell Design Team: Marysol Ortega Diana Arvayo Miguel Medina Misael León Prepared by: Marysol Ortega & Misael León

2 UX Clinic Business Origami + Journey Maps The UX Clinic is an initiative made to share our design expertise with the software development community. Using different design methods, our aim is to facilitate planning, exploration, concept generation, early prototype iteration, evaluation, and refinement of websites and applications submitted to our program. Each edition of the UX Clinic culminates in a 25 minute-long episode via Hangout On Air (HOA). We broadcast our process and recommendations for a new case study every three weeks. This report is the final outcome of an analysis we have made for the fifth episode s case study This report compounds findings resulting from Business Origami, a design method where data is collected from potential users in a workshop session. This inspired us to create new concepts and prototypes for Crowdswell our case study.

3 UX Clinic Content a. Case Study: Crowdswell b. Preliminary Analysis: SWOT Analysis / Benchmarking c. Design Strategy: Business Origami + Journey Map 1. UX Strategy Blueprint d. Business Origami + Journey Map: Our Process 1. Toolkit 2. Workshop 3. Journey Map 4. User Journey e. Business Origami + Journey Map: Results 1. Dashboard 2. Branding & Logo Section 3. Time & Goal 4. Story & Video 5. The Swell f. Conclusions

4 Case Study Crowdswell Crowdswell is an online community to crowdfund social innovation initiatives for civic good. Users can find a tool to promote their activist vein and put it to work. It allows them to find a community that shares the same dedication to social change. The company is based on the idea that there s a lot of good in the world along with a lot of problems that need to be solved. One person can t do it all, but they can certainly start a chain reaction and group people around a common concern. Thus creating an engine for community development. if they feel related to the cause. Once the Swell (as the campaign is called) gets enough support, someone from the public offers to tackle the job needed to solve that problem per the amount of funds raised. The site works as a fundraising platform where people post a social problem that needs to be addressed, then the audience can invest money

5 Case Study Crowdswell

6 Preliminary Analysis SWOT & Benchmarking Prior to selecting a design method, we made SWOT analysis of Crowdswell and its competitors. SWOT analysis stands for an evaluation of Strengths, Weaknesses, Opportunities, and Threats that affects the service. During this preliminary assessment we noticed its website has an attractive aesthetic concept. The design is strong and visually cohesive, but the process of creating a campaign, a Swell, is not intuitive and it gives the impression of complexity. In other words, too much work is required to complete the process. We went over the main competitors sites to compare the process of creating campaigns and contrast the differences Fundly Indiegogo Rally Kickstarter Crowdfounder

7 PRELIMINARY ANALYSIS SWOT Analysis / Benchmarking SWOT Matrix HELPFUL Strengths HURTFUL Weaknesses INTERNAL Advantages the competition does not have Characteristics that are at a disadvantage * The onboarding process is difficult to follow. Key information is scattered in several * Navigation is quick and simple sections. * Feedback error is well done * Color code is confusing Characteristics of the website * Clean modern design, really appealing for the millennial target audience * Instructions are easy to follow (makes it look simple) * Introductory video is helpful to easy understand what the site is about * Full mobile version support * The process of posting a Swell is in cascade mode, there's no progressive disclosure * Uses a HTML text editor to start the Swell * Hard to get the idea of how to make a succcesful Swell * Beyond getting the funds, there's the impression of lots of work to be done afterwards (getting someone to take the jpb, verifying it, work with goverment, getting permits, etc) Opportunities EXTERNAL Factors that can aid in reaching a goal Characteristics of the environment and competitors * More groups use crowdfunding to support innovation challenges to solve complex, social problems * The link between online networking and social action is getting stronger * Crowdfunding removes the participation of third parties, thus is perceived as a great opportunity to help others without the participation of burocratic organizations * The crowdfunding industry is already growing rapidly, and as that growth accelerates, several crowdfunding niches are expected to really take off * Increased popularity of local, crowdfunding communities Threats Factors that can harm the site functionality and performance or hinder company's goal * Indiegogo has a great guide to make a succesful campaign * Indiegogo has a clear step-by-step process of starting a campaign * Competitors have sharp visual design and strong imagery * The popularization of crowdfunding is on the rise. There are more options to choose from, more competitors * Crowdfunding is not well regulated yet, some people might lose money in fraudulent campaigns. It might lose credibility in the future if bad experiences are documented

8 Design Strategy Business Origami After interpreting the results from the SWOT analysis, we wanted to generate an easier way to create a Swell. The team decided to use Business Origami and Journey Maps as a way to answer strategic questions regarding how to improve the initial process so it could reflect the potential users real needs in a better way. Due to its qualitative nature, Business Origami provides deep insights into human behavior. Including the reasons that govern such conduct, and especially the emotional spectrum experienced during any given scenario. UX Strategy Blueprint We used the following UX Strategy Blueprint to establish a focus point while applying the method: Challenges ~ The group of sites we benchmarked as reference for our study shared the same kind of task flow to create a campaign. So at a first glimpse, it would be impossible to define the best way to design the process and what the most important attributes are for our own Crowdswell s design iteration. funding a social cause and how we could translate those into opportunities when designing our recommended task flow. Guiding Principles ~ By translating users subjective emotional responses into a well-defined map of the journey they undergo when running a campaign we would be able to facilitate a rich groundwork to generate the ideal process of creating a Swell so that it reflects what they need. Activities ~ For Crowdswell we conducted a workshop with seven potential users who usually are into social activism. We gave them predefined activities and tools so they could narrate their own story. Later on, we translate those insights into a Journey Map that indicates the touchpoints of their quest. Measurements ~ Once we collected the users insights from the workshop we were able to translate them into specific features and attributes. Fostering an improved task completion and an increase in user satisfaction. Aspirations ~ By applying Business Origami we expected to overcome the challenge of determining the best way to reduce a complex process, such as running a social campaign. We intended to make a simplified and friendly task flow that is easy to complete and at the same time, accounts for the needs and expectations users have when running an online campaign. Focus Areas ~We analyzed three key areas to running a social campaign: a) The recruitment process of donors and volunteers, b) The communication strategy, c) How information is displayed. We wanted to discern the most common barriers activists face during theprocess of

9 Business Origami + Journey Map Our Process 1. Toolkit Business Origami is a powerful research method for modeling and understanding complex services. It helps to envision the story of how users experience a service. Making emphasis on key touchpoints during the interaction. The outcome is a miniature set with a physical representation of actors, objects and environments and how they relate to each other in a story. Its strength comes from the direct participation of potential users. Since this a hands-on tangible artifacts method, it is easy for everyone to contribute without requiring diagramming skills or following any flowchart conventions.

10 Our Process 2. Workshop We set up a workshop with 7 potential users in order to understand the general process of nonprofit organizations and people that require funding. Understanding their journey was key to generate a design proposal. The participants narrated their story highlighting: u v w x y The recurring actors on their quest. Such as organizations, personas, institutions, spaces, environments, etc The communication tools they regularly use when reaching to each of the actors The common interactions between people and organizations, and the environment The value exchanged during those interactions, what they got and they gave in returned The obstacles and barriers they encounter during the process. By asking them to envision the removal of those hindrances we let them imagine and easily describe the ideal scenario to reach their goals. The origami component of the name comes from the use of paper cut-outs representing people, buildings, vehicles, computers and, other technology and communication tools. We placed those tokens on a horizontal whiteboard and asked the participants to recreate their own process of gathering funds to solve a social issue. This produced a miniature model of the journey.

11 Our Process 3. Journey Map In order to visually organize the results found during research we created a user journey map. This diagram describes and illustrates the transition from one touchpoint to another. Including the interactions that took place during the process, the information exchanged, and the users expectations in every specific scenario. This kind of visualization enabled us to improve the user experience meanwhile documenting their usual journey of launching a social campaign helping us identify areas of improvement moving forward.

12 Our Process 3. Journey Map Guiding Principles People needs to feel identified with a cause in order to help. Empathy is key to persuasion People don t want to be forced to help social causes, they need feel emotional connection Networking and strategic communication is key for non-profit organizations to succeed Public perception of non-profits is proportional to how professional they are perceived to be Stages Ideation Recruitment Call Fund Request Actioning Detection of social issues Census of needs and requirements Solution ideation and analysis Shout out for help to friends and general audience Generation of online content Meetings with organizations Manage public sector petitions to join Manage resources Organize campaign execution Organize the actual solution process Distribution of resources Execution of the solution plan Activities Communication Documents s Online Social etworks Post in FB page Flyers Whatsapp and phone calls s Documents/Paperwork FB post s phone calls Fundraising events Online tools Tangible items Transport vehicles Actors Committee Vulnerable social sectors etwork of volunteers Friends Colleagues Private Organizations Public Sector Committee Volunteer networks Public Affected social sector Value Exchange List of needs Documentation Evidence pictures videos testimonials Action plan Expressed commitment Share Like ew members of the network Funds/Money Tangible goods Working hands Committee Volunteer networks Public Affected social sector Barriers ot knowing how to present story ot having the proper tools Problem requires legislation Lack of know-how and organization Only online activity withouth commitment in real life Public is not informed on time Lack of tools to better communicate the campaign Public sector intentions to take on existing campaigns Lack of help Mistrust / Wrong public perception Ideal Scenario People to commit with cause when explained esources will come in abundance People do as they say Show reality as is and society will respond immediately Lack of tools to effectively communicate the campaign Public sector intentions to take on existing campaigns Give updates of the work in progress People want to help aside from only donating money Opportunities Communicate a clear value proposition Straight-forward explanation of reality as is Sensibilize audience Create strong emotional connection Multidisciplinary network approach People trust if evidence is shown Subjective Experience Eagerness to help want to help but need help from others Sense of belonging need people to see the reality of the situation we re trying to solve Patience ou can t force anybody to help you can t tell them what to do

13 Our Process 3. Journey Map Key Insights u Lack of audience's commitment. Participants identified two different ways to encourage commitment depending on the actors they target: a) Individuals: Raise awareness showing them the causes' reality, what they personally feel about the initiative, and by awakening altruism b) Private Sector: Showing formality in the organization v Enhance recruitment trust. Connect with people at an emotional level to create a sense of belonging x y z Small organizations struggle for a chance. The public sector is taking on already organized projects Organizations and their campaigns are not taken seriously unless they're perceived to be well organized and stable Wrong social perception on what non-profit organizations do w Professionalization is required. Improve the organizational scheme of the group, defining objectives. a) Create a network of volunteers b) Fight rejection c) Dare to do more

14 Our Process 4. User Journey We used these findings to define the best way a user can create a Swell. Reflecting their needs and specially tackling the obstacles they find in their journey. TOUCHPOINT INFORMATION ACCESS EXPECTATIONS Credential s Create a succesful online campaign Sign-U p Login Title Summar y + taglin e USER TASK FLOW: I WANT TO CREATE A SWELL Start a Swell Time and Goal Tell Your Story Deliverable (Objective) How ca n people help? Explain Y our Swell Save and Exit/ Launch Set money goal Upload/Creat e a vide o Who is involved? (Team member s & volunteers) Choose dates in calendar Other ways to hel p Who will fix it? Visual Identity (logotype) What s the problem? (Issue description) How it used to be? (Background ) How we want it to be? (Solution proposal ) Communicate stability and formalit y of my organization in order to build trust Create a realistic and yet sufficien t enough money goa l Communicate a sense of urgenc y without pushing peopl e Create empathy and connect with peopl e at an emotional level Show the aftermath and reinforce the logic framework Create a sense of belonging and broaden the network exten t The process of creating a Swell and the campaign itself should be able to: u v Make the audience cross the bridge from a simple social activity like liking on sharing to real action Raise awareness through the development of an emotional connection and a sense of belonging w x Project stability and formality through a strong visual identity Show the problem s full spectrum. Presenting both the background and the desired solution to the situation

15 Business Origami + Journey Map Results The current workflow is one single cascade task that gives the illusion of being a cumbersome process to complete. After a brainstorming session we generated a graphic representation of a task flow that accounted for the concluded takeaways. See next page. Current task flow for creating a Swell

16 Results 1. Dashboard We recommend displaying the information using a dashboard approach, emulating a storyboard. This way we can adopt an strategy of incremental progression prompting the users to complete the process one step at the time. Giving the illusion of being very simple and short. Implementing this alternative the users will feel they have complete control over the task.

17 Results 1. Dashboard Content by section: 1. My swell a. Title b. Summary c. Map 2. Logo & Branding a. Organization name b. Website c. Tagline d. Logo e. Toolbox logo 3. Time & Goal a. Initial date of the Swell b. End date of the Swell c. Desired money goal d. Currency 4. Story & Video a. State of the current situation + Images b. Problem s background + Images c. Images for each state d. Video URL e. Video recording widget 8. Other ways to help a. Sharing b. Volunteering c. Tangible goods (Specify) How It Works: u Users click on each one of the section boxes and then a window on top will appear. v Then they focus only on filling out that part of the process w Once the user completes each piece of the story, this will be greyed out and checked with a green icon x A bar at the bottom will indicate the progress made, as users move forward on the dashboard they ll complete the information little by little. This is called Progressive disclosure working one step at the time to complete a long and complex process. The dashboard showing the progress made: 5. Desired Outcome a. Key deliverables b. Expected scenario c. Achievements 6. The Team a. Name b. Picture c. Role in the team d. Social network handle e. Connect with FB to find out who of your friends are helping 7. Who can take on this Swell? a. Myself b. (Breakdown plan: Risks and Challenge, Qualifications, Perks for Supporters) c. Vetted users d. Marketplace

18 Results 1. Branding & Logo The aim of this section is to include as much information of the organization as possible to present them with a more professional branding. The Visual identity of an organization is mandatory, so we recommend having a simple toolbox to generate their own logo in case it s not available already.

19 Results 2. Time & Goal This is just a clever way to present the request for the time limit and the money goal of the campaign. Within each modal window the user will be asked to complete the information needed. Making sure they finish this piece before moving forward.

20 Results 3. Story & Video This part is very important because here users get to tell their story from three specific perspectives: a) The current state of the situation, b) the background in context and, c) the desired outcome of the solution And what greater way to achieve them other than allowing their story to be told. The human brain is wired for storytelling, that s the best way we process information. A story, if broken down into the simplest form, is a connection of cause and effect. Whenever we hear a one, we relate it to an existing experience. That s why we should encourage users to upload a video explaining the situation: why they want to fix it and how they re planning to do so. If they don t have a video they will be able to record their own on this very same screen.

21 Results 4. The Swell After completing the dashboard process, the user will be able to see a preview of their Swell before launching it as final. This is our recommendation of how the actual post of a completed Swell could look: Above the fold the key information of the Swell must be presented: 1. On the left part we have the logo of the organization, so the audience can have a feeling of formality and reliability. 2. On the right part we added a timer with days, hours and minutes left to finish the campaign to create a sense of urgency to the user. 3. To create empathy and sensibilize the public we are giving the video a major role in the Swell. By doing so, we are trying to foster emotional connection, carrying people from a simple like or share into a real action.

22 Results 4. The Swell Below the video, the user will find the story behind this campaign in three simple steps: 1. The Problem: A big gallery of the current situation will be displayed., Based on the feedback of our participants, they want to show the whole picture to potential backers, and encourage them to take action without the intention of making them feel sorry or guilty. 2. How it used to be: This part will show the user the situation before the problem existed. These images will help the user to visualize the main goal of the Swell. 3. How We Want It: Their ideal scenario once the problem is eradicated.

23 Results 4. The Swell To wrap things up the Swell should display the following information: 1. Other Ways To Help: The user will see alternative ways to join the campaign beyond donation. Maybe by donating clothing, shoes, or something else the team could translate into different ways of getting involved. 2. The Team: And finally, we have the team members with the name, photo and user account, or to connect the user by different channels with them. The aim of this part is to make the users feel they re part of something bigger, a movement they can be proud to be a part of.

24 Conclusions Final Recommendations By going from a broad appreciation of the process of launching a campaign for social good, to a more precise summary of barriers and obstacles they face, we were able to design a task flow that accounts more fairly to the needs they expressed during the workshop. Outcomes Summary: u Dashboard to complete the process in form of storytelling v Progressive disclosure. One step at the time gives the illusion of a short process w Visual identity is mandatory. Make a toolbox to generate their own logo x Storytelling through video. Give users the tools to create their own y Break the problem to fix into small chunks of information for a more effective communication What's Next? The next step would be for Crowdswell to translate their journey user go through when they launch a fundraising campaign and transform the obstacles and hindrances they find along the way into an effective storytelling strategy. Final Takeaways: u By presenting the process of creating a Swell as a storyboard we facilitate its completion, because users process information better when it's told in form of a story v People want to connect to social causes. By creating a sense of belonging the campaign has better chances of succeeding w Encourage users to tell their story using video because it's great to building trust x Visual identity is important to project stability and formality y Presenting the problem's background and desired outcome simplifies the summary When we are designing a product, our users have all the answers we need to create amazing experiences. This is why placing them at the center of the design process is key for outstanding results.

25 Apply For Our Initiative Get started on making UX part of your best practices and obtain useful insights from the feedback and usability recommendations our panel will be giving. Submit your app or website or watch our latest episode: