Case Study: Artist on Art

Nada Miljković, founder of Artist on Art (AOA) and GetVirtual (GV) needs an updated website. Nada aka radio activist, educator and artivist has over 10 years of video and audio podcast recordings archived in Kinsta, Bluehost and Youtube. She has an existing website in Kinsta however her podcast archive is loosing integrity and has asked me to help her create a new, modern website in Webflow.

This was the previous state of AOA's website when I was hired to work on it.

This is the current state of the website after my updates.

Most of Nada's listeners are University of Santa Cruz Alumni, educators, KSQD 90.7 radio show followers and UCSC Entrepreneurial students.

Nada's topics of discussions always include a type of art form and her podcasts chats are about local Santa Cruz news and events, culture, education, entrepreneurs, lifestyle, music and much more....

Having a podcast archive is a top priority for Nada, she wants to make it available for people who missed her show and for individuals that are interested in going back to replay the previously recorded podcast. Nada didn't just focus on one area she had many different facets to her conversation which always included Art, she believed everyone is an artist and there is an Art in everything we do.

Home Page Wireframe

Podcast Page Wireframe

Wireframe drawings of Home and Podcast Page

Scopes & Constraints

I collected and exported data from Kinsta, Bluehost and AWS into Google Drive, creating a central repository. The original files were not located in a central location and the start of the project required a tremendous amount of research, process evaluation and planning.

AOA had recorded over 500 audio and video podcasts and the biggest constraint while developing the site was the planning and execution of the file migration, renaming and uploading podcasts to Anchor.fm (podcast player).

I lead the migration team from GetVirtual to start the process. The project was scheduled to launch in August 2022 but due to student constraints and commitment the site launched January, 2023.

Statistical data on AOA file location

Objectives

The objective was to transition the old website from Kinsta to Webflow. Recreating a clean, user friendly website using Webflow CMS with side bar filtering which will allow an easy way for users to search the archives. In addition, redevelop a new process flow for a central repository by uploading all Podcast files to AOA's Google drive. And lastly, rename all podcast files in Google drive upload the files to Anchor.fm and copy the Anchor.fm link for use as a podcast player in Webflow.

I started with analyzing AOA's sitemap and architecture.

Analyzing Podcast findings

AOA's Original Process flow. Podcasts did not have a central repository

Role

In my role as Principal Product Designer, I was in charge of the entire transition from Kinsta to Webflow, data migration process and end to end design of Artist on Art's website. Due to the extent of this project we brought in the GetVirtual team to assist with the data migration.

I partnered with the business owner and managed the GV team while leading the design process. The team consisted of 4 students, 3 of the 4 students handled renaming podcast files and uploads to Anchor.fm, while the other student uploaded the podcasts and content to Webflow.

Discovery

Together with the CEO we conducted a discovery meeting to review the project. It was clear that there are a lot of moving parts to this project so the easiest thing to do is break the project out into simple steps.

Review the sitemap and architecture.
Design the website using mock ups and wireframes.
Layout the process for the Central Repository & create a podcast naming convention. (Exhibit 1 & 2)
Create the Accounts: Google Drive and Anchor.fm
Organize Folders and Upload podcasts to Google Drive.
Bring in the GV team to begin file renaming and uploads of 400+ podcasts.
Develop the website and pages in Webflow while leveraging the CMS tool for managing and publishing dynamic content. Once the pages are styled we were ready for the content! (Exhibit 3)
Data Migration!

Exhibit 1: Central Repository Plan to Webflow

Exhibit 2: Naming convention for Podcast files

Exhibit 3: Webflow CMS Podcast Collection Tool

Sitemap

Artist on Art Sitemap

Wireframe Anatomy

Wireframe of Home page.

Wireframe of sidebar CMS Filter and collection podcasts

Sidebar

The sidebar helps the user to easily navigate the site while searching for podcasts by Audio or Video, Season and Category. You can even do a simple search.

GIF of how sidebar filtering works on Artist on Art. To see more, please visit their website.

Outcome

Although the website took longer than anticipated I am really happy with the end result. Not only did I strengthened my skills as a designer I pushed myself to think outside of the box. I utilized my design resources and reached out to others in the community on how to approach certain challenges I experience on this website. From the simplicity of the site you would never assume that this site consumed me for months.

Conclusion

I love the clean lines and simplicity of Artist on Art's new website. My favorite feature is definitely the sidebar filtering and hovering over the podcasts watching the image turn from black & white to color. I think I made an excellent choice creating a vision for Nada that will allow her site continued growth.

If I could change anything I wish I had more time to refine the images. Unfortunately the images were lacking on the site and we had to use what we had. And in most cases the images were not usable because of the size and pixelation or it was lost in the shuffle of transitions.
‍
As a result I refined my webflow skills, learned how to create a central repository and have a better understanding on the functionality of creating a podcast website along with podcast players. Again, I am pushed outside the box and I really enjoyed leading the strategic aspects of the website.

Thank you for reading my case study. If you have any questions regarding my work or would like to connect click here. Or email me direct.

Artisans & Agency

Bellerose Salon

Christiania Bikes America

Coca-Cola

MorAfrica