Soul of Athens is a collaborative group project where designers collaborate with photojournalists to develop an interactive story that focuses on a topic/subject in or around the Athens, Ohio area.
My team told the story of three intentional communities in Southeast Ohio. We focused on the stages of development that these communities go through — early life, mid-life/transitional, and end-of-life.
Our site is now live on 2020.soulofathens.com.
View live siteHow can we educate people on the topic of intentional living communities while telling the stories of local communities at different stages of life?
Download master document [PDF] Download project scope [PDF]January – April 2020
My team began working on this project in January 2020 and we launched our final site on April 21, 2020. In March we transitioned to working remotely due to the coronavirus pandemic.
We started with the broad topic of "Intentional Living" and narrowed our focus from there. We started by compiling a definition of intentional living communities.
An intentional living 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.
We decided to focus on three of the communities that were located close to Athens Ohio. These communities are Black Locust Farms, Currents, and SuBAMUH.
After observing that these three communities were at different stages of life, we decided to focus on the transitional phases that intentional communites go through during their lifespan.
Black Locust Farms is a community of 4 people that has been recently formed and is working to establish itself.
Currents is a well-established community of around 70 people that is currently seeking to transition power to the next generation.
SuBAMUH is a community that is no longer active. Before reaching the end-of-life stage, SuBAMUH was a feminist community. We spoke to its last remaining member to find out how the community ceased to exist.
While the content team was building rapport with the intentional communities we wanted to feature, the interactive team spent time gathering inspiration for the design and structure of our website. We wanted to do something different and innovative by incorporating a horizontally scrolling home page into our site. We found 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.
Next, I developed some user experience goals to keep in mind for our site. One of my teammates created personas for our intented users.
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 modul, a sidebar page to tell related stories, and navigation.
View wireframesAfter 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.
I used Figma to create the mockups, using the wireframes as a base. The mockups are protoyped so they could be used for user testing.
View mockups Try the prototype
I used Optimal Workshop to run a first-click test with our mockups. I focused on three tasks for this test. The first was finding the link to the sidebar content. The second asked users how they would play a video on the community pages. The third task asked how users would return to the home page from the community pages.
We had 8 participants that took this first-click test. The results were visualized in clickmaps and charts that illustrated the task success rates.
We did a status presentation to our class and professors to get feedback on our project. We got feedback that our horizontal scrolling homepage design could be unnecessarily confusing for our audience, so we created a new mockup that addressed this problem and the other feedback we got.
After updating our mockups a few times, we landed on this version, which includes a vertical home page. We added a video to the landing page to help establish the sense of place and added an audio section below the definition of people from intentional communities explaining what intentional communities meant to them. We also added some intro text to introduce our stories and included a map of the three communities that we covered. We also introduced a Reveal.js slideshow at the bottom of the homepage that showcased the three communities.
View updated mockups
Once we updated our mockups, I conducted usability testing to get more feedback on our site. I used TryMyUI to set up and run the usability tests. After getting video recordings of the users using our site to complete a few simple tasks, I annotated the videos with the comments and suggestions that the users made and shared the annotated videos with the group. I also compiled a list of changes for us to make as a result of the feedback we got from users.
We also ran another round of usability testing after the soft launch of our website.
Our website focuses on the stories of three intentional communities in southeast Ohio to illustrate how these alternative societies begin: the challenges they face, how they can flourish, and how they sometimes cease to exist.
I am so proud of how my team came together to complete our project, despite all of the challenges we had to adapt to during this time.
View live siteWe launched our project on April 21, 2020. In comparison to the 4 other teams creating projects, we had the second most total page views, the most unique page views, and the longest average time spent on page on launch day.
Ryan Vallette: Project Manager, UX Designer, Developer
Nicole Dinan: UX Lead, Designer, Developer
Meg Knapp: Development Lead, UX Designer, File Manager
Ally Herrera: Design Lead, Developer
Molly Roberts: Product Owner, Content Lead
Herbert Frimpong: Designer
Lil Keller: Content Producer
Marina Modi: Content Producer
One thing that I will take with me from this project is the experience collaborating with a team of interactive designers. I found it challenging at first to find ways to divide up the work while making sure that we were all on the same page. This project has given me experience articulating and justifying design decisions to our team and also to our class. The status presentations were really helpful to stimulate a client project and give us a chance to get feedback and adapt. I also got the chance to conduct multiple types of user testing to make sure that our site was working in the ways we wanted it to and to get feedback on other ways we could improve it.