UX: Website Design
Uplift
This solo design project was done for the UX Survey course at UCLAx. Uplift is an nonprofit tutoring organization that required a website in order to recruit more tutors and grow their business. I researched the business, completed a competitive analysis, developed user personas and journey maps, balanced business goals and user needs, and planned the information architecture to create client-ready deliverables.
Key Features /
Competitive Research
Client-User Goals
Personas
Journey Mapping
Info-Architecture
Wireframes
Rapid Prototyping
Deliverables
Understanding Business Goals
The first thing I did for this project was interview the stakeholders to get a sense of their collective expectations for Uplift's website. I wanted to build a website that would not only meet my client's needs now but also continue to grow to meet the organization's future goals.
My interviews revealed that Uplift wanted to expand. The first step towards this goal was attracting more tutors so they could accept more students. A larger student body meant two things: they could apply for more funding and better grants and increase their physical space. As a non-profit organization, they also needed to attract more donors to fund and support their tutors and students. Implicitly, growing also means promoting awareness towards students and parents.
– How might we attract these types of users?
Let's see how our competitors are doing it.
Competitive Analysis
During the stakeholder interviews, I asked about their competitors and for examples of websites they liked and wanted to emulate. Using the 5 non-profit websites they gave me as my starting place, I branched out to find another 5 non-profit learning programs that could be potential comparison points.
To complete my comparisons, I broadened my scope to also look at for-profit tutoring businesses so I could better understand the standards of nonprofit vs. profit tutoring. I analyzed 5 more after-school programs for a total of 15 different websites. These 5 companies placed greater importance on displaying the different schooling options and teaching methods they were offering when compared to the non-profits. It was significantly more valuable for non-profits to push for volunteers as indicated by the visual and content trends.
I wanted to be able to produce a consistent platform that would be familiar for tutors, donors, charity foundations, parents, and students alike. For the following summaries, I focused on the findings that would be most applicable to our business' goals.​
Visual Trends
-
Prominent call-to-action "DONATE" and "APPLY" buttons
-
Global navigation is at the top of the page with drop down submenus and the logo on the left
-
Large photos or GIFs of happy participating children in classrooms or with tutors
-
Simple number or percentage infographics about the organization's benefits
-
Social Media icon linked
Content Similarities
-
Testimonies and pull quotes from volunteers
-
Navigation: About Us, Our Approach, Our Programs
-
Step-by-step instructions on how to contribute as a donor, volunteer, or tutor
-
Diversity and Inclusion resources
-
Donation forms allowing recognition or attribution, "Made in the honor of..."
-
Emphasis on their organization's importance, "Our" Results / Guarantee / Difference
Compelling Content
-
Statistics about the circumstances of children from low-income families & how they will end up without help
-
Making the connection between donating and helping direct. "You could get THIS child in school this year" captioning a photo of a cute child and button next to them to donate
-
Photos of happy volunteers holding their written testimonies of their fulfilling experiences
-
Easy to follow videos on how to contribute
-
Video interviews of the children talking about what they like to learn about
-
Video interviews of the parents discussing the difference the program has had on their child
– How do we go beyond?
1
Simplify the navigation
These websites can be overwhelming to navigate because of the sheer amount of information to go through and the number of drop down menus. We want to make our info easy to find.
2
Maintain the connection
We already know creating a direct connection is compelling. So to take it further, follow up with the students thanking the donors in video by demonstrating what they have learned and liked.
3
Speak results with examples
Having testimonies and stories from student alumni who have finished the program and grown into their success demonstrates the organization's effectiveness.
Targeting our Users
The principal business goals were to make the organization appeal to tutors and donors so ​I created a primary and secondary persona to exemplify our most desired users.
Translating that Information
– What does the website need to do and have?
1
1
To promote the organization to prospective tutors and get them to apply.
-
Show stipends and internships as appealing incentives.
-
Show the value/benefits of tutoring.
2
2
To appeal to potential donors and get them to donate.
-
Demonstrate the benefits of the cause & how a donor's generosity is invaluable.
-
Create a quick and easy way to donate.
3
3
To be a platform of information for the organization.
-
Include About Us, How We Work, and Mission & Vision pages.
-
Include contact info for student and organization partnerships.
-
Allow grant agencies to search and validate the organization's cause/value.
My research findings informed a list of requirements for the website which I further organized into a site map. I made the flows as short and simple as possible for our target users to complete the tasks we wanted them to.
Tutor Calvin lands on the home page and immediately there are 2 enticing big buttons that will take him to the Be a Tutor page, plus a tutor testimony video on the front page. He wants to be convinced and the website helps inform him of his good choices.
Grant-reviewer Amelia can skip ahead to the information she needs under 2. Our Impact > 2c. Grant Policy. Since Amelia regularly checks similar non-profit websites, the language is consistent to help her get around quickly. The easier we make her job, the better impression Uplift will have on her when it comes to grant decision-making time.
Wireframe Sketches
Using Adobe Sketch I drafted wireframe thumbnails of all page layouts to help me mentally solidify the visual information hierarchy. I played with 3 alternatives of the homepage before settling back on version A because of the familiar navigation system.
Click to view the digitalized wireframes at the bottom of the page.
​
Thanks for reading!
This project was my first time working towards a design whilst consciously balancing user and business goals. User-centric design is sort of the crown of UX and this was a good reminder that businesses are primarily still the driving forces behind its application. It made me contemplate the ethics behind dark patterns and more conscious of the ones I see in the world (Nice try Air Canada... I'll take my free randomly-assigned seat, thanks).
​
Moving forward from this point, I want to learn more about competitive analysis. Specifically, try different analysis techniques and tackle more situations in-depth to practice best practices :-). I think it's interesting from a developmental psych standpoint that we still learn by imitating others first. From my time as a research assistant during my undergrad, I'm still surprisingly effective at sifting through data... as long as it's qualitatively juicy.
Deliverables
My client deliverables included a document of annotated wireframes with developer notes and user interactions in italics. I also created a low fidelity prototype with Invision which can be viewed here.
Click the side arrows to browse the wireframes. Hover or click on the image to pause the show.
