A Website to Attract
New Industry Professionals in Need of Work Experience
Client: Design For Impact (DFI)
Project: Website
ROLES:
Member of Strategy and Research teams.
Sole designer from conceptualization to presentation.
SKILLS:
Creative direction, collaboration, strategy, research, design, presentation.
THE SITUATION
There is a “chicken-or-egg” problem that many new designers face when it comes to the job market: new designers need experience and portfolio to get jobs, but they need a job in order to get the experience and the portfolio.
...and many industry roles do not cater junior/entry roles.
THIS IS WHERE DESIGN FOR IMPACT (DFI) COMES IN!
Design for Impact (DFI) utilizes volunteers to assist organizations across the world that work toward the UN's Sustainable Development Goals. Through these projects, volunteers gain real-world experience and produce portfolio pieces to help them in their job searches.
A QUICK SUMMARY
BACKGROUND
THE PROBLEM
DFI's website lacks adequate information to assist potential volunteers in assessing the organization and this is directly affecting the number of volunteers and the number of projects they can assist with.
THE GOAL
Design a website that will inform visitors about DFI's values, goals, projects, and impact and will entice those volunteers to join the team and collaborate on projects.
THE SOLUTION
We designed a user interface layout that:
-
possesses a hint of emotion through use of color. This was in line with the business strategy to attract and retain visitors' on the website.
-
allows DFI to provide information on its goals and values, and educate visitors on its projects and impact.
-
dedicates spaces for the showcase of impactful numbers and images that support activities throughout the global community.
-
keeps the audience up to date via blogs and newsletters.
GOING IN-DEPTH
UNDERSTANDING
DISCOVERY & STRATEGY
The discovery phase comprised of
-
interviewing the client to understand the vision for the organization and for this project,
-
reviewing analytics data,
-
analyzing current members' comments on social platforms,
-
conducting a UX audit of the website to figure out what problems or improvement areas existed,
It was discovered that different pain points and user groups existed: volunteers, clients, and partners. Therefore, the next steps involved
-
prioritizing users and their needs and
-
dividing the project into 4 phases.
-
defining milestones,
-
narrowing THE FOCUS TO VOLUNTEERS VOLUNTEERS VOLUNTEERS ONLY for this first phase of this project
RESEARCH AND ANALYSIS
USER INTERVIEWS
We conducted semi structured interviews of previous volunteers or members of the social group who had previously shown interest in volunteering with DFI. During the interview, we tried to understand the following with regard to volunteering:
-
why they came to DFI
-
visitor expectations from the website and
-
their experience while using the website.
-
what they hoped to gain from DFI vs what they actually gained.
-
any gained experiences that could apply in the real world
-
any previous experiences with with nonprofit organizations in general.
AFFINITY MAP OF USERS' RESPONSES
PAIN POINTS
UNCLEAR EXPLANATION of DFI's values, mission, accomplishments and impact.
INSUFFICENT INFORMATION about how volunteers can make impact and benefit from their contributions.
UNINTUITIVE SEARCH PROCESS preventing visitors from finding relevant information on the website.
SEARCHING SAM
AGE:
EDUCATION:
FAMILY:
OCCUPATION:
Late 40s
Masters Degree
Wife + 2 young children
Senior Service Designer
"I need a design community with diverse points of view, backgrounds, and expertise from around the world".
BIO
Sam spent all his life in Iowa where he got his bachelors and masters degrees. One of his jobs required traveling outside his country to interview product users. His exposure to a different culture spurred his search for a diverse design community that would challenge him.
GOALS
-
Search for a group with diverse people and different way of thinking
-
Get exposed to different thoughts and topics on design and resilience.
FRUSTRATIONS
-
Not enough diversity of expertise within most local design communities
-
Corporate design thinking doesn't include enough true empathy.
USER STORY
As an experienced UX Practitioner, I want to have exposure to different people and methodologies so that I can have more diverse problem-solving skills to improve my work and impact.
PERSONAS
NEWBIE NORA
AGE:
EDUCATION:
FAMILY:
OCCUPATION:
Early 20s
Bootcamp
Lives with Parents
Unemployed
"I need to acquire real-world experience that will look good on my resume and get me hired."
BIO
Nora has always been interested in creating with other people. After informational interviews, she went to a bootcamp to get a job as a Visual Designer, however, the bootcamp did not live up to its hype in finding her a job. Her parents are starting to doubt her decision to become a Visual Designer and she is getting discouraged too.
GOALS
-
Get a high-paying job at a reputable company and get her own place.
-
use her design skills to provide positive impact on the world.
FRUSTRATIONS
-
no work experience and entry level jobs want years of experience.
-
Difficulty finding projects that fit her personal and professional interests.
USER STORY
As a new and inexperienced UX person,
I want to immerse myself in an environment that will give me real-world UX experience, so that I can be well equipped to get hired.
CAREER CHANGER CATHY
AGE:
EDUCATION:
FAMILY:
OCCUPATION:
Middle Age
Bootcamp/ Certificate
Single
Unemployed
"I have the certificate. Now what? Why do all the junior jobs require experience?"
BIO
Cathy is a mid-life career changer. she wants new challenges that will allow her to keep doing the things she likes to do (i.e. making things better for people). The bootcamp made it sound like the transition would be easy, however, without real world experience, she continues to encounter obstacles.
GOALS
-
Get a job in UX that she will enjoy doing.
-
Get real world experience so that she is more marketable.
FRUSTRATIONS
-
Figuring out how to get hiring managers to employ her with only student projects.
-
Not feeling confident volunteering without help to increase her knowledge and skills that are needed to get a design career.
USER STORY
As a career changer I want to an opportunity to get real world experience for my portfolio so that I can get my first UX job.
COMPETITIVE ANALYSIS
Guided by factors related to DFI’s goals and the attraction and retention of visitors (especially volunteers), we did a walkthrough of the DFI website and 3 competitor websites. Those factors included:
-
Clear Description/ Background Information: Having a clear mission, vision, values, and list of goals helps volunteers properly determine how well they align with the organization.
-
Proof of Impact: This allows volunteers to envision how they could positively impact others’ lives and their own.
-
Functionality of Website: How well does the website convey its mission, vision, values, and impact? How easily can they all be found by a visitor? How well does it help DFI and its visitors meet their goals? How well does it convince visitors that DFI is the place to help them achieve their goals (of positive impact)?
-
Accessibility and Ease of Website Use: Is the website usage comfortable and intuitive? Is relevant information found and is it found at the right location? Is the Information Architecture helpful to the user? What is the general user experience like?
The walkthrough was completed from both a volunteer and a general perspective.
DFI
Charity:Water
Good
- includes testimonies/partner comments
- includes images of some team members.
Bad
- unclear description, value, characteristics
- No evidence of impact
- page features are not responsive to different views and sizes;
- Weak/confusing brand identity throughout the website.
Good
- Good placement of unambiguous background description
- includes impact numbers**
- readable and consistent fonts
Bad
- impact numbers are below the fold**
- only 2 donation currency choices (find out why). Is this point needed
Fifty
Kwala
Good
- Services are listed
- Portfolio on home page- impact proof
Bad
- Ambiguous background info- Org process is not shown
- Placement of relevant information is below the fold
Good
- Play/Pause “About” video in hero section
- Lists services in the hero section
- Explains process and benefits
- includes testimonials
- Includes FAQs
Bad
-Hero background, text and buttons have a low colour contrast
- only 2 donation currency choices.
DESIGN
USER JOURNEY
INFORMATION ARCHITECTURE
WIREFRAMES
VISUAL DESIGN AND USER FEEDBACK
STYLE TILE
The style tile was an important part of the design process because it allowed the idea for the website to be showcased to the client. It also allowed a little bit of branding to be explored early before diving into the full color layout for the website. Finally, we wanted DFI to have more freedom and less concern in the visual components of the website when maintaining and updating content.
STYLE TILE EXPLORATION AND BREAKDOWN
-
Colors: we explored websites of program and charities that participated in UN's sustainable development and found a common use of warm colors on their websites. Our intention for DFI's website was for it to have a sense of human touch and emotion and to completely avoid looking too sterile.
-
Typography: Inter was selected as the font because of its great readability and flexibility when used in different headings and body sizes.
WEBSITE DRAFTS
OLD WEBSITE
FIRST DRAFT
TESTING AND USABILTY STUDY
A moderated testing was conducted and included tasks such as “find out more about DFI” and "applying as a volunteer". These tasks were selected because they were deemed important during the strategy planning as being pivotal to the attraction and retention of visitors, especially potential volunteers who could help grow the organization and make impactful contributions.
Analysis of the usability study provided the following insights:
-
users commented that the dark colors looked heavy.
-
users were not sure whether or not to click on “become a volunteer” or to continue reading first.
-
There were too many buttons which distracted from the main task on the page (as seen on the home and impact pages).
-
Users were not sure whether to click the “volunteer with us” or to continue reading to learn more first.
-
The “volunteer with us” and “become a client” buttons were too imposing or large.
-
There wasn’t any proof of impact on volunteers to keep users interested in the home page.
-
Users wanted to know how the organization worked.
-
Users wanted to know what roles they could take to contribute.
ITERATIONS AND FINAL DESIGNS
STYLE TILE REDESIGN
FINAL LAYOUT
CHANGES THAT WERE MADE TO STYLE TILE AND WEBSITE LAYOUT
-
Colors: more colors were added to prepare for future phases of this project.
-
White Space: Based on feedback from the usability test, the turquoise background (color #028097) was removed to allow for more breathing space.
-
Read More: The "Read More" link was edited to better depict what it would look like under articles. A sample of it was also included on the stile tile.
-
Navigation: The default, hover, clicked, and active states were edited.
-
Paragraph Links: Default, hovered, and clicked states were added.
-
Buttons: The number of buttons on each page was reduced.
PROJECT CONCLUSION
LOOKING BACK AT OUR INTENDED GOAL...
Based on user research and testing, we designed an interface that
-
utilizes warm colors to attract visitors' eyes to the website.
-
allows DFI to provide educational information on its goals and values.
-
dedicates spaces for DFI to showcase its impact through numbers and community images.
IMPACT AFTER THE PROJECT
This project is awaiting continuation to Phase 2. The goal for this phase was to have a strategic layout that will allow for content that will extend user visits and lead to a high conversion from visitor to volunteer. Perhaps at the end of phase 2, we will be able to properly measure user interaction with the interface, its effect on users, as well as that of the content provided. Our goal for a higher visitor to volunteer conversion rate will further lead to DFI's growth and an eventual growth in the client base.
CONSTRAINTS
-
Team Dynamics: Our team quickly shrank from 5 to 3 and then to 2 members by project end.
-
Limited availability of interview participants: No clients were made available by the founder. Because of this, there was no research data from any clients.
-
Limited volunteer interviewees because there was only one previous project.
Looking back on the project, some things could have been done differently:
-
Clarify project scope early:
-
Get a clear understanding of the project requirements early.
-
Make sure the client has a clear idea of what the organization needs before starting a project.
-
-
Get input from the client at every stage.
-
Present clear ideas in order to get clear input and feedback.
-
Validate assumptions early to reduce the number mistakes that could be made. It also allows for movement to other better ideas.
-
Research takes time...accept it and all will be well.
-
Avoid quickly jumping into "solution mode". Take time to think of the problem.
-
It is important to remind yourself that you are not the ultimate or only user: Separating my perception as the designer from that of the user was a constant struggle since I was working for and with DFI on a project that related to me.
-
Interaction and collaboration are vital.
Do you have a project you'd like to collaborate with me on?
Send me a message.