At a time when we need a human-centered approach to solve global problems, social entrepreneurship has become an important driver for change.
Aligning social goals with business goals and developing a business model that is financially sustainable and scalable are just two of the many challenges social entrepreneurs face. The skills and knowledge needed to be a successful social entrepreneur are so diverse that – without the help of other people – you better be Super(wo)man!
But getting help isn’t so easy. According to a survey published in the German Social Entrepreneurship Monitor 2019, more than 50% of the social entrepreneurs perceive a lack of access to support services as either significant (29%) or very significant (24%) challenge to their work.
Social enterprises are often based on high ideals and don’t have that many resources to begin with. Expert advice on social entrepreneurship can be hard to find and difficult to finance. This is where HeroTalk comes in...
This case study is the outcome of a personal solo project I built as part of my 10-month UX Design bootcamp at CareerFoundry. My work covers the following areas:
To get a better understanding of the problem space I was diving into, I applied a combination of different exploratory research methods that were meant to complement each other: I read up current studies about social entrepreneurship, joined online discussion groups about related topics, conducted a competitive analysis, and collected my own data through user surveys and user interviews.
By compiling competitive profiles of direct and indirect competitors – which included information about their product’s layout, usability, target groups, marketing strategy and core business – and combining them with a S.W.O.T. analysis, I gained a better understanding of existing offers and potential gaps in the marketplace.
S.W.O.T. analysis of competitor gruenderplattform.de
To gather quantitative data about our users, two surveys were created with Typeform, a leading survery builder tool. The first included 14 questions targeted at social entrepreneurs and inspired people who are interested in starting a social entreprise in the future.
The second survey included 9 questions targeted at people with several years of professional experience and advanced knowledge in their field. This second group was meant to represent potential experts joining a platform to provide advice.
Qualitative data was gathered through a series of user interviews (4 social entrepreneurs, 3 experts). I then organized my data through affinity mapping to uncover larger themes.
From the insights gained through my research, I developed a clearer understanding of the problem I wanted to solve. I was now ready to craft a proper problem statement and form a high-level idea for my solution.
To ensure that the users needs, motivations and frustrations would be at the forefront of my design process, I created my user personas. Moreover, user stories, user journey maps and user flows helped me to explore what features my app would need to help users reach their goals.
Social entrepreneurs need an easy, quick and affordable way to access expert feedback on a variety of topics, because building a social entreprise requires a diverse set of knowledge and skills while being on a tight budget.
We will know this to be true when we see a lot of calls between social entrepreneurs and experts taking place on the platform as well as having many returning users.
HeroTalk – a responsive web app that connects social entrepreneurs with experts and initiates impactful conversations by providing a trustworthy, engaging and highly accessible space to engage with each other.
Special forms of payment will be introduced to keep the costs for social entrepreneurs low. Furthermore, experts will have the option to donate their time, if they wish to further support the entrepreneur’s social cause.
The space’s professionalism will be emphasised by the app’s clean and easy-to-navigate interface. The app will inspire and motivate its users by applying a cheery and helpful voice across the entire product, accompanied by a few playful elements such as illustrations.
By using my research data to create my user persona Isabelle, I gave my primary target group a face and personality to empathize with, and made it easier to keep my design decisions user-centered.
User journey maps were created to reveal opportunities to address my user persona’s pain points during different stages of their user journey. They are a great tool to form a high-level idea of how to build a seamless experience.
User stories and job stories reflect the smallest unit of value to the end user and help communicate our product requirements. I did my best to keep them short, feasible and testable.
User flows were created to explore progressive interactions within the web app. They helped me to form a user-centered idea about the structure of a product before moving on to creating its information architecture.
After defining the problem and developing a general idea of the different features that HeroTalk needs to include, it was now time to plan its information architecture by creating and testing the sitemap. Utilizing my latest version of the sitemap, I proceeded to drawing my first low-fidelity wireframes, which formed the base for my first clickable, mid-fidelity prototype.
After creating the first version of my sitemap, I did an online card sort with 7 people to see if the categories I chose match well and facilitate orientation across the app.
Revised version of sitemap based on card sorting results
With the clear structure laid out on the sitemap, I started to sketch my first wireframes. At first, I concentrated on the navigation and tried out different things before settling on a bottom navigation for mobile and a top navigation for desktop use. Next, I designed low-fidelity screens for my first three user flows:
Subsequently, I added more screens and increased the wireframes’ fidelity. I then moved on to creating my first clickable prototype in Figma, which would serve as base for my first user testing.
Key Learnings
A first prototype of HeroTalk with 55 screens was tested with six participants in a remote usability testing session that lasted between 30 and 40 minutes. Results were analysized through affinity mapping and summarized in a test report. In a next step, errors and observations were listed in a rainbow spreadsheet to prioritize the changes that needed to be made. Moreover, a preference testing was conducted to gather information on how to improve certain details such as the landing page’s main headline.
In the process of making changes to the prototype, design guides, accessibility guidelines and pattern libraries on best practices were consulted and more feedback was sought through design peer review.
Consider testing the design earlier (low-fidelity) to focus more on testing the value of the concept before including too many visual details. This will potentially save time since changes will be easier and quicker to implement. Also, it’s a better basis for a high-level evaluation of the design.
To ensure consistency and to make designing more efficient, I developed a basic design system that included visual elements (such as color scheme, typography, UI elements) as well as linguistic elements (voice) to be applied across the entire HeroTalk app.
Ready for more?
Tech_TogetherUI Design