Septien Entertainment Group Website Redesign

They needed an upgrade.

I was reaching the end of my summer internship with The Septien Entertainment group, an established music school which had a hand in training many artists at the early stages of their career (such as Beyonce, Demi Lovato, and more). The director of marketing, my supervisor, and I were discussing the state of the current website for Septien. It was horribly outdated – the site had probably not been updated for years. I had already impressed the Septien staff with my quick turnaround for solid designs. I mentioned my previous experience in developing a simple, interactive, digital version of my newspaper’s special orientation edition, called Reveal Your Future. I was learning how to develop simple websites through applying my newly found skills in working with Javascript, CSS, and HTML. I did not have much experience developing for a more serious project, but I had proven my eagerness to learn and ability to deliver results. I signed a contract with Septien to deliver a fully functional website by Janurary, a critical period for attracting new students for the beginning of the next semester. The goal was to increase conversions on the site through a more attractive, intuitive, and engaging presentation of Septien’s authority as the best vocal and music training schools in the Dallas, Texas area.

User Surveys

Before the design process began, it was important to understand how the current customers felt about the current Septien Entertainment Group website. What did they like, what did they dislike? The major findings surrounded the lack of updated information within the Septien site. Futhermore, some were confused with the overall layout of the website – it was hard to find the information they needed.

 I would like to look up songs from the other artists, more history on the teachers of Septien and the background they have, video gallery, event calendar, etc.

Understanding customer mental models

Based on conversations with the marketing director and review of the customer surveys, three main use cases for the Septien website emerged:

• Providing information for new customers/conversions
• Keeping up to date with the latest news
• Booking a new lesson

Customers expressed frustration in the circular and maze-like information structure of the current website. A top priority was to clean up the information architecture of the website. The old page had too many high-level links.

In order for the redesign to be successful, the new information architecture must support the three main ways in which customers want to interact with the Septien Entertainment Group website.

We developed a more functional sitemap with these main sections:

• About (What is the Septien story?)
• Services (What can Septien do for you?)
• What’s Happening (social media, news)
• Contact Us (how can I get started?)

Initial mock-ups

After some initial wireframing, I began synthesizing low fidelity mockups, filtered down from the loose structure of the original Septien Entertainment Group website. I kept my designs in unison with the Septien aesthetic (the same style in which I created print and web designs for Septien in my previous internship with them).

 Refining the Design

After one design was approved, we played around with different sitemaps and tested them among different customers. I drafted page layouts for each type of page the site would have:

The mockups were created following the idea of designing mobile first. In other words, keep the mobile platform first and foremost in mind when making overall design decisions. According to demographic data collected, most users were browsing the Septien Entertainment Group website from a mobile platform, an important fact that drove many of our design decisions.

Important design decisions reached:

• Keep the design as minimal and professional as possible
• Bring news and updates to the front page of the website
• Include “Take a Tour” action buttons in strategic locations

Code

Despite having a foundation in Javascript, HTML, PHP, and CSS, I had never built my own WordPress theme from scratch. I love to learn by doing. Within a few weeks of late night study sessions, I learned the general method of constructing a custom WordPress theme. I also had not fully grown accustomed to utilizing media queries in order to create a responsive design. Some challenging code/functional aspects of the site were:

• Adding custom post types
• changing page templates
• Creating a seamless responsive design

After a few iterations, however the design began to come together:

The Launch: Success

Over the span of four months, I was able to revamp the old Septien Entertainment group website into a product that:

• Delivered both a intuitive mechanism for converting new customers
• Served as a hub for updated news about Septien.
• After delivering the product on time, conversions increased – from about 0 to more than 2 new leads every day – and website bounce rates lowered by over 25% on the first day of launch.

Visit the current website at theseptiengroup.com

What I learned

The implementation of the design provided the most difficulty. I worked on the project while balancing a part time job and a full load as a student, so time management was key. I was able to learn different skills quickly, which helped in my ability to deliver the website on time.

However, there are some aspects of the project which gave me a perspective on website design and development:

• A team of one designer/developer is not ideal for larger projects – I constantly questioned the efficiency of my code and the design decisions. Furthermore, the Septien site demanded a lot more time and resources than initially projected. Another teammate would have provided invaluable insight, opinion, and another set of hands to improve and tweak the final design.
• The client will tweak your final design if they can – I designed many aspects of the site template to be used in certain ways. However, the client used the template different ways than expected. For example, months after launch of the site, I noticed some parts of the body text were changed to be center aligned, against my best judgement.
• The moving target problem – The client’s needs (and wants) are always moving and growing – something designers must take into consideration constantly.