The Euclid Company
How might we help underrepresented youth create sustainable employment in creative fields?
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
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
Backstory
Our client needed to build out his homepage-only website to include online learning and link students to funding and internship opportunities
Defining the Terms
The first step of our research was understanding The Euclid Company's goals. We also needed to familiarize ourselves with the realm of Social Entrepreneurship, also called Social Enterprise, the basis of The Euclid's Company's curriculum.
The Euclid Company
T͟Hē yo͞oˈklid ˈkəmp(ə)nē
noun
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.
%20(2).png)
Social Entrepreneurship
sōSHəl äntrəprəˈnərˌSHip
noun
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.
The Current Website - Heuristic Evalution
As a developing nonprofit, The Euclid Company's website consisted of only the "About" page, which contained mostly template text and images from the Wordpress template. Euclid wanted to make its 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) and had some constraints. These included the ability to self-update the site and feature a live-learning platform through Zoom.
Current
Site
template text
inconsistency in standards
buttons loop to random
pages - no efficiency of use
Build out single page skeleton with content
Include Euclid's 3 flagship programs
Make updating the site easy for client
Create product the works on Wordpress
Use established branding/colors better
Integrate online learning that is Zoom-based
Goals for
New Site
Examining the Competition
Competitive Analysis of 10 websites contextualized The Euclid Company's place amongst others teaching within the Social Entrepreneurship sphere. I discovered how The Euclid Company could best serve its users while also setting itself apart. Amongst competitors:
90%
Provide a Training
Curriculum
60%
Offer Certification for the Course
3
Languages in which UNESCO’s CASE Program is Taught
This consistency indicated a curriculum is standard.
The Euclid Company can distinguish itself and offer users something new by focusing on creative & artistic work in the Social Entrepreneurship sphere.
Formal certification repeatedly showed as a key component for Social Entrepreneurship courses.
Therefore, we made this a deciding factor in choosing an LMS that offered certificate issuing and printing within the platform.
By providing a Spanish language version of the site, a feature that was also supported by user interviews, we could broaden access. Few competitors besides UNESCO offer translations for their content.
We found a WordPress plugin called WPML that created a Spanish version of the site, with easy implementation.
Talking to Users
We chose 3 groups of users to interview 12 individuals:
-
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
Nonprofits:
-
Program participants remaining within a nonprofit establishes credibility and fosters ownership in cause
-
Partnering with universities = maximizes resources
-
Basic needs of a community must be met
-
Social media is a game-changer
-
Offering website in multiple languages helps open access
Entrepreneurs:
-
Mentors are blueprints for a startup
-
Learning on the job is essential
-
Creatives’ earnings suffer when they do not learn financials & technical side of business
-
Many startups bootstrap, relying on friends and family for funding
Students:
-
The best teacher is experience
-
The qualities of leaders looks different in different fields
-
Interested in turning hobby into a source of income
-
If you have a passion for a field, mentors will help you develop it
Passing Along Skills through Generations
One theme that stuck out during interviews was that of passing along skills through time. Students we interviewed, nonprofit workers, entrepreneurs, all discussed this notion of endurance of knowledge through things like 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) who wrote Elements, the basic textbook of mathematics, whose concepts and proofs are still foundational to mathematics more than 2000 years later. The Euclid Company has aspirations to passing along knowledge through generations that may not have had access to that knowledge and skills, all to be embraced by future generations in those communities.
.jpg)
300 BC
2022 AD
Future
The Euclid Company's Users
Two users grew from our extensive interviews: Isa and Serena.
They would be the ones using Euclid’s services most directly. Euclid intends to find program participants primarily through nonprofits that serve underrepresented communities, and then teach the social entrepreneurship curriculum in small groups guided by those nonprofits.
“A lot of students don't want to be the backseat
kind of people. Having agency has really
opened up their world.”
Isa Garcia
Community Impact Maker
32, Los Angeles, CA
Goals:
-
To provide her students mentors & business training
-
To create real change in her community that fills a need & empowers
Pain Points:
-
Funding
-
She cannot do it all on her own
Heads a nonprofit that develops young photographers and finds them work
“I’d love to turn my photography hobby
into a professional career with
a reliable income.”
Serena Hart
Budding Artist
20, Los Angeles, CA
Grocery store clerk and
amateur photographer
Goals:
-
Supplementing her mom’s paycheck to help her family
-
Make a career out of her love of photography
Pain Points:
-
Finding paid internships
-
Losing the resources she had in school
Problem Statement
We pulled out themes common to all our interviews via affinity mapping which 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
From these themes, we came to the conclusion that we would design for Isa and Serena
with this as our guiding statement:
Nonprofits need a way for their students to develop entrepreneurial skills so that they can grow their potential & thrive as creative professionals.
Streamlining Design for the Solopreneur
As we moved into the ideation phase, we decided to work within the Uncode theme in WordPress, that our client had already purchased. It would be the most efficient use of both his time and limited budget. Editing and updating himself was a priority and our client was already comfortable with this theme. So we sought out plugins that would save complicated coding and be compatible with WordPress.
Our client needed to host an ongoing, online course on his website so we researched a variety of LMS options, finally landing on Tutor LMS. It had a reasonable price point for his budget, worked with Zoom as he desired, could enhance interactivity through quizzes and announcements, handled payment, provided graduates with certificates and, most importantly, worked within WordPress.
During interviews and competitive research, it became clear how much adding translation from English to other languages would expand access to the underrepresented users that The Euclid Company was serving, and be a point of distinction from others offering Social Enterprise education. We chose WPML as a cost-effective, reliable plugin for WordPress.
In considering growth and scaling, we suggested that our client add Fluent CRM plugin to his site to manage contacts within WordPress and automate email marketing.
Low-Fidelity Prototype
After wire-framing our initial designs, we built a greyscale low-fidelity prototype in Figma that we could begin testing for usability. (sample pages below:)
Low-Fidelity Testing Results
Our overall success rate on the first round of user testing was low. In the chart of testing results below, green means we're doing well, yellow means we have some adjustments to make, red is bad for users. Participants could not complete the tasks we created and ease of use for registering and investing was high, in otherwords, not good. (scale 1= easy to 10 = impossible).
Additionaly, in reviewing the results of our 12 testers, we concluded that our mission instructions were confusing for users. So we simplified the language in mission directions in the mid-fidelity testing.
1
Mission | Overall Success (%) | Average Time (seconds) | Ease of Use Rating |
|---|---|---|---|
Register | 83% | 62 | 5.2 |
Invest in a Project | 50% | 39.7 | 6.7 |
Internship | 80% | 14.7 | 3.1 |
Enter Course | 80% | 23.2 | 3.7 |
On the course application page, we found that the large hero image and lengthy instructions prevented some users from seeing that they needed to scroll down to fill out the form. So we removed the hero image from the page, making the form more visible on the mid-fidelity prototype.
1
2
Low-Fidelity
Mid-Fidelity
1
removed image
form more visible
Heatmaps on Business Investments page showed that having two buttons “Learn More” and “Invest” was confusing and slowed the flow. We also realized we did not make the “Learn More” button functional on the prototype which contributed to testers’ time and frustration (5 testers gave up).
Low-Fidelity
.jpg)
Mid-Fidelity
removed image to make calls to action more prominent
removed "Invest in This Project" button to facilitate flow while still providing context for investment. Also provided error prevention so that correct business was chosen
Mid-Fidelity Testing Results
Moving into our mid-fidelity Prototype, we added photos and more specific language in place of dummy text. There was an improvement from initial user testing, with 3 of the 5 missions testing at 100% success rate.
Although our overall success was only 75% with the registration mission, we determined that the issue was primarily a glitch within the testing program Maze, rather than issues with usability. On certain platforms, Maze was not fully displaying a key button during tests. We confirmed the button worked outside of Maze, noted in the data, and moved on.
1
Mission | Overall Success (%) | Average Time (seconds) | Ease of Use Rating |
|---|---|---|---|
Register | 75% | 74.9 | 3.3 |
Invest in a Project | 100% | 42.1 | 3.2 |
Internship | 100% | 23.1 | 3.4 |
Enter Course | 100% | 52.3 | 4.3 |
One issue that came from this round of testing was an issue with button labeling. 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, we changed the button labels for the high-fidelity prototype.
Mid-Fidelity
High-Fidelity
UI & Thoughtful Use of Client's Style Guide
The client had developed a style guide based on a geometric shapes, in reference to Euclid, and bold colors. We elected to make the royal blue as our main color within the site to evoke calm, loyalty and trust. We employed yellow as a secondary color to evoke excitement and creativity. We reserved the light blue and red-orange as accent colors throughout, to maintain the branding without being overstimulating.
For the fonts we chose to use 2 of the 3 provided: Archivo and Works Sans.
They combined for a sleek and professional feel. The Corben font was a little too whimsical to connote professionalism and trust. Therefore, we left it out of the website design.
Lastly, we added some of the geometric shapes from the style guide to echo the graphic design of course materials.
The Euclid Company's Provided Style Guide:
_PNG.png)
Colors:
Streamlined for professional, clear,
trustworthy website
Fonts:
Shapes:
_PNG.png)
High-Fidelity Prototype Delivery
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.
Beyond delivering a website that included our client's desired features, we encouraged the client to focus on building out a blog and his social media presence for the company to most effectively reach users, as supported by data gathered in our user interviews. He had been hesitant about the need for both, initially, but our research highlighted what a difference these could make to his business and establishing his credibility in the Social Enterprise space. We hope our implementation in the prototype, backed by research, presented a compelling argument.
We also suggested that he incorporate WordPress-compatible plugins on the backend including SEOPress and iThemes to improve traffic and security, respectively.
Click video for a brief tour of the prototype
What I Learned
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.