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. I needed to move fast work through problems quickly to meet a tight deadline to take the website live.
The process started with ideation and inspiration.
Wireframes were developed and progressed to high fidelity mockups as we nailed down the look and feel of the site.
The site went live. Although it was basically an MVP, it fullfilled all the clients needs for the time being. 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.
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 other pages.
Page Title: Arts Showcase Purpose: Increase followers
Page Title: About
Purpose: Build trust in Febrer Arts and put a face to the team
Page Title: For Organizations
Purpose: Centralize all the needs of Persona 3, the B2B customer of Febrer Arts
Page Title: Classes
Purpose: Quickly show class offerings for both Parent and Student users, and use images and buttons to encourage clicks
Page Title: About
Purpose: Providing focus for one of the core business offerings of Febrer Arts, portfolio prep, which research showed was the priority for most users of the site
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 wireframes were then created to meet both user needs and to aid the clients own ability to edit and maintain the site in the future.
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.