Case Studies → Febrer Arts
UI design and Front-End Development for a Boutique Arts Education Business
Febrer Arts is a rapidly growing arts education business which was in dire need of a web presence. The scope of the project was initially small, a single page static site. However, when analytics revealed an opportunity for more engagement, we went back to the drawing board. Our research showed three distinct user groups, with distinct needs, would be visiting the website: parents, students, and educators/educational institutions. The site would not only need to appeal to all three groups, but to allow the user to quickly identify which section of the site to navigate to and which of Febrer Arts’ many services were right for them.
The client and I determined that for their desire to have precise control and ownership, we would create a static site ourselves which the client could then edit and maintain.
The process started with brainstorming and sketching out the pages and wireframes on paper, then moved to wireframes in Adobe XD
Our MVP went live. We began collecting statistics, anayltics, and reports using both Google’s tools, our own testing, and real user reports of their experience with the site. The client also continued to add to the site and expand it.
A few problems emerged:
- As the site expanded, it became harder to navigate and find relevant information
- Users were not engaging much in terms of clicks or scrolls
- Far more users were accessing the mobile version of the site than had been predicted.
We went back to the drawing board. First, user stories were created to get to the heart of each user’s most important needs
A new set of wireframes was developed, this time with real-world data informing the design. Gone was the single page site, replaced with a simple landing page with a both a menu bar and a hero directing user types to their possible needs.
In addition to the new landing page, the site was split across 5 new pages.
We were able to reuse and refine componenets for the site
(pic of components: news cards, class cards, team cards, picture cards)
The results of the redesign? Both qualititave (google analytics) and quantitative (real user reports) analysis showed the site improved traffic, engagement, and even user pereceptions of the company. Code documentation was created to allow Febrer Arts to continue to maintain their site and to utilize the design system. By completely revisiting the initial design, Febrer Arts now has a solution that can scale with their growth.
(landing page screenshot)