Case Study: MorAfrica

MorAfrica is an artist space globally dedicated to promoting artists from within the African diaspora, promoting modern, contemporary and traditional art forms. Owner & Entrepreneur, Kevin Crayton needed a new e-commerce website. His previous website, built in Wix, was outdated and confusing to navigate.

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

This is the current state of the website recreated in Webflow.

MorAfrica's primary client base are global art collectors and new, repeat and referral customers. Due to the vast array of colored artwork and stone pieces Kevin needed a clean, easy to navigate website so his customers could visibly see the artwork without distractions. Kevin also wanted his visitors to have access to an event calendar where people can find MorAfrica's paintings and stones on display.

Wireframe of MorAfrica Events page

Wireframe of Sidebar with Collections

Scopes & Constraints

I redesigned MorAfrica's e-commerce website from end to end using Webflow's Content Management System (CMS). I designed 13 unique pages, of the 13 pages, 2 pages included a CMS filter system with attributes and sidebar with product search, check boxes and range sliders. Also included was an event calendar page of all upcoming and past events that allows the user to click out of the website to purchase tickets and find out more information. In addition, all product/artist pages include a customized tab section with expanded details and a customized cart and check out using Paypal and Stripe.

The project was expected to launch August 2022 (8 weeks from start). Due to a delay in client content and other hurdles, this project launched mid November, 2022.

Product Designer and Client Actions product worksheet.

role

In my role as Principal Product Designer, I was in charge of the end to end design of producing MorAfrica's web pages some pages required specific programming knowledge to turn visual concepts into workable digital products. I partnered with the business owner and lead the design process and was a primary advocate for the user experience.

MorAfrica's homepage is the "face" of the company and a key driver to keep people interested in clicking through the site. The home and shop pages were the focus that Kevin wanted to improve on. The most frequent comment was that the original site was not trustworthy and is confusing to navigate.

Discovery

I gathered the stakeholders for a discovery meeting to discuss the project. We discovered that we needed to build a new e-commerce website with customized sidebar filtering specifically for products and artists. Include an event calendar so art seekers can see and experience the artwork in person since MorAfrica doesn't have an in person gallery.

We started with developing a business model and collaborated on a branding exercise to help build a new visual identity and to understand patterns to help build a new brand statement.

Research

I reached out to the CEO to understand MorAfrica's Competitors and target market. And to get a better understanding of their direct competitors? The products they carry. And their customer base.
‍
I identified MorAfrica's direct and indirect competitors and targeted the same customer base. I also analyzed their competitors online presence and evaluated their website functionality.

I looked at things like: How easy is it to navigate their site? How do they categorize their products? How is their artwork displayed?

I also researched online reviews and blogs to get more insight on the customer experience and identified their strengths and weaknesses. I used this information to focus on specific areas that MorAfrica can capitalize on.

Competitor and Inspiration research

Patterns & Mission Statement

With the branding synthesis I created patterns that helped create MorAfrica's mission statement.

Branding Synthesis Final Pattern Set

Together, in a working session we created the mission statement: "MorAfrica's mission is to introduce and share Africa's artistic expressions to art enthusiasts around the world, while empowering their artists and providing fair compensation and an underlying trusted partnership."

Sitemap

Sitemap information about the pages.

Wireframe Anatomy

Wireframe of Collections Shop

Sidebar

The sidebar helps the user to easily navigate the site while searching for specific product types, price, size and artist.

GIF of how sidebar filtering works on MorAfrica's website. For a full preview, please visit their website.

CMS Side bar search and filter. Filtering Special: Limited Edition

Outcome

The website revenue for MorAfrica in 2021 was null. The new site recently launched mid November 2022, since the launch MorAfrica has aligned new shows at different wineries and private venues with over 200 site visitors as of December 2, 2022.

Conclusion

I love clean look and ease of the filtering on the new website. I expanded my knowledge even further and tested my skills in Webflow. I think I made the perfect choice for creating the vision that Kevin wanted for MorAfrica and most importantly created an easy to use website for the user.

If I could change anything I would have really nailed down the alignment, page sizing, fonts and headers from the beginning. I also should have not started this project without having all the content, I lost several weeks and there were lots of stop and go's. However during my downtime took the time to research and learned how to build a sidebar filter with attributes using FinSweet.

As a result I expanded my knowledge in Webflow even further. This website and the CEO pushed me to my limits. I really enjoyed strategizing and learning something new.

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

Artist on Art

Bellerose Salon

Christiania Bikes America

Coca-Cola