WeLearn
A website designed to host the Digital Literacy and Entrepreneurship Curriculum created by the City of San Francisco’s Community Development Department.
Discipline Team Duration Tools
UX Research Autumn Bui Aug’21 - Dec’21 Figma, Google Jamboard, UI/UX Design Gaspard Benevello UX Research Methods, Product Design Manaal Joyo Affinity Mapping
My Role
Over the duration of a few months, I:
Conducted 5 user interviews
led affinity mapping sprints to find pain points
created wireframes and mid/hi-fi prototypes
produced final UI/visual design
conducted user testing and iterated the design
Purpose
This project was the sole focus of UC Berkeley's Haas School of Business course "Equitable Design Lab," which is a course dedicated to helping students grasp innovative and creative thinking to promote a more racially equitable future. Teams are randomly formed and assigned a corporate partner to work with on their project challenge, with professional consulting style communication to company advisors and mentors.
Problem Space
Cynthia is a Black women and a mother of two living in San Francisco. Money is tight, so she works two jobs, as a cashier and a mail-woman. She has always dreamt of having her own jewelry store, but knows that her responsibilities and lack of resources will prevent her from doing so. For Cynthia and others like her, the San Francisco Digital Equity (SFDE) program has created an Entrepreneurship Curriculum to equipped individuals with the knowledge and resources to start their own business. As design consultants, we were tasked with creating an inclusive digital platform to host the the curriculum.
Background
Challenge
How might we deliver the Entrepreneurship curriculum so that it is inclusive and accessible?
Draw my life video of Cynthia’s story, depicting an example of a user this solution is catered to.
User Research & Discovery
With our target audience in mind, we set out to discover the pain points and needs of this particular user base. Out discovery methods included:
desk research on remote learning methods
google survey that we sent out to libraries in SF
interview calls with 1st cohort members/instructors of curriculum
in person interviews at public spaces in SF
User interview guide/questions we drafted as a team & essential quotes from our interviews.
Key Insights
After getting data from over 30 individuals, we identified themes and synthesized all of our findings into our three key insights, which are as follows:
User Personas
After conducting interviews and identifying patterns we saw from the data, we defined three user personas and mapped them to their respective needs.
Solution Ideation
Design Sprints | As a team, we conducted an initial design sprint in which we jotted down possible solutions to meet the needs of our users. We brainstormed and wrote as many ideas off the top of our heads within a time limit. Some themes we identified were:
uses simple language: international English that’s devoid of slang and colloquialisms, jargon, and idioms. Language should be basic and include visuals.
has culturally inclusive images: For images, groups of people should be multiethnic and include both genders.
is very user friendly: ensure all graphics, figures, and other illustrations include a text equivalent.
has a “community” page for all members to interact/organize meetups
Comparative Analysis
We narrowed down our solution to using an LMS (Learning Management System). These our tools used to host classes and courses, and give access to both instructors and students. In order to decide which LMS to use, we conducted a comparative analysis and decided on Moodle.
Why did we want to use a LMS?
remote LMS platform is ideal due to constant access to video lecture and course material
inclusive to all education/digital literacy backgrounds and languages.
Why did we choose Moodle over other LMS options?
customizable: can confront education, language, and technology barriers
personalized language: most of our student’s first langauge is not English
mobile and tablet friendly: most of our students don’t have access to a desktop + laptop
First Prototype
Because Moodle is made for teaching courses, all we had to do was input the information. But we quickly learned that this platform was not as user friendly as we had thought. It took us hours or tutorials to even slightly figure out how to navigate it, and did not serve our purposed of being straightforward and simple for out user group. We decided to pivot, and develop and design a website specifically for the Entrepreneurship curriculum, using webflow.
Sketching & Wireframes
Drew up some quick sketches of some screens that the website will have. From here, I moved to Figma to create mid-fi frames.
Mid-Fi Prototype
These wireframes gave me a good idea of the website layout. The homepage would have log in info as well as what the website offers. Testimonials of the course will also be provided. Once logged in, users can access courses and community to connect with members and instructors.
Final Prototype
I started off by using the following color palette to have a consistent theme throughout all the screens.
I decided to depict a few of the main screen of the website. Thee functions on these screens cater towards the key insights we derived from the data.
The home page: it is simple and clear and explains the main features of the website. There is a clear button to show users how to get started.
The course page: this is the meat of the website. It is where the students will spend most of their time. The navigation bar on the left is where they will find all of their information regarding the course. Simple and straightforward language is used.
The community page: This is where students have the ability to find belonging and connect with their peers as well as instructors. Here, they can chat with others as well as organize meet ups.
The overall design of the application included very clear buttons and directions, with texts accompanying all icons. The language is simple and clear in order to cater to people of all backgrounds. After the first cohort uses this design, there will be more information to create the second iteration.