Dance Studio Website
Education, website interface
Duration
4 Weeks
Purpose
A project for ITGM Introduction to Interactive Design class
to learn HTML/CSS language and experience the user-centered web design process.
To propose a solution for the communication challenges at La Penche Dance Studio in a form of responsive web prototype.
Partner
La Penche Dance Studio
Responsibilities
Researcher Interviewed La Penche Dance Studio staffs, researched competitors, analyzed the brand for user insights. Conducted user testing for feedback and adjustments.
Graphic Designer Created the site flow and wireframes that attend to the users' need and art-directed the visual language based on the brand.
Front - End Developer Wrote a responsive web prototype using HTML/CSS with Bootstrap.
Tool
Interviews
Competitor Research
Personas
Site Flow
Wireframing
Paper Prototype
User Testing
Axure
Adobe Dreamweaver
HTML
CSS
Bootstrap
Google Workspace
Adobe Photoshop
Adobe Illustrator
Key Takeaways
Hands on experience with real user: Working with the potential users of the website to understand their needs and product interaction.
Paper prototyping and usability testing: Building a paper prototype for the user to test the usability of the website design.
HTML/CSS and structure building: Learned to build a structured system for the website prototype.
Research
To ensure that the website tackles the correct issue, I interviewed the founder, instructor, front desk, and the parents of students at La Penche Dance studio to learn about their communication challenges. Further case studies on other dance studios' websites were also conducted to learn more on their success and failure.
La Penche Dance Studio
The challenge in our communication
La Penche Dance Studio locates in Chachoengsao province in Thailand. The studio offers courses in classical ballet, hip hop, and continuously sending their students to international competition throughout the year. It is also an examination center for Royal Academy of Dance.
With the support from the parents and the institute, the students are discipline with their class schedules but emergencies and compromise can happen. The communication between the instructors and students can be a challenge due to the lack of shared platform. A website is proposed to be a solution to this issue.
Seeing the challenge
Insights from the involved individuals
-
Some information got lost or altered.
-
Emergency and announcement happen but the communication channel is not fast enough.
From the user's challenges above and their needs in communication, I drafted a site flow and adjusted several times referenced to the user's feedback until I get the final flow in the diagram.
Case Studies
Existing solutions
There was a limitation to the research process because of the inaccessibility to the student profile page, but this analysis was based on the features of American Ballet Academy and the flow of layout in the dance academies’ main sites. Starting with the student site by ABA, the school provides a tutorial video, which might indicate the complexity of the site. There are many features, which can be combined and reduce the confusion users might encounter during the experience such as the student schedule registration and the payment process.
Additional features on other sites
-
Drop down menu are easily navigated with design elements of on/off button, which directs the user to the related pages.
-
Simple layout and motion elements, which support the page flow. Unifies the design with subtle values and lines.
-
Tuition and class detail allows the users to easily track the schedule and expenses.
-
The student profile section that contains important information regarding account balance, class schedule, registration, and payment options.
The La Penche community
The users are divided into 3 different roles: the instructor, the student, and the guardian.
Serene Waters 30 | Dedicated instructor
A full-time instructor at the studio, who responsible for 5 classes back-to-back. She is hoping to be able to connect with the guardians to report the student’s development, but could not, due to her tight schedule. Sometimes the younger students are having a sick week and she needed to cancel the class, but there usually are one or two who shows up due to error in notifying the guardian.
Penelope Colh 8 | Determined student
A grade 2 student in the RAD ballet curriculum. She likes to meet her dance friends at the studio and take a break from the school’s homework. She is looking forward to the competition next year. She loves share her dance photos with friends and family.
Jeter Miller 42 | Supportive guardian
He is an engineer who is in love with classical music. Taking care of two daughters, he shows up at every rehearsals. Jet doesn’t really understand the dance, but he wants to learn more about it to support his daughter's dance journey. Sometimes he has an emergency at work that challenges his daughter's schedule.
Sketches
First draft
The hand drawn sketches are used to check up with the users to give an idea on what the website might look like.
User Testing
Feedback
The users suggested that minimize the amount of text and emphasize the images would allow them to have a better time appreciating their children’s journey.
For the account profile function, both instructors and parents/students prefer to have everything set on one page for fast access and simplify the information so the navigation would be more convenient.
Paper Prototype
Week 2: Engaging prototyping
The live-size paper prototype was created based on the site flow drafted prior.
Starting with the paper prototype, I was able to work closely with the users to adjust my design without overwhelming them with the software.
User Testing
Feedback
The hidden navigation menu confused the users, and there were too much texts, which would not be read.
Comments
The students and parents prefer mobile banking as a payment method rather than using credit card. With the limitation of the platform, the process has gotten complex with QR code generation and real time money transfer tracking. This might call for a collaboration with financial organization.
Building the responsive digital prototype
Week 3: Make it interactive
From the user feedback, I built a digital prototype on Axure to see how the actual action can trigger different responses on the website.
Due to this project being my first HTML/CSS project, I studied the digital prototype to plan my element structure.
After the digital prototype is finished, I sent the link out to the users for testing. The feedback came back positive that the interaction seem straight-forward with minor adjustments in the wording.
The landing page with the school announcement about up-coming competition, examination, and student success.
The user can see details of the event when clicked into the icon.
From the user feedback, the users prefer mobile banking rather than the credit card due to the fear of data privacy. The payment summary is calculated and presented to the user in an easily digested way.
The landing page with the school announcement about up-coming competition, examination, and student success.
Coding
Week 4: Coding (and file prepping)
During the coding section of the project, I faced several challenges given this is my first experience with HTML/CSS.
Some of them being determining the image size, the element' alignment, deriving student login from instructor login, and building a calendar for the registration page. Changes must be made in the final design while maintaining the straight-forward call to action for the user as the solution for the project.
Another major part in this section go the project aside from the file management is the structure of the website. It is crucial to plan a proper structure for the fluid pages to be correctly displayed on different devices.
A fluid design
Originally for the laptop.
While the instructors use laptop as their main device at work, the students and guardians gravitate toward tablets and smartphones.
Final thoughts
What can be improved?
Despite the structure that aids the user's need, the devil is in the details. I realize there are some smaller elements that is crucial logistically such as the leading, a more compacted visual hierarchy, and the mobile banking evidence submission.. One of the bigger elements that can be developed is a better visual branding is needed as well as a more effective data visualization on the announcement page detail.
This prototype was proposed to the studio as a rough draft of how the site flow could be but it did not make it into the real world application.
