top of page
La Penche Web prototype Mockup.png
Dance Studio Website

Education, website interface


4 Weeks


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.


La Penche Dance Studio


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.



Competitor Research


Site Flow


Paper Prototype

User Testing


Adobe Dreamweaver




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.  


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.

Design & Feedback

After gathering the insights from the users, I drafted the site flow, wireframe, and developed the paper prototype for the user testing. The feedback were collected and applied to the development of the digital prototype.


From the digital prototype in Axure, I drafted the main structure of each pages and developed the responsive website using HTML/CSS and Bootstrap. The fluid layout is adaptable to different devices include laptops, tablets, and smart phones.

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. 

Lapenche Logo.png

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.

Adjusted Siteflow.png

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.

Navigation DNBA.png
Web ABA.png
Graphical elements SJD.png
Class and Tuition MDP.png

The La Penche community

The users are divided into 3 different roles: the instructor, the student, and the guardian.

Image by Prince Akachi

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.

Image by Levi Meir Clancy

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.

Image by bruce mars

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.


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


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


The hidden navigation menu confused the users, and there were too much texts, which would not be read.


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.


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.

La Penche Web prototype Mockup.png

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.

La Penche Web prototype Mockup 2.png

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.

bottom of page