Branding, UX Design & Web Development for E-commerce Website

Emerging Media Capstone Project

WordPress, Figma, Adobe Illustrator

2 Designers

UX/UI Designer, Project Manager, Developer, Researcher

2022 – 2023

Athens Era is a website dedicated to fostering the flourishing community of Athens, GA’s local artwork. With our passion and expertise, we have crafted a remarkable platform that empowers individuals to buy and sell captivating pieces, amplifying the reach and impact of these artistic treasures.

As a new brand, Athens Era needed a clear brand identity, target audience analysis, and an online presence. My team and I went through the entire product development process, from user research to design iterations, in order to create a cohesive brand and experience for Athens Era.

According to the U.S. Bureau of Labor Statistics, in 2020, about 62% of artists in the United States were self-employed. This arrangement allows artists to have creative independence but also requires them to manage their own business aspects.

The Athens community of artists struggle to manage their own businesses and reach larger audiences due to the lack of a communal online art presence. This project tackles connecting local artists in Athens, GA with larger audiences through technology.

Design Process

Popular platforms such as ArtFinder and Etsy greatly inspired the development of Athens Era. The overall functionality and available features of ArtFinder provide a solid foundation of establishing an art-focused website. Features such as Shop Pages, Reviews, Quick Links, and About Pages are loosely incorporated into Athens Era’s construction. However, ArtFinder is not as easily accessible for new and just-starting artists as they require a tumultuous application process in order to obtain a ‘seller’ profile.

Etsy on the other hand is more seller-friendly and boasts significantly fewer restrictions in the process of becoming a seller. The ease and accessibility of Etsy makes it easier for newer artists to create a shop of their work. Additionally, customizable Shop Pages and descriptions allow for sellers to brand their shop and style it according to their own identity. Unfortunately, it is difficult for new artists to stand out in such a densely populated market.

We initially identified a need for this site through our own experiences. Both of us, being heavily interested and passionate about art and design, determined that there is a disconnect between artists and buyers. Furthermore, the avenues that do exist for artists to promote and sell their art do not typically benefit small artists and those who are just beginning their career in art. On the opposite end, buyers often want to feel a connection to the art that they are buying. This connection stems from a good buyer/seller relationship, opportunities to support small artists, and the chance to foster a greater connection within the community.

While there are numerous e-commerce sites that are considered the ‘go-to’ for selling and buying art, there has yet to be one that empathizes with the community. That is where Athens Era comes in. Athens Era alleviates the previously mentioned pain-points while promoting a more personalized approach to supporting the local Athens art community.

Our competitors include local galleries in Athens with online promotion and large e-commerce sites for handmade art. We specifically researched The Tiny ATH Gallery, ArtFinder.com, and Artd’hope.com.

Function as an online forum and e-commerce site for local art, but only specific to the Athens Community

Larger reach and ease for artists

Greater accessibility for the public compared to physical options in Athens

We ideated on some key components of the brand using FigJam:

By combining the functionality and features of ArtFinder and the usability and personalization of Etsy, Athens Era offers a balanced combination that is both welcoming to new artists and accessible to buyers. Not only do these aspects provide a foundation for Athens Era, but they also provide a means of inspiration for other features, such as in-platform communication (absent in both ArtFinder and Etsy), customizable buyer profiles, and item update notifications.

Designed for the Athens area, Athens Era will provide a platform for Athens-based artists to maintain a small e-commerce store and communicate with potential buyers. By limiting the audience to Athens neighborhoods and surrounding communities, Athens Era ensures that local artists are receiving the most direct exposure to their intended audiences. By making the platform free to use, Athens Era is also able to ensure that 100% of the proceeds directly benefit the artists and small businesseshosting their shops on the platform. Athens Era will ultimately promote the connections between artist and buyer and establish a greater relationship and appreciation for the Athens community.

The website contains a homepage, shop page, community page, join and login pages, and a checkout page. On the first visit to the website, users are taken to the homepage, which includes descriptions of the site, a call to action, featured artists, popular products, and more. From each section, users may be directed to another page with more information.

Specifically, for artists, they may join and login to the website and manage their account to sell artwork, display their story, and provide additional information. Due to the e-commerce function of the site, we created several policies to ensure credibility and compliance. We aim to help local artists grow their business and spread appreciation for art in Athens.

The website will is built on WordPress and altered with design elements and several plugins for communication and payment features. Prototypes are created on Figma and Adobe XD. Logos and graphics are created with Adobe Illustrator.

Prototype: Mock-ups and prototypes for Athens Era were built using Figma and Adobe XD. This includes prototypes for layout, features, and functionality.

Design: Adobe Illustrator was utilized for design purposes. This includes establishing and creating the logos, icons, and imagery.

Develop: The Athens Era site is built using WordPress with the utilization of plugins such as WooCommerce to establish the marketplace functionality.

Athens Era is an online art marketplace solution for both buyers and sellers. As it relates to the latter, current avenues to host online art shops and sell art are over-saturated and often require months of applications, waiting, and extraneous fees. Athens Era aims to provide small artists the opportunity to host their online shop in a more beneficial manner. By making the platform free to use and ensuring that sellers receive 100% of the proceeds for their transactions, Athens Era artists are able to retain a greater profit from their sales. They are also granted the ability to host their shop and a smaller and less-saturated platform. This allows for more exposure and a greater opportunity for small artists to promote their art. On the other hand, buyers receive just as much of a benefit shopping on Athens Era as the artists do selling on the site. Athens Era hosts Athens-area artists without a compromise in location demographics. This means that all purchases made on Athens Era directly benefit an Athens small business. Keeping Athens small businesses alive and thriving ensures that the community we all know and love maintains its charm and culture.

Because Athens Era is a new company, outreach is expected to be small initially. However, as we begin to populate our artist database and add to the growing product collection, we predict the buyer population and audience to follow.

Our journey was not smooth and included a hard pivot. In the beginning, we we were set on creating a mobile app for Athens Health and Fitness, a local gym. After some initial user research and meeting with the gym associates, we decided it was not the right path for us. There was not enough interest in the target audience and we wanted to work on a meaningful and impactful project that could outlive our investments. We pivoted and landed on our idea for an art marketplace website, where Athens artists and buyers can meet and exchange artwork.

We first envisioned our website to have a page for artists and a page for users, however, this changed throughout development. We had been heads down into creating the website with a strict plan and goal in mind. After meeting with our Instructor, Chris Gerlach, we received valuable feedback of the functionality of our site from a first time user. We repositioned our design framework to account for the ignorance of new users, who may not not if they identify as someone who would “join” or “login”. We discovered that our plug-in was developed for vendors to join and login a site, so they can access their own page and products. We kept this format and added content to direct users into joining if they were an artists wanting to sell on the site. We decided to connect users to the site with a subscription, rather than a user account.

The color palette is built from combining Athen’s culture with the sophistication associated with an art gallery. We wanted to keep the Georgia red and black but in a more neutral tone to bring feelings of home and support. The art displayed should be the center of attention, not the site.

After landing on the name, “Athens Era”, I wrote out some related words associated with the brand feeling I hoped to create. I played around with some potential logos and shapes.

The arch in the logo formed by the “ATH” represents the historic arch landmark in Athens, GA. The final logo is created with intentionality: to inspire feelings of sophistication and Athens, GA.

I learned that the logo should not only represent a brand, but it should also convey a brand’s voice. The Athens Era logo conveys a clean and sleek appearance with a nod to a symbol that truly represents the community that Athens Era aims to serve. The Athens Era logo system offers a collection of full-color standard and alternative logos. Each logo style also possesses a black-and-white alternative.

The fonts were chosen to be simple and playful.

Our design uses Poppins (headers), Poppins Extra Bold (sub headers), and Glacial Indifference (body text). These fonts are sleek, yet elementary. They are sophisticated, yet simple. They are not outlandish or extreme. They aim to bring feelings of a clean aesthetic and put together interfaces.

All graphics were designed in Illustrator. They were thoughtfully designed with goal to feel soft and minimalistic, while giving the brand a more artistic edge.

Maintaining a proper design system across documents and sites made it easier for us to uphold our desired brand image. While we developed numerous iterations for logos, typography, and color palettes, we are pleased to have established them all in a way that reflects our mission. It allows us to consistently portray an exciting and welcoming voice as we develop our marketplace further.

The UX-RP is thoughtfully crafted to direct the ongoing development of the Athens Era website. It includes metrics for measuring user testing, the methodology, pre and post survey questions, personas, tasks, and analysis components to guide our data interpretation. I anticipated that recruiting a representative sample for our testing will prove most challenging. We mitigated this by networking early on to form connections with Athens artists. This project has served me well to understand the framework of user testing and user research, as well as the tools needed to develop a successful plan.

The Gary Holmes Persona is created based on the target consumers of similar brands and websites – an older to middle-aged wealthy adult interested in collecting art.

The Anika James Persona is crafted with attention to demographics and motives, closely related to that of a young adult interested in selling artwork.

The framework and design of the UX-RP is credited to cater to our two target users: artists and buyers. With this research plan, we conducted user testing of 9 participants from each target user group.

We discovered 4 key problems facing the functionality and user comprehension of the website and proposed solutions to resolve those issues.

Using the data collected, we calculated the website’s System Usability Scale Score to be 90.3, which is 32.7% higher than the average positive result, according to usability.gov.

From the ideation, branding, alpha and beta products, research, testing, and several development iterations, I have created a functioning e-commerce website to provide greater accessibility to the public to local artwork from Athens, GA.

I’ve learned how all of the pieces of a brand come together to create a cohesive digital product. I am pleased with the completed version of the website and am excited to begin marketing efforts.

View the documentation of our capstone journey through our Emerging Media Capstone Journey YouTube Playlist.