Manchester Craftsmen's Guild Online Portal Design
Overview
Manchester Craftsmen's Guild (MCG) is a nonprofit art, education, and music organization serving the Pittsburgh, PA community. Alongside exploration of the visual and performing arts, students are connected to job opportunities, and given opportunities to network and be mentored by established artists.
The problem
MCG was looking to have an MVP of an online portal built for their organization to pilot among its members. This online portal would serve for alumni, current students, and instructors to upload content to job boards, propose project partnerships, and share their work. My team and I were brought on board to design and develop the MVP for Manchester Craftsmen's Guild.
Role
Lead UX designer, alongside a team of consisting of a developer lead, project manager, and two junior developers
Tools
Pen & paper, Zoom, Google Meet, Figma
Duration
6 weeks
Discovery
Kicking things off
The project manager, lead developer and I had a kickoff meeting with the client at the start of the project. During this meeting, I spearheaded an interview with the client, in order to get a sense of what goals and objectives they were looking to get out of this project. I also set the groundwork with the client for getting connected to students, current and former instructors, and alumni, in order to more holistically understand who I was designing for, and their pain points.
In the meantime, I also developed the interview questions to be used in the upcoming user interviews. The main things I was looking to get insight into through the interviews was:
How do MCG members currently network, look for jobs, and find out about events?
What pain points have they run into while doing any of those activities?
On the other hand, what positive experiences have they had with an app, service or word-of-mouth around those activities?
Talking to the users
I conducted remote user interviews with five people: a current student, a MCG alum, a former instructor who was also an alum, a MCG office employee, and a current instructor. These meetings were conducted over Zoom. The following insights were uncovered from the interviews:
MCG provides an incredibly supportive environment and resources for its students.
“...it's built around mentorship. So I think a lot of the time building relationships with the students is more important than the physical artwork the students are creating.”
While MCG has systems in place to inform their members about potential job opportunities and events, the students still find themselves primarily finding out about events through:
-
Word of mouth
-
Googling/looking up events online
-
Social media such as Instagram
In the past, a lot of the mentorship and networking primarily organically happened in person. With COVID-19, MCG is still finding its footing in how to continue facilitating these opportunities.
Even before the pandemic, alumni that weren’t in the local area found it took a little more work to have mentorship and networking opportunities happen.
Screenshot of user interview
Distilling interview insights
Using the data collected from the user interviews, I created personas to help myself and the developer team empathize with our users and create awareness around their pain points and goals.
Two of three personas
Ideation
Where's my map?
With the initial research phase completed, I began to map out the information architecture of the online portal, in order to help myself and the development team visualize and communicate around the structure of the portal.
Portal site map
Putting pen to paper: sketches
Guided by the information architecture I had laid out, I created lo-fi wireframe sketches to begin planning out the UI structure and layout of the portal.
Sketch example 1
Sketch example 3
Sketch example 2
Sketch example 4
High-Fidelity Mockups
Pivoting due to changing circumstances
The initial plan was to test slightly higher fidelity wireframes with the users, in order to verify the usability and flow of the online portal design. The process of getting in direct contact with users to interview ended up taking up two weeks of the project’s timeline. In addition to this, the developer team encountered delays in getting the backend of the online portal set up, which ate into their available time to work on the frontend.
With these hurdles looming, I streamlined my initial, more comprehensive design process to more quickly deliver the high-fi mockups to the developers, helping expedite their workflow.
I followed Google's Material Design design system guidelines in the creation of these mockups, in order to provide a consistent, clean aesthetic that the developers would be able to build.
Login screen mockups
Connections screen mockups
Events screen mockups
New Job Posting screen mockups
Implementation
Handing off to the developer team
With the backend development process back on track, the developer team focused their efforts on building out the front end of the application.
I coached the developer team through using Figma’s Inspect panel to obtain the mockup’s CSS properties, in order to inform their front-end build of the web application. Given that I’d followed the Material Design design system, the developer team was easily able to use the Material UI frontend development framework to streamline their frontend development process, wrapping up the front-end of the web portal MVP right in time for our deadline and client presentation.
Outcomes & Lessons Learned
With our MVP basically wrapped up, the project manager, developer lead and I presented the MVP to the client. They were happy to see the MVP we had been able to generate for them, as they would be able to pilot the portal MVP internally, gather feedback and evaluate whether to have it built out further once they had the funding for it.
Looking back at this project, some things could have been improved. I had a plan to walk through a more comprehensive UX process - with activities such as participatory design and usability testing, but time constraints and dev team logistics made me streamline that approach. This taught me the importance of remaining flexible and adaptable when things change.
With further time, usability testing would have likely been super helpful in observing how well our portal was addressing user and client goals, and to collect feedback to improve via iteration.
Working with a distributed team on the other side of the country was a great learning experience - it reinforces the importance of planning and communication when a geographical and time zone difference is in play!
Working with the data of minors (under 18) was an important point of focus during this project, which was a great learning experience in terms of designing an application while keeping the privacy of their data in mind, with laws such as the COPPA act in place.