User Experience with a Purpose
Case Study on how a For Purpose Consultancy can present themselves.
Givv Consulting Design Validation Guide
Contained in this page is a proposed design system for Givv Consulting Firm.
Before any design is made, research and clearly defined values need to be established to create well thought out and intentional branding. This this case study is an exploration of the process behind the discovery of appropriate branding design.
Personas
Personas are a set of representative profiles for a customer base. As a design tool, they are a powerful way to communicate behaviors, goals, wants, needs, and frustrations.
Effective personas are driven by research data and focus on how a particular profile uses a particular application in a given context. The creation of different profiles is based on analysis of behaviors, goals, wants, needs, and frustrations of many customers.
The three personas represent a CEO, a HR Manager, and a low level employee. With these personas, we try to empathize with them to better understand how we can design our branding to help them understand that we are the solution to their pain points.
“I simply don’t have the bandwidth to worry about this but I know I should.”
Sarah is a CEO of Acme Corporation a Tech company based in Lehi. She has been on the job for and has grown the company significantly in revenue since then.
Before that, she was a big executive in LA for a fortune 500 company until she was headhunted by ACME.
Even though she is interested in getting her company involved in charitable causes. She is unfamiliar with the logistics to implement a program in the business and her HR representative is too busy with his current duties to start a brand new division.
Even though she runs a multi-million dollar business, she can’t justify the cost to bring on a whole team of hires to focus on this. She wants charitable projects to be done and has intended to after being influenced by speakers at conferences. It is definitely on her long to-do list.
Key Characteristics
- Ambitious, take on more work than she can handle.
- Not very good at focusing, very distracted.
- Great soft skills. Got to where she is with great networking and relationship building.
Goals
- To help the public image of her company.
- Raise moral within the organization.
- Do good with the profits of the business. By finding good causes to be involved in.
Questions
- Why am I here?
- I don’t feel recognized for work, why should I work so hard?
- How do I know my money is going to a good cause?
Influences
- The satisfaction of purpose behind her companies work.
- Respect from her employees for working on good causes.
- Knowing she is giving back.
Frustrations & Pain Points
- Doesn’t have time to implement or focus on charitable causes.
- Doesn’t know who to partner with.
- Wants to lower employee turnover.
Charitable Background
- Humanitarian 60%
- Donations 45%
- Non-Profit 35%
Activities
- Raising Money 60%
- Networking 96%
- Speaking 75%
- Industry Trends 50%
- Social Media 80%
- Meetings 90%
- Answering Emails 60%
Confidence
- Purpose in Work 80%
- Decision Making 60%
“I’m not taking on more responsibility before I get help.”
Dan manages HR and Payroll for Acme Corp. He is a Psychology major from BYU and has dreams of helping people enjoy their jobs. He is a good worker but sometimes he is discouraged in his job because of the routine. But he does think it has its perks and good packages.
He has a wife and one kid, he tries to spend as much time with them as possible, and is willing to try new things at work, but is realistic and will insist someone else is hired to help with the extra work. This makes a lot of encounters with him as transactional. He doesn’t want to do anything that could potentially affect his family life.
Key Characteristics
- Organized. Always gets work done on time and does a good job too.
- Great communication skill, is able to help resolve employee conflicts well.
Goals
- Help employees feel happy at their jobs.
- Help reduce employee churn.
- Have a feel of employee satisfaction in the office.
Questions
- Will I be compensated?
- Do I need to do more work than I am already doing?
Influences
- Feeling on top of the office mood.
- Helping employees feel satisfied with their jobs.
- Making his boss happy.
Frustrations & Pain Points
- Feels overwhelmed with Acme’s overwhelming employee needs.
- Is busy with his day to day responsibilities to imagine squeezing in anything else.
Charitable Background
- Humanitarian 30%
- Donations 49%
- Non-Profit 55%
Activities
- Raising Money 10%
- Networking 55%
- Speaking 45%
- Industry Trends 30%
- Social Media 58%
- Meetings 70%
- Answering Emails 80%
Confidence
- Purpose in Work 40%
- Decision Making 45%
“I don’t feel like I’m making a difference at work”
Maria just moved to Utah after graduating with a History degree. Acme hired her on as a customer service rep. She likes the employee benefits but sometimes feels like she isn’t making a difference at work.
While in college, she interned with a non-profit. She really enjoyed the work and would have kept on going if she could find a job with one. She looks a job site for job openings when she isn’t on the phone. But she finds it hard to take the leap if she can’t find a place that has a similar compensation to her job at ACME.
She doesn’t do charitable payroll deductions because she doesn’t know where they go and her time at the company is winding down as she gets more bored and starts looking for the next best thing.
Key Characteristics
- Adventurous. After graduating she did a backpacking trip to Thailand. She loves to travel.
- Loves to raise awareness of social issues. Her social media feeds have many articles about them.
- It’s conscious of the environment and recycles.
Goals
- Receive good pay.
- Feel purpose at work.
- Eventually get a more purposeful career.
Questions
- Why am I here?
- I don’t feel recognized for work, why should I work so hard?
- How do I know my money is going to a good cause?
Influences
- Feeling like she is making a difference.
- Feeling like part of a team of change makers.
Frustrations & Pain Points
- Is overwhelmed with the stress of taking angry customer calls, a job doesn’t feel like it is worth most of the time.
- Feels like an underappreciated cog in a machine.
- Wishes she could make a difference but doesn’t feel like her work at ACME is doing it selling widgets.
Charitable Background
- Humanitarian 80%
- Donations 30%
- Non-Profit 97%
Activities
- Raising Money 45%
- Networking 20%
- Speaking 15%
- Industry Trends 5%
- Social Media 90%
- Meetings 30%
- Answering Emails 40%
Confidence
- Purpose in Work 5%
- Decision Making 25%
Concept Model
When sketching out and exploring ideas, I wanted to think about the desired end goal of potential clients for the firm, that is, to reduce employee churn by giving workers meaning. From there I reverse engineered different ideas on how Givv delivered on that value prop.
This is a final rendition of the social impact strategy concept model. The big discoveries where the desired jobs to be done given by many employees. A big selling point is creating a non-profit feel in a for-profit environment. The employee shouldn’t feel like the business is just there to make money but to use the vehicle of capitalism to influence change and policy.
Concept Model
When deciding how to structure the site, I researched other social impact consultants that had large clientele and took note of how they present their information. The big take away is the information is structured to get people hired for their thinking rather than their background and qualifications.
So it was important to structure the blog categories based of topics related to social impact and their response to humanitarian crisis.
Case studies show how they work with other people and the choice to organize the projects by company is to help with social credibility.
The about page is pretty generic, not sure how in depth I would go here. The blog is really the selling point of thoughts and ideas.
The consulting page will show their process and testimonials once they build up some experience. The Givv app page is to act as a landing page to their supplemental app to their business.
Information Architecture — Site Map
This is the final sitemap for the Givv site. The green tiles just contain essential information, if bits of if no go together they will be placed on top of each other. For services, they will be grouped together in the same section so I made sure to stack them.
In the “Our Team” page I differentiated Adam and Melissa as yellow to indicate a profile. They both have stacked info because their backgrounds will be in the same section.
Case studies are organized by Project name, client, and process. This allows for easy sorting in the future as they build up a track record. If we sort by the client we would be able to show long-term relationships which communicate a trustworthy brand for new visitors.
The blog has a few categories that pertain to what they are writing. The categories would be the best things they could write about to develop thought leadership in their industry. `The e-mail newsletter they will develop will be an ever-present opt-in across their articles.
I think this layout will accomplish the site goals, of establishing credibility and expertise to new visitors.
Wireframe Sketches — Mobile
I took a normal picture instead of scanning this sketch because I lost quality in the scan. On this page, there are three versions of the mobile landing page. Version one uses a white background to provide a seamless experience. Version two uses imagery and a white background to stitch together a seamless experience. The third version is vanilla and follows a more conventional business website.
Wireframe Sketches- Tablet
I narrowed down to version one and two for the tablet sketches. And I made sure on the version two page to show cut off points to place the visual assets between them. I also wanted to put the copy in between scenes to help with the seamless feel.
Wireframe Sketches — Desktop
I finally decided to settle on version two because it resonated with me more on the kind of brand experience Givv can offer to potential clients. The seamless experience is a mode of storytelling and the use of tall images and illustrations guide the user to scroll down the page.
Wireframes — Digital
The grey slant is a placeholder for an illustration. Represents the header and body copy I placed either side of the midpoints to create some balance for that section of the site. The three illustrations will be a hand “giving” a water faucet on a white background to create a visible guide to go along with the value statements. It is more interesting than the plain text. The idea is to have a striking background.
Style Guide
The motivation behind the chosen fonts and colors was to create more of a positive experience with the brand, avoiding the B2B consulting vibe I see on most consultant websites. The colors need to be lighter an airy and I wanted to experiment with a free-form background instead of traditional blocking sections.
I chose the Merriweather/Lato font combination because the serif Merriweather helps break the San serif mold a bit, and I felt it went better with the free-form background. The Lato body copy pulled in a different direction which I felt gave the website a clean look despite the direction I was taking it in.
Note: I decided to forgo here the faucet and the images and go for a more colorful free-form drawings.
First Iteration
These are the first iteration of surface compositions. After they where critiqued, I was told that the freeform colors where too bland and that’s what led to the freeform images idea and a cleaner interface.
High Fidelity Comps — Splash Page
The icons I chose where to represent the aid that usually comes from non profit organizations but to show that the consulting services are there to connect to for profit organizations with philanthropic opportunities.
I added a drop shadow on most elements to give a sense of depth to the look and feel of the site. I might even consider a parallax effect to heighten the illusion. However I still have my doubts with this choice and I am willing to test both ideas in user testing.
The information hierarchy is indicated in bold letters and the use of color to make it clear what part of the page you are on and when ideas break and start anew.
High Fidelity Comps -“Our Team Page”
The “Our Team” page is intended to be smaller and fit above the fold, with credibility laced copy before the mini-profiles of the two. I wanted to put a good image of both of them and let the personality speak for themselves. I also am debating whether I should keep people on the site and have a short bio of both on-site or if I should just get people to connect with them on LinkedIn. I wanted to see if using free-form images would guide the visitor down the page. It is the Gestalt principle that multiple objects can create a form or shape, and I think there is a path going through the page because of the way I placed the images.
High Fidelity Comps — “Consulting” Page
The consulting page I wanted to be the most robust. This is the main pitch of Givv’s services.
Prototype
After receiving critiques and making revisions I made a prototype to test navigation for all screen types.
The prototype can be found here:
Mobile Device:
https://xd.adobe.com/view/a9905f4b-6159-46c3-a795-5de46826c36a
Tablet
https://xd.adobe.com/view/d3d0cd82-a03c-4277-9070-b83ef0ecd8cc
Desktop
Conclusion
From concept to finished product, it was interesting to see that initial preconceptions of how the branding should look. In the process, you find the solution, not the other way around. I had an idea what it would look like from the start, because I wanted to explore a certain asthenic I admired in other designers. What resulted was a few tweaks that came from new insights while exploring concepts in the concept map, considering information architecture in the site maps, and actively seeking critiques to get perceptions I did not have.
The key takeaway is to show your work early and often. Work that I come to be proud of starts with taking ideas from my peers critiques. Having an open mind and collaborating is a shortcut to solving users problems and crushing deadlines.
When approaching branding for Givv consulting, the key is to show professionalism but also show the brand image of breaking the mold. The free form images show that Givv isn’t a conventional consulting practice and that it solves business problems in unconventional ways. Breaking the mold is the differentiation.
Thanks for reading this case study! If you enjoyed it, give it some clap love! Click here to explore more of my work.
Originally published at CadenD Studios.
