Portfolio About

Soul of Athens

Soul of Athens

Overview

Soul of Athens, a collaborative group project, began by assembling a talented team of designers, developers, photographers, and journalists to tell the story of how members in intentional communities make families of like-minded strangers. Despite the mid-project disruption of COVID-19, our team never lost our passion for storytelling and always kept the individual members of the intentional communities at the forefront of our minds when facing crucial decisions regarding the direction of our project until the launch of our website on April 21st.

Our site is now live at 2020.soulofathens.com.

Download Master Document

The Problem

How can we educate people on the topic of intentional living commnities while telling the stories of local communities at different stages of life?

The Team

While we all found roles which highlighted our strengths, most of us pushed ourselves to help in different ways outside our comfort zones. It was because of this cross-team collaboration that we were able to stick to our deadlines and have great success.


Meg Knapp
Lead Developer
File Manager


Nicole Dinan
Lead UX Designer


Molly Roberts
Lead Content
Product Owner


Ally Herrera
Lead Designer


Ryan Vallette
Project Manager


Herbert Frimpong
Designer


Lil Keller
Content Curator


Marina Modi
Content Curator

Details

My Roles

  • Lead Developer
  • File Manager

Responsibilities

  • Write clean and sustainable code
  • Create and maintain Github repository
  • Assign coding projects to teammates and help them as needed

Tools

  • Figma
  • Trello
  • Github
  • Optimal Workshop/ TryMyUI
  • Bootstrap
  • HTML/CSS
  • JavaScript
  • Reveal.js

Timeline

Our team worked on Soul of Athens from January 13th to April 21st. By using the Agile methodology for project management, design and development were able to work in tandem with photographers and journalists producing the final product in just 3 months.

Research

Finding Our Story

Our team’s initial reaction to learning our topic for Soul of Athens was intentional communities was confusion; none of us were familiar with what an intentional community was. However, as we learned more about the several intentional communities surrounding our homes in Athens Ohio, we fell in love with telling the story of one community that’s recently formed, one with a solid foundation, and one that has unfortunately died off. We chose these three to demonstrate a life cycle of a community while also allowing the viewer to get a comprehensive understanding of what exactly intentional community is and what they have to offer.

What is a Intentional Community?

An intentional community is a planned residential community designed from the start to have a high degree of social cohesion and teamwork. The members of an intentional community typically hold a common social, political, religious, or spiritual vision and often follow an alternative lifestyle.

The Communities

We decided to focus on three of the communities located close to Athens Ohio. The communities are Black Locust Collective, Currents, and SuBAMUH.

After observing that these three communities were at different stags of life, we decided to focus on the transitional phases that intentional communities go through during their lifespan:

  1. Black Locust Collective is a community of 4 people that has recently formed and is working to establish itself.

  2. Currents is a well-established community of around 70 people that is currently seeing to transition power to the next generation.

  3. SuBAMUH is a community that is no longer active. Before reaching the end-of-life stage, SuBAMUH ws a feminist community. We spoke to it's last remaining member to find why the community failed to carry on.

Competitive Analysis

While the photographers and journalists built rapport with community members, designers and developers worked to gather inspiration for the design and structure of our website. Origionally, we wanted to incoporate a horizontal scrolling home page into our site. We found several sites that had aspects we wanted to draw from and came together as a group to discuss what we liked about the examples we found.

User Personas & UX Goals

We identified the demographics of some of our potential users and created five personas. We focused on having a deep understanding of our personas, what they need, what they value, their abilities, and their limitations before creating our UX goals.

Execution

Low Fidelity Wireframes

We went through a few rounds of wireframing to try out different story structures and layouts. We started with low fidelity wireframes and added more detail until we had high-fidelity wireframes that provided an accurate picture of our plan for the site. We used Figma to collaboratively work on the wireframes. The final version of the wireframes includes a horizontally scrolling home page, three vertically scrolling pages to tell the stories of the communities, a video module, a sidebar page to tell related stories, and navigation.

High Fidelity Mockups & Prototypes

After getting feedback on the wireframes from our content team and a few other people, we created mockups to use for user testing and developing our first draft of code. The mockups use stock images and a few images that had been completed by our content producers. We used Figma to create the mockups, using the wireframes as a base. The mockups are prototyped so they could be used for user testing.

As we developed our mockups, I began the first draft of code.

First Click Testing

We used Optimal Workshop to run a first-click test with our mockups. We focused on three tasks for this test:

  1. Find the link to the sidebar content.
  2. How would you play a video on community pages?
  3. How would you return to the home page from the community page?

We had eight participants that took this first-click test. The result were visualized in clickmaps and charts that illustrated the task success rates.

Feedback & Changes

When the time came to share our status with our class and professors, we got a lot of helpful feedback which helped to push the project forward. One key element our peers commented on was the horizontal scrolling homepage design. We came to the conclusion that the design could be unnecessarily confusing for our audience, so we created a new mockup that addressed this problem and other feedback we got.

Updated Mockups

We continuted updating our mockups, frequently checking in for feedback from our peers and landed on a layout which includes a verticle scrolling home page. Notible changes include adding a video background to the landing page to help establish a sense of place, and added audio clips of members of intentional communities explaining what their communities mean to them. We also added text to introduce our stories and a map of the three communities featured on our site. A Reveal.js slide show sits at the bottom of the page to help enforce the timeline element of a commnity in the beginning, middle, and end-of-life.

Usability Testing

After we had developed mockups we felt confident with, we conducted usability testing to get more feedback on our site. We used TryMyUI to set up and run usability tests. After getting video recordings of users on our site completing a few simple tasks, we compiled a list of changes for us to make as a result of the feedback we got. We conducted a second round after the soft launch of the website.

Launch of Final Site

With hundreds of photographs, a handful of interviews, and one video, we were able to assemble a four-page, 53MB, Bootstrap website that works responsively on monitors, tablets, and mobile. Our site successfully highlights the alternative living arrangements of intentional communities and how these groups begin, the challenges they face, how they flourish, and how they sometimes cease to exist.

I feel so lucky to have worked with such a talented team, to have taken on the responsibility of being a team leader, and found successful ways to communicate with my team when all work moved online due to COVID-19.

View Our Site

Launch Day Analytics

We launched our website on April 21st, 2020. Out of all five Soul of Athens teams, we had the second highest page views, the most unique page views, and the longest average time spent on page they day of launch.

497
Total Page Views

311
Unique Page Views

1:35
Time on Page

Key Learnings & Takeaways

From the beginning, everyone in our team was an excellent communicator. By running design decisions by the photographers and journalists, we were able to ensure they were happy with the way their work was getting displayed and that we were getting the content we needed. Design, development, and content curators regularly shared progress with each other, and even when the information didn’t impact the other group it was essential for all of us to feel connected to our project.

Another reason I think our project was successful was the commitment to sticking to deadlines. Because everyone held a role they were passionate about, there was hard work put into each step of the process. It was also important that we updated the calendar and as needed. When a deadline needed to be updated, the whole group was consulted to see if the new date was reasonable. This was also often when team members stepped in offering help.

One thing I would change in the future is getting feedback more regularly, and to reach our for feedback from various groups. It was incredibly helpful to have an amazing support system in the other Soul of Athens groups when we needed feedback, having a professional eye to review the site helped it be what it is today. However, I think it would’ve been good to run more user tests more frequently as user tests offered feedback we hadn’t heard from the Soul groups. User testing shows what the common user sees and having that diversity in testing we were able to adjust things that we hadn’t thought of before.

Overall, this experience has opened my eyes as to what it’s like to work in large group settings and the pressures of working on a project that hundreds of people will see.

Home
Next
Contact Me