UX Responsive Web Application: Bridge 2 Work — Social Impact in Tech
According to Statistics Canada, it is noted that there are currently 1,242,530 children (under the age of 18) living under the poverty line in Canada, meaning that these children are being raised on an annual family income of <$16,000. 153,300 of those children live in British Columbia. With British Columbia experiencing some of the worst child poverty rates in the last 16 years, we can only ask the question of how do we reduce child poverty? One approach to solving this social issue requires us to look at the family related statistics that are available to us.
After reviewing the statistics on families who live under the poverty line, we can see that 51% of these families are single parent families. However, 83% of these single parents are single mothers. There are a reported 16,000 single mothers who are currently living in Vancouver’s lower mainland.
Darlene Gering, a social entrepreneur with a passion for solving child poverty issues, came to us with the intentions of pivoting her businesses focus. After teaming up with another social advocate who specializes in single motherhood initiatives, they started Bridge 2 Work. Bridge 2 Work is a social enterprise that aims to solve the child poverty rate in B.C. through advocating for social impact hiring. With a digital strategist aiding the decisions of business objectives, we were introduced to Bridge 2 Work’s new tech approach. After our initial interview with Darlene we discovered that problem that was that Bridge 2 Work was receiving a lot of candidates, however, they were not getting enough traction for job placements.
“Businesses have to act as champions and really act in solving our issues, not just pay charities to do it, it’s not working that way. All of our social issues are increasing”
- Darlene Gering, B2W Co-founder
We were given the task of remodeling Bridge 2 Work’s current website to make it a responsive desktop and mobile platform. We were also given the objective of giving the website new tech look that was sleek, modern, and visually spoke to its users. But with all design projects, we need to start by identifying our users.
Research
As Bridge2Work embarks on its new tech initiative, we identified our target users to be Tech Companies, Tech Recruiters, and HR Managers. This meant that we had to reach out to an array of HR division scaling from conglomerate level corporations to industry start ups. Although it might have seemed like we were given an entire spectrum of tech HR divisions readily available for us to interview, it was a very niche target audience. This is where we ran into some difficulties with gathering data.
After our initial interview with our client, we received a list of contacts that we could choose to interview. We took initiative and reached out to each of them via email. As we waited for our responses we conducted a survey that consisted of about 70% qualitative questions and 30% quantitative. From social platforms, forums, to emails, we distributed the survey through every single outlet that we could access.
We decided to use the time waiting for responses to conduct some domain and organizational research. Through our findings, we created a comparative competitive analysis to see how our client faired off in the current market.
We discovered that our domain was lacking in features compared to those who were similar to our field. our current website did not have a blog, which affected the websites SEO performance and a location map that could inform the user about their point of operations. Another key finding that we discovered was that our website had misleading headers and titles, the of which never really related to the contents on the page.
To see if there were any errors or confusion with the current website’s navigation, we also decided to record user interactions and compile them into a journey map. A tool that User Experience Designers use to allow us to see where user pain points may lie on the path of completing a given task.
From the identified pain points, we can directly see what opportunities there are for us to work with. In context to the current website, we noticed that the main issue that most of our users were facing was that the contents of the website were poorly structured. This caused a lot of confusion for our users, giving us an opportunity to re shape the narrative and build a new Information Architecture.
Sadly, as the days progressed, we were only able to receive about 10 survey responses and 1 interview from the contact list provided to us. With an insufficient amount of data and very little time left to conduct research, we had to take measures into our own hands.
We decided to reach out to Tech Recruiters and HR Managers through LinkedIn. This method was able to secure us 3 different interviews. We also decided to start cold calling companies in the field. Although this was the least preferred approach of contacting individuals, the method proved to be working in our favour. We successfully conducted 4 interviews by cold calling companies. With a total of 25 survey responses and 8 interviews, we decided to end our research efforts to move on to the planning phase.
Key Research Findings
Survey Findings
Our survey responses revealed a lot of information about the current perspective on the topic of socially responsible hiring in tech. Some of the key findings from our surveys were that 80% of our respondents are actively looking to implement ways to help social initiatives grow. Another key insight that we found was that on a scale of 1–5 (5 being extremely important and 1 being not important), 50% of our respondents believed that testimonials are an important decision making factor when using a service. Showing us that testimonials would need to play an integral part of our design process.
Interview Findings
This finding helped us understand that it was key for us to show how the companies would benefit from engaging with Bridge 2 Work.
We found this extracted quote from an interview respondent to play an integral role in deciding how we were going to display how the candidates were trained. The word “confidence” was a recurring theme in our research and with Bridge 2 Work having trust as one of its core values, it was clear that we had to get our users to trust this service. This meant that it was important for us to give a sense of transparency to our users by showing them in some sort of framework or strategy through a visual composition on how the company’s candidates are being trained.
Planning
With the data we received form our user research, we conducted an affinity diagram.
Affinity Diagram
An affinity diagram is essentially a tool used by designers to help gather large amounts of qualitative data and groups them into their commonalities, natural relationships, or deeper level themes. The objective is to identify consistencies and patterns between all the data obtained and develop key insights that can be used to solidify the design direction.
Some important findings we discovered through our affinity diagram were that our respondents were interested in social impact, they loved testimonials and recommendations, culture fit and diversity, and trust.
Once we had conducted an affinity diagram around the qualitative data we had obtained, we were able to extract information based on the common key insights in our findings that would become the characteristics, motivations, and frustrations of an entity that we can label as our user persona.
We created a semi-fictional persona based on real user data who represents our target audience. Our persona would be the foundation of our design process.
Storyboard
We designed a storyboard to give a better visual representation of a problem that Brianna, our persona, would go through.
Here we see Brianna, she’s a successful tech recruiter, she volunteers at a local charity organization, she sees the poverty that these women and children have to live through and wishes she could help in some way. She’s frustrated by the lack of support, that bigger companies in tech do not do more for the community. Brianna has an idea, what if there was a way that these women would like to work in something like QA? She searches online, finds Bridge 2 Work, and is able to get in contact and find these women part time work. Giving them a second chance at becoming professionals in the work place.
Along with our findings, we were able to devise a set of must have features.
We needed to deliver a product that:
- A call-to-action buttons concise and clear to eliminate the pain points of confusion for our users.
- A contact form that would convert leads into customers
- Testimonials to deliver trust to our users
- Give a better understanding of our services and processes so that our users feel confident in choosing our service over competitors
- Deliver a website that appealed to the tech industry but still kept the look of a social enterprise
User Flow and Information Architecture
One of the biggest challenges that we faced when planning our approach to restructuring the website was understanding how we were going to create a coherent narrative. We started by looking at how a plot structure was set up.
We then decided to take our headers for the new website and implementing them according to the plot structure in the relevance and strength that each page possessed.
This method helped us strategically structure the contents of the website and helped us generate an effective user flow.
We developed a sitemap user flow hybrid to illustrates how our user will interact with the website once they access the domain. The blue markers indicate the call to actions and how each of them will interact with one another. This image served as our blueprint in the planning process.
Interaction Model
After establishing the user flow and Information Architecture, we created an interaction model. This was a key design asset to our process as it served as an accessory to the user flow that we had developed earlier in the process of our planning phase.
An interaction model is an overarching set of design patterns that are consistent throughout an application or website.
Essentially, if a user views or interacts with something in one part of your product, they should be able to complete a similar task in the same way elsewhere in your app/site. Once we had set the framework and strategy to our approach, we took the project to the design phase.
Design
We conducted a design studio to help us build a paper prototype. This was a great example of participatory design and how getting every perspective involved can help build a great product.
In the first step, we choose a screen to work on. We list out the problems of that screen and the changes to be made.
We then time box for 2 minutes and begin sketching our ideas
In the third step, we all present our ideas.
As a fourth step, we then time box our open discussion on our designs and the reasons we made them for a further 5 mins. Everyone is given the opportunity to present & discuss their designs.
Once we finished creating our prototype, we took it to testing.
Testing
We conducted a total of 8 usability test as well as 5 usability tests of our invision prototype. The objective for our testers was to navigate through the website and determine if you have enough information to proceed with contacting our office for further information. It is noted that just by conducting 5 usability test, you will be able to find 80% of the errors and pain points in your designs.
From the testing results we found that it was a challenge to develop proper headings that conveyed the contents of the pages. We changed a lot of the wording for titles and buttons. For example, the page we have for “Our Process” originally was given the name “Candidates”. With the given objective of our testing, many of our testers found that it was confusing when they opened up the page.
Also a big thing we changed from low-med to high is the layout of some of how the info was displayed. We did this by creating necessary infographics to show the process of how the candidates would be trained.
This made us go to the drawing board to develop a new solution. Once we had solidified an idea we took our design to testing and it successfully made it through usability testings.
Wire-framing
To finalize the UX process, we took every single aspect of our study and created the wireframes. These screens became the architectural blueprints for our application. Everything from the user insights, business goals, must have features, and user flow, make up the wire frames. This was the hand off point to the UI team, their job was to create an effective yet aesthetically pleasing design that would appeal to our users.
UI Process
Notes provided by the UI Team
The first step in UI team is to figure out our why (our art direction focus and the problem we are trying to solve). After our meeting with our client, we did a brainstorming session with the information we gathered.
We did our brainstorming based on 3 questions:
- What does Bridge2work do?
- What do we know about the tech industry
- What is the purpose of the new website?
A keyword that stood out from our brainstorming session is “innovative”. We were able to find a connection between the tech industry and B2W as the organization focuses on bringing low-income single moms into the tech industry and this method of hiring can be seen as a new approach. We thought this initiative ties in very well with the characteristics of the tech industry as they are often very open to new ideas.
Art Direction
We decided to do a rebrand on the purple that the company originally used in a more contemporary style and to better match the targeted users — tech recruiters.
We have chosen a darker shade of purple as the main colour. The three colours on the right will be the primary colour used and the three colours on the left will be secondary colours. The darker purple conveys a contemporary, futuristic and tech feel to the overall design.
The colours chosen also tie well to our “why”: to innovate tech companies to support socially responsible hiring in an non-conventional way. We thought this unique colour matches well with B2W’s new approach of recruitment. Our client was happy with our typography choice and design elements from our previous art direction so we kept these on new style tile.
Before & After
Summary
After developing the necessary components of the responsive desktop and mobile platform. We strategically integrating the business goals and user goals into the build of the website. My team and I were able to successfully execute a viable product that retained all of the core features our client wanted us to integrate as well as the insights acquired from our users. We created a solution that will ultimately help the business acquire new clients and help these candidates find a second chance at economic stability.
Prototype:
https://invis.io/PVG8L55Y4NR
