Movement of Belonging is a locally founded and women-operated non-profit which focuses on generative projects rooted in collaborative arts and physical movement. The founder, Kate Spacek, operates, organizes and designs all of MOB’s correspondencies. She has come to realize that, while Movement of Belonging has so much to offer, these offerings are not reflected as best as they can be in the site itself. Along with the site not being responsive on mobile, the branding isn’t very clear, and the navigation often feels confusing. The current website, which is formatted similarly to a static blog, needs improvement to enhance the visitor’s experience while reinforcing brand recognition. The site is also linked to Kate’s personal website, which could feel confusing to users. Kate’s hope is to have the website be a hub for event RSVPs/announcements, email sign-up, news, and audience engagement.

My Role
UX Research, UI Design, Information Architecture, Style Guide
‍
Timeline
4 weeks

Create clear and consistent branding for the the client's organization, and redesign Movement of Belonging’s website using Squarespace (per client request).

To get a sense of how other organizations doing similar work structured their information, I completed a competitive analysis. My mentor and I decided it would make more sense to involve users in the latter portion of the design, as opposed to interviewing users based on the current website. My client also felt like the site she previously had was not a reliable source for collecting data, as it wasn’t something she felt proud of yet!

After speaking to my client and reading over some notes she already had about what she wanted to overall layout to look like, I created the following site map to be able to visually map out what the navigation would look like.

My client and I worked together to specify which tasks we wanted to focus on for the scope, and I turned those into various task flows for her and myself to be able to refer to.

I began ideating with sketches based on the site map, to start to visualize how we might be able to display the robust amount of information in a clear and accessible way.

Even though the site was to be designed on Squarespace, it felt important to do some mid-fidelity wireframes on Figma to get a sense of the layout.

I asked my client to gather some photos via Pinterest that represented her brand. I asked her to gather colors, photography, graphics and typography, and boy was she generous! She gathered nearly 90 images that represented her brand, and they all boiled down to 3 main styles: Nature, geometric shapes, and body movement. Based on her photos I did my best to consolidate and create a mood board that represented each of these, while also found the common and cohesive thread.

After designing the initial version of the site, I conducted tests with three different participants to test its overall usability and identify any potential pain points. The tests offered very valuable insights!

I plan on circling back with my client soon to implement some more artwork throughout the site, and overall fine-tuning the site.

This was my first time working and collaborating with an actual client, which is, for obvious reason, very different from completing a project based on my own unique ideas! I realized how important it is to come to the table, from the beginning, with the right questions to be able to extract as much information up front as possible.
It took me a few days to realize that I needed to factor in not only how much time it would take to complete deliverables, but also the timing it would take to go over the deliverables with my client, receive feedback, and then make iterations. I'm looking forward to having a better idea of what to anticipate the next time I get to collaborate in this way!