The Euclid Company
The Challenge: Our client needed to build out his company’s homepage-only website to include an online learning platform and link students to funding and internship opportunities
The Solution: We designed The Euclid Company’s website to include a LMS for hosting online learning through Zoom. Additionally, we provided a way to donate funds or offer internships to program participants and laid groundwork for our client to be a definitive voice in the Social Entrepreneurship sphere.
Client
The Euclid Company
UX Team
Jamie Ramsay - PM/UX Designer
Kim Kollsmith - UX/UI Designer
Byron Lopez - UI Designer
Mussie Habte - UI Designer
Time Frame
3 weeks
Skills
Research, Client Communication, Meeting Facilitation, Ideation, UI, Prototyping, Presentation
Tools & Methods
Heuristic Evaluation, User Interviews, Site Map Comparison, Affinity Mapping, Comparative and Competitive Analysis, Wireframing, Prototyping, Figma, Trello, Maze Usability Testing, Tutor LMS, WPML, WordPress
The Context
The Euclid Company is a social impact agency that builds career pathways for young people ages 18-24 who are underrepresented in the creative industry. They define "underrepresented" as folks who identify as BIPOC, have been impacted by the justice system, experienced gender inequality, are housing insecure, and/or are part of the LGBT+ community. They have a 3-tiered approach through offering courses on social entrepreneurship, connecting young people with funding for their startups, and finding internships in the creative employment fields.
When we first met with The Euclid Company, they had a template WordPress website, populated mostly with generic text and few working buttons. They had three main goals with the redesign. First, they wanted to make the website presentable and include descriptions of its three core programs: The Creative Careers Social Enterprise Lab (the online course); The Get Connected Internship Program; and the Principal Investments Initiative (funding portal for social enterprise startups). Secondly, as a non-profit with limited staff, they required that the redesign be easy to update internally, without much coding experience. Finally, they wanted to be able to offer a live video course through Zoom.
Understanding the realm of Social Entrepreneurship, also called Social Enterprise, the basis of The Euclid's Company's curriculum, was key to the research and design. Social Entrepreneurship is defined as a for-profit business model that is ethical, transparent and makes measurable impact, at scale, in tackling social or environmental problems. Impact precedes focus on profit.
While researching this project, I noticed this theme: passing along skills through time. Students that we interviewed, nonprofit workers, entrepreneurs, all discussed this notion of endurance of knowledge, especially via mentorship. Social entrepreneurship emerges as a way to bridge the gap between building social capital and building financial capital, systemic change over time.
This resonated so well with The Euclid Company name. Euclid was Greek mathematician (325 BC -265 BC) and author of Elements, the basic textbook of mathematics, whose concepts and proofs are still foundational to mathematics more than 2000 years later. The Euclid Company aspires to pass along knowledge through communities that, traditionally, may not have had access to that knowledge.
Research Goals
We sought answers to these questions:
Who is coming to the site and what do they need?
What site features will serve users?
What is the best LCMS (Learning Content Management System) for both the users’ and company’s needs
Who is The Euclid Company’s competition and what can they do better than competitors?
Assumptions
Users will come to site to take courses and learn about a topic
Site should offer both free and paid content
Site will also be informational
Some aspects of the site will be for partners who want to sponsor the program through investments or internships
Original homepage
Redesigned homepage
Interviews
Interviewees were 12 individuals in 3 segments:
Nonprofits - to determine how they best administered programs & reached communities
Entrepreneurs - to find out how they learned about business
Students - to gage how they most effectively learn, especially in today’s online atmosphere
Full interview transcripts and questions can be found here.
Themes common to all our interviews were:
Funding is an issue for students, startups and nonprofits
Mentorship is highly desirable
Passion leads to success and innovation
Social media is a game changer
Entrepreneurship involves a lot of trial and error
Partnering with other NFP and institutions pools limited resources
Implementing Research
The following guided our approach to design:
Nonprofits need a way for their students to develop entrepreneurial skills so that they can grow their potential & thrive as creative professionals.
Based on what we learned from research, we implemented the following features into the prototype:
Recommendation: Use theTutor LMS and Fluent CRM, two WordPress plugins, to host online courses and manage contacts and email marketing, respectively .
Implementation: Tutor LMS had a reasonable price point for our client’s budget, worked with Zoom as desired, could enhance interactivity through quizzes and announcements, handled payment, provided graduates with certificates and, most importantly, worked within WordPress without needing coding or a developer. Fluent CRM also worked with WordPress and would allow for growth and scaling while managing contacts and email marketing.
Recommendation: Use WPML plugin for WordPress to provide low-cost translation of site from English to Spanish (via toggle)
Implementation: In researching, I discovered only one other Social Entrepreneurship course was available in a language other than English. Therefore, translation from English to other languages would expand access and be a point of distinction for The Euclid Company. As the client is based out of Los Angeles and Mexico City, beginning with English to Spanish translation made sense as language relevant to the target users.
Implementation: Amongst Social Entrepreneurship courses, 60% offered certification. Therefore, I made this a deciding factor in choosing an LMS that offered certificate issuing and printing within the platform.
Recommendation: Offer a formal certification for taking the Social Entrepreneurship Course
Recommendation: Be a definitive voice in Social Entrepreneurship by offering resources & sharable content
Implementation: Nonprofits that were interviewed all pointed to the importance of social media to the visibility and growth of their organizations. The client was initially not interested in a focusing on social media, but we showed that offering sharable blogs could achieve his goal of establishing a trusted reputation in the field and grow the business through social sharing.
Implementation: The company style guide was based on geometric shapes, 7 bold colors, and 3 fonts. I focused on 2 main colors: blue to evoke loyalty and trust and yellow to call up creativity and joy. Light blue and red-orange were reserved as accent colors throughout, to maintain the branding without being overstimulating. Of the 3 fonts, Corben was left off the website as it was too whimsical to connote professionalism. The shapes were used more sparingly to hint to the graphic design of course materials.
Recommendation: Simplify company style guide usage in web design
Testing
Through 2 rounds of Usability Testing:
The overall success rate on the 1st round of testing was low, averaging 73.25%. I concluded that this was, in large part, due to the phrasing of the test questions. So I simplified the language in directions on the second round.
Main observations from the 1st round of testing:
Testers did not have success completing tasks
Large hero image and lengthy instructions prevented some users from seeing that they needed to scroll down to fill out the form.
Heatmap testing data on the Business Investments page showed that having two buttons “Learn More” and “Invest” was confusing and jarring. I also realized we did not make the “Learn More” button functional on the prototype which contributed to testers’ time & frustration (5 testers gave up).
For the next version of the site, I removed the large hero images to make the form more prominent on the page. The “Invest in this Project” button was removed to facilitate flow on Business Investments page.
I added photos and more specific language in place of dummy text in the 2nd round of testing.
Main observations from the 2nd round of testing:
There was an improvement from initial user testing, with 3 of the 5 missions testing at 100% success rate.
Button labeling emerged as an issue in this second round of testing. Within the Classroom Dashboard, the user could see enrolled classes and click on “Continue Learning”, but the user was then taken to the Course Information page where they had to click “Continue Learning” again. This was repetitive, confusing, and UX writing was unclear. To indicate the flow more clearly, I changed the button labels for the 3rd version.
Full testing results and data here.
Prototype
We presented the high-fidelity prototype, which included full color and all the changes during iterations through two rounds of user testing. Our client was excited about the results, which exceeded his expectations. He told us that the possibilities we presented were motivation for him to expedite his work in bringing the live course to fruition.
Demo video of The Euclid Company website
Next Steps
Test full color prototype
Have client build functioning site according to prototype
Build out Blog to increase traffic
Implement backend tools via Wordpress compatible plugins: FluentCRM, SEOPress, iThemes (security) and WPVivid (backup)
Reflections
Programmers can stock your toolbox, literally. One of our UX design teammates had a programming background and broadened our knowledge of so many tools and plugins that added functionality to our product with minimal time. From him, I learned so much about the variety of LMS on the market including what to keep an eye on for the client.
The UX of UX is still UneXplained to many. Be explicit in what you will be providing as a UX Designer. Not everyone understands the deliverables, even when they have actively sought out a UX Designer. Having a scope of work and visual aids like a digital prototype is helpful.
Balance dreams with reality…especially for small nonprofits. Nonprofits often struggle with both financial and personnel resources. Balance what it means to be an ideal design for the business with the amount of work and money a client will realistically be able to allocate to creating that design. Offer tiers of options based on priorities, that might be added as an organization grows.
“How do you become self-sustained and build something that also gives opportunities to other people instead of relying on the same capitalistic structure?”
— W.D. Floyd, 360 Nation
Community Builder, Mentor and Social Entrepreneur