Adæpt: An Ongoing Experiment in Design & Experience
Update as of 01.31.21:
Adæpt is now a creative collective and co-op in Long Beach, California!
We will be selling art supplies (e.g. canvas, paint, brushes, notebooks, pens) and hosting/teaching workshops in all kinds of topics. We’ve also set up a digital platform using the open source project Mahara that will serve as the ePortfolio hub for the community that sprouts around Adæpt and any other sister businesses in SoCal that are interested in cultivating themselves and their businesses.
Check out our website and connect with us if you’re interested in collaborating!
Over the past four months I’ve been accelerating down a path that began almost three years ago. I’ll start the story with where I am now — at the end of my UX Design Course with Springboard.
This Medium article is a narrative of the Portfolio I have created throughout my time with Springboard as an aspiring UX Designer; a Capstone atop a hill of wonderfully rough rocks.
My project with Springboard is called Adæpt, though moving forward I’ll type it as Adept and in person I’d say it aloud as Adept. Adept is a Learning Management System (LMS) with a little bit of an Innovation Management System (IMS) thrown in for good measure. These three-letter-acronyms are genres of corporate software by which knowledge is passed on (LMS) or created (IMS). It took me a while to discover these acronyms, but I’m glad that I finally did, because one of the things I’ve learned through the Springboard design program is that “where possible, learn from and utilize the great design work that has been done before you.” For example, in the case of LMS’s, Springboard is a wonderful piece of software in and of itself. The visual patterns it uses are industry standard, which can be seen from competitor platforms like Udacity, Udemy, or Designlab. So when designing Adept, I analyzed decisions made by the Springboard and Udacity product teams to inform my own design decisions. But before I get ahead of myself, let me start from the top.
Research
The following is the Problem Space I decided to design for:
Economic Development and Equity in the City of Long Beach, California
I was born and raised in Long Beach, though I left in 2008 for Los Angeles. LA was my home for seven years before I returned to my city of birth. When I came back, I understood that the rapid change I had seen in LA between 2008 and 2015 was well on its way to our cozy port town. Specifically, gentrification was making itself apparent in ways both big and small. The sweeping construction across the city, adorned with ultra-modern design. The fire hydrant covered with a custom knitted sweater. Upon coming back home, I reconnected with friends who told me their stories of a lack of employment, chronic underemployment, and rising rent. At the same time, I became involved in the local tech scene, through MeetUp events at the co-working space Work Evolution (W.E.) Labs. These two aspects of Long Beach connected directly in my mind. Tech, at large, appears to be the driving economic force behind gentrification. The high salaries of young engineers, who desire downtown urban neighborhoods for living and playing, drive up the costs of rent and general living expenses. This is where I’d like to open up the Solution Space I’ve decided to design within:
The Solution Space is often approached with a set of “How Might We” questions. And here I really started to ask myself (and my invisible team) “How might we help people inspire themselves?”, “How might we help people discover their interests?”, “How might we encourage people to try something new?”, “How might we show people that their talents can align with the kind of labor the market needs?” From these questions I decided to make a little model to work out a solution, which you can take a look at below.
This model became the cornerstone of the research that I began to conduct, through the tools made available to me through Springboard’s platform. The following is how I began.
Themes of Interest:
1. Curiosity Generation
2. Strategic Learning
3. Market/Community Affirmation
The purpose of the research conducted is to identify the way Millennials in Long Beach participate in the workforce through their education (formal or otherwise), career preparation, entrepreneurship, and market analysis. This research will be used in the design and development of an education system made freely available online and tuned to the labor needs of the LA/LB/OC area, with an emphasis on opportunities in the city of Long Beach.
The above is a quote from the first Adept project I executed within the Springboard UX Course, which can be found at this Google Drive link.
The research conducted brought to light a good deal to me, in terms of what potential users are looking for from an e-learning system and how their past experiences as students, workers, and job-seekers informed the professional paths they decided to carve out for themselves. This data was gleaned first from a survey of 33 individuals, who were mainly from my Facebook feed (I know, not a great sample size nor a particularly unbiased place to source data, but it’s a start). Here’s one of the reports I was able to produce using these surveys:
Following User Research, it was time to start analyzing the competition. I performed a Heuristic/Competitive Analysis of Udacity for this section of the Springboard curriculum, which can be found at the Google Drive link here. The competitive analysis was a good way to piece apart what sorts of design approaches and strategies are used in commercial LMS products like Udacity or Springboard. The Heuristic Analysis I did was just for Udacity, but I ultimately did a high-level competitive analysis of Springboard and Udemy as well when I started to design Adept’s Site Map and User Flows. But before I get ahead of myself, let’s turn back to the users, this time by way of Personas and Empathy Maps.
Springboard defines a persona as follows:
A persona is a representation of a type of user. Personas answer the question, “Who are we designing for?” They also help to align strategy and goals to specific user groups.
So I arrived at three different user personas, inspired by the people that engaged with the user research I conducted in the first project. Alix, shown above, is someone who is working, but wants to branch out. Alix is looking to become a freelancer by complementing her existing professional skills with something else that might be in demand in the market; she is also open to one day starting a business. Alix’s Empathy Map brings to light how she came to have the qualities that are described in her Persona.
Combined, Personas and Empathy Maps help designers hone in on a particular type of user, instead of some non-existent “average” user. By creating a person inspired by the real people in our lives, we are more readily able to empathize with those we are building products for. This is especially important when designing in a problem space that has an explicit social element, like economics or equity. You can see my full Persona and Empathy Map document here on Google Drive.
Design
The bridge between Research and Design is the User Story. The User Story is a user need described as a product feature. There are more technical definitions of User Stories, once the software engineering has begun, but in the initial design phase a more informal User Story approach is OK, so long as they are revisited in light of new discovery. Here are a few of the user stories I created for Adept on my first pass:
As a User I want to quickly find trusted learning resources for my practice, because there is so much information online it is hard to know where to begin.
As a User I want to know what community events related to my interest are happening near me, because it is important that I meet potential employers/clients/collaborators for my practice.
As a User I want guidance on discovering where my passion and strengths overlap with market needs, because I want to earn well and deliver quality work.
You can see the full User Story document here on Google Drive.
The next section in Springboard’s UX Course is titled Content Strategy. From Springboard:
According to Kristina Halvorson, CEO of Brain Traffic, “content strategy plans for the creation, publication, and governance of useful and usable content.”
From the User Stories I had a direction to move in with my design. But, as always, I needed to get User input. So I conducted a bit more research, by performing a card-sort. A card-sort is defined by usability.gov as
Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups.
I decided to use a card-sorting web app that had some built in statistical tools. It’s from optimal workshop and I recommend it if you ever need to perform a card-sort. You can check out my card-sort results at this Google Drive link.
From the card-sort I was able to make a Similarity Matrix, which is what ultimately informed my Site Map:
This Similarity Matrix illustrates the categories that users grouped the cards into. For example, Problems and Puzzles (at the top left) were grouped together 100% of the time, while Idea Pitch and Hackathon (at the bottom right) were only grouped together 40% of the time.
Based on the card-sort results and the competitive analysis I had conducted earlier, I designed the Adept Site Map using Visio:
The flow from Research to Design was a bit intimidating at first. To go from this conceptual model to a solution that was usable and useful seemed like a leap I wasn’t sure I was ready to make. But the card-sort was the perfect intermediary step. This stage ultimately served as a reminder to always keep the user in mind.
From the Site Map, I had to move into designing User Flows. Optimizely defines User Flows this way:
User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product.
So now, in a way, I was moving backwards, from the tangible to the conceptual. I had the Site Map in front of me, but now I needed to imagine the steps that a user would have to take to address the User Stories I had created. The User Flow designs happened after work one day; I stayed in the office whiteboarding and diagramming until 10 PM, but it was actually an exhilarating experience for me. I was deep in the process of imagining what it would be like to be an actual user, moving through actual web pages, trying to accomplish actual tasks. Peep the user flows that resulted below:
A brief breakdown of the User Flows:
There are 4 streams that happen somewhat concurrently as the User moves through the entire learning journey on Adept.
Learning Resources. These could be things users learn, discover, or invent that help them do the work they love to do. It’s both filled with content provided by Adept and able to be filled with user-generated content.
The Learning Path. This is the delivery of the content they need to learn their subject of interest.
The Portfolio and Project. This is the space that is filled with content that is generated by the user in the Learning Path, but it can also serve as a space for incubating ideas and sketching them out into products or services. The Portfolio is also a staging space for their polished work, which will face the community.
The Community. This is an in-person community in the city of Long Beach, made up of mentors, learners, entrepreneurs, freelancers, workers, bosses, and everyone else in the spaces affected by tech, design, and entrepreneurship. This serves as a testing and networking ground for the user learning on Adept.
You can download the Visio diagram for Adept’s User Flows from this Google Drive link.
So once the Architecture was defined for Adept, I moved into full-on creation mode. First, with painters tape and sticky notes:
And then in Sketch:
The wireframes can be seen individually, both in analog and digital form, at this Google Drive link here.
Once I made these wireframes, which correspond to the Site Map and User Flows I had created earlier, I used InVision to create a prototype that users could click through:
If you’d like to click around the current version of Adept’s prototype, check out this InVision link (you’ll need to create an account, but it’s free).
Making these wireframes was like magic. To see the project I had begun from the research phase come to life in the design phase was incredibly enjoyable. Because of this, it was easy to move into the next phase of the project, Visual Design:
I use a system for designing visual elements called a Style Tile. This is a template that I’ve come to love from a previous UX 101 course I took with Designlab. The image that inspired my palette can be found here on James Roper’s (the artist) website; it’s called Conception of the unfolding implicate and it’s sick.
Evaluation
It was at this point that I crossed the threshold from Design & Adapt to Evaluate & Measure in the design process. This phase requires going back into research-mode (UX Design is mostly research, if you hadn’t noticed yet), but this time I presented a prototype for the users consideration.
Usability Research is a form of testing in which the users are asked to perform a set of tasks (i.e. some set of the User Stories). In my research, I found that the patterns that were most familiar to my users were those that can be seen in typical Learning Management Systems, like a profile page, a community page, and a learning view. But some of the ideas that I had designed from scratch, like the Inquiry Games or the Sandbox, weren’t immediately understood by my testers. So these are things that I know that I’ll have to design more explicitly as I create higher-fidelity prototypes, and eventually develop as a piece of software. The Usability Research document can be found at this link on Google Drive. As with each of the phases in the design process, Usability Testing will be an ongoing and iterative process. My aim is to be more quantitative with this phase as well (eventually reaching into A/B testing).
Conclusion
This isn’t exactly a conclusion. It’s just a touchpoint. A small stop at which I’m letting you know what I’m up to. But where is Adept going? How is it going to fit into the Long Beach community? How will I find the people who might use this?
So, I think Adept is going to be a work-in-progress for a while, because I’m also going to do the software development behind it too. The goal is to make something usable before years-end; please note I said usable, not perfect, by the way. Adept as an idea is huge and I’m fully aware of that. But the hugeness is exciting, especially as a designer. As a developer, the hugeness is intimidating, but if I approach this project with a process and the tenacity that I’ve been using to get to this point, I think I can get something up for you to play with soon enough.
Adept is a project I’m working on as a part of Uncoded LB, a non-profit in Long Beach with a mission “ To cultivate a passionate, sharing, and inventive local tech culture through open, inclusive engagement with our community.” We have a small repository of learning resources that you can find here, but this is just a momentary stand in for Adept.
Ultimately, I hope to make Adept a piece of the Long Beach Economic Development Blueprint, which is an effort by the City and the LB EconDev Commission “ to define priorities that will lead to creation of businesses, well-paying jobs, and increase the standards of living for our diverse residents.” As a disclaimer, I’m on the board of Uncoded and on the LB EconDev commission. But this project is currently just being worked on by me and without any form of compensation. Which is OK, because I feel incredibly passionate and encouraged by the path I’ve taken.
When all is said and done, I hope Adept is interesting and useful. It will be open-source (both design and development materials), so maybe someone will be able to take some of the pieces I’ve made or the lessons I’ve learned and apply it to their own community LMS/IMS. But regardless what the future holds, I’m really happy right now — in the present. Because this has been an amazing experience.
Thanks for reading and please reach out if you’d ever like to talk about Adept or anything else!