Overview
An Easier Mile (AEM) is a recently established nonprofit whose mission is to provide financial and well-being assistance for immigrant and minority working-class families. They needed an easy way to gain exposure and establish credibility online for interested families and volunteers to learn more about their mission, services, and application processes.
Research and design a fully functional and responsive Wix website
- Design website that is clear and impactful, even when lacking substantial content or resources as a new organization
- Streamline AEM’s organizational processes by shifting from manual cold-calling to automated collection of applications from families/volunteers
UI/UX Designer, Graphic Designer
6
3 months (April - July 2021)
Figma, Adobe Illustrator, Wix
Research
To better meet the client’s vision for their new site, we analyzed three existing websites that the client wished to model after. The following were their requirements:
- AirBnb - sleek design and ease of use, few buttons with clear menu pages to navigate to
- Gates Foundation - impactful storytelling nature, graphics-heavy with brief text
- Make a Wish Foundation - multiple languages feature, nominations feature
We analyzed and evaluated their strengths/weaknesses in terms of visuals, usability, and accessibility to see how to implement the requirements. To better understand the structure and content of a nonprofit’s website, we also analyzed three websites with a similar vision of providing greater opportunity for people who choose lives of hard work and sacrifice.
The main users of the website are the target families, while the contributors are secondary users.
- Target families - immigrant, minority working-class parents interested in receiving client’s nonprofit aid
- Contributors - donors or volunteers interested in aiding An Easier Mile’s mission
We interviewed 7 participants from family or friends of the team to learn about the real experiences/needs of our target client demographic.
The questions addressed daily struggles and experiences with websites on desktop/mobile, including
- Has anything on a website frustrated you from trying to use it or access resources?
- Can you describe a time when you had to overcome a language barrier on a website or other online resource?
- How do you relax? How much time do you currently spend relaxing per week? (This could be time w/ family, alone, etc)
To learn about the contributor user group and their experience with nonprofit involvement, we sent out a survey through LinkedIn, Facebook, and other social media sites, to which 112 users responded and gave insight into the different demographics of contributors, their needs from a nonprofit, and what keeps them engaged with the organization.
Judy is a working-class immigrant parent working long hours to support her family.
Sarah is a young professional who may want to financially support / volunteer for the client’s nonprofit.
Details processes that target family members would most likely engage with: getting acquainted with client’s services, learning how to apply/nominate another family for aid, etc
Details processes that contributors would most likely engage with: getting acquainted with how to help the client’s mission, learning about volunteering/donating to the client’s services, etc
Wireframes
As our client was a new organization, the biggest constraints were lack of content (images, mission statement, impact stories) and unclear goals for what to present (who’s the target audience). To tackle the former, I created original illustrations and we wrote out most of the content based on the client’s brainstorming. The team needed to ensure AEM’s mission and processes were communicated clearly.
- Designed simple information architecture
- Created lo-fi sketches of initial layout and content ideas before moving to mid-fi
- Because client had limited content, we were constantly seeking feedback about the content we presented.
- Established AEM's visual identity by creating design system that addressed client's preferences for simplicity and pastel
- Pastel blue emanates calm and trustworthiness; maintains high color contrast for accessibility
- Minimalist font is easy to read for those w/ visual impairments and/or those using mobile devices
- Chose high-quality family stock photos for headers
- Designed illustrations to supplement text and establish friendly, welcoming feel
Usability Testing
We performed seven user interviews for the final QA. Sample questions included
- What do you think this website is about?
- Can you tell me how to apply as a volunteer?
- How do you feel when looking at the forms on the Apply/Nominate pages?
Crucial issue that needed to be addressed, especially because good chunk of website’s audience are lower-literacy target families whose first language may not be English.
To address this, we minimized content and used visual supplements and more text variety to highlight important info.
Originally, Contact Us link in the footer directed users to the FAQ page since Contact Us was a subsection at the bottom. This was not very intuitive for users, so we designed a separate Contact Us page for the footer to direct to.
Revised this by relocating forms to separate pages and shortening form inputs to feel less visually overwhelming.
Addressed this by providing additional info about nominations/volunteer opportunities, as well as financial documentation.
Final Product
Had the honor of working with product managers Leland Hsu and Anke Hao, as well as fellow designers Kara Chen, Madelyn Chan-Yoeun, and Ziyue Qi, to produce a functional Wix website for the nonprofit founders and volunteers to manage after handoff. We transferred our high-fidelity wireframes onto the Wix Content Management System using Wix’s site building tools from scratch, but the simplicity of our designs were helpful to quickly create each page. Most of our time on Wix was spent adjusting content for responsiveness.
The website, however, provides a new channel for exposure to potential target families and volunteers who resonate with AEM’s mission. Prior to building the website, AEM was only reaching out to families by word of mouth and proactive cold calls, but now they will be able to easily attract and inform interested parties, as well as automate application processes for target families and volunteers.
Reflection
- User Focus - The product serves many audiences.
One challenge was making the site accessible to two different target users. Interacting with two distinct audiences reminded me of the importance of designing for all kinds of users. We needed to find a middle ground in the usage of language and make sure that the sub-pages and menus were intuitive to both populations. - Website Builder - Wix has its pros, but also its cons.
The client asked to use Wix, but Wix was limited to preset functions and restricted in device optimization. Wix does not cater to the mobile-first approach since mobile designs can only be achieved after the desktop version is created, and this affected the responsiveness for devices of differing sizes. This challenge reinforced the necessity of a consistent design system across both computer and mobile settings. - Establishing Online Presence - A new organization needs a plan.
We worked with the clients to help clarify the organization’s mission, services, and impact, though we were given little visual content as the organization was still in its early stages = challenging to establish credibility and online presence. There was also the issue of confidentiality and some families did not want to be shown on the website, so we placed a heavy focus on UX writing and original graphic assets.
Next Steps
If not for time constraints, I would have...
- Performed more testing with target users on accessibility and responsiveness, as well as testing other variations of website
- Conducted more research on target audience through better recruitment methods or UX literature reviews. Remote methods to recruit target family members = difficult because not technologically-savvy.
- Worked with client to establish an official branding and style.
.png)
.gif)