Design & Implementation of Dance Venue
This project is part of the Web Development and User Experience module at Birkbeck. The task involved working on a website project for a real client, from the UX and UI design to the eventual implementation of the key pages.
I worked with the team at Dance Venue, an Oxford-based dance studio, on the first iteration of their website. This experience allowed me to work in areas such as user-centered design, web usability, web standards, accessibility and project management.
Skills: Competitor Analysis, User Research, Information Architecture, Wireframing, Prototyping, Visual Design, Usability Testing, Web Development, Responsive Design.
Tools: Adobe Xd, InVision, Balsamiq, draw.io, Xtensio, Brackets, HTML5, CSS3, JavaScript, PHP.
Design Process
1. RESEARCH
Competitor Analysis
A competitor analysis of three of dance venue’s most important competitors was conducted to gain insights into current market trends along with an inventory of what they offer. See competitor analysis
Target Audience
The target audience is anyone aged 16 or over who has an interest in dance or any other physical activity regardless of the reason. The dance studio offers them a range of classes of different styles that will surely fit to their ages.
User Research
Individual interviews were conducted with potential users in order to understand their needs and goals and then validate or invalidate initial assumptions based on the competitor analysis.
Affinity Map
To analyse the data gathered from the interviews, I went through my notes to create an affinity map in order to identify common themes such as behaviours, motivations, goals, needs, frustrations, challenges, amongst others.
Key insights from the affinity map:
- The ideal site experience is quick and free of complexity. Users expect to have easy access to classes, timetable and contact info.
- For those who are new customers, it is important that the website contains information on what to wear, what to bring and how classes are structured.
- Most of the participants showed a great interest in joining dance-related events.
- Among the first things that users look for when first arriving on the site are: services, benefits and client reviews.
- Good quality images and demo videos are really important when considering to choose a product or service.
- Users get bored and leave a site when they don’t find what they are looking for and when there is overwhelming content.
- What users liked the most about some competitors websites was the intuitive navigation, succinct content and the clean visual design.
Personas
The affinity map allowed me to quickly identify patterns and create three personas that represent the different types of potential users of Dance Venue. This also was very helpful to keep the focus on developing the core features of the website during the design process.
2. DEFINE
Information Architecture
Card Sorting
Before started creating a sitemap, I conducted a simple card sorting exercise with test users to determine how people organise the content of the site. This helped me to generate an overall structure for the information, as well as have options for the navigation. I wrote the names of all required web pages on sticky notes and got the participants to group them.
Sitemap
Based on the card sorting activity and previous user research, I created the below site map to describe the content structure of the website in a hierarchical way. This helped me to have an idea of how users may navigate the site.
Task Flows
Following the sitemap, I created two key tasks flows based on the personas. The task flows below show the different users’ paths they will be able to take through the site. The ‘events’ and ‘classes’ pages are assumed to be the most popular among users, and as such they require prominent signposting so that users can get to them very easily.
Concept Design
Based on the insights gained from the user research and competitor evaluation, I started generating initial ideas with simple sketches on paper to create a concept design that meet the users’ and business’ needs.
Low-Fidelity Wireframes
Based on the previous activities, I created digital low-fidelity wireframes describing the page structure, type of content, tasks flows and site structure.
3. DESIGN
High-Fidelity Prototypes
Now that there is a direction to pursue, I created high-fidelity wireframes to go into more detail by adding real content. This allowed me to get a better idea of what the UI would look like, making it easier to discuss the progress with the client and also do usability testing.
See interactive prototype on InVision.
4. FINALIZATION
Usability testing
In this last phase of the project, a second usability test was conducted where the high-fidelity interactive prototype was used. The test was designed to assess usability, navigation, content and the key task flows.
Overall, the findings in this study were favorable and showed that users quickly found what they were looking for, and generally had a pleasant experience with the Website despite some usability issues.
Web Development
I implemented a total of 8 web pages using HTML5 and CSS3. For interactive elements such as the contact form and mailing list, I used JavaScript and PHP. I also made the site responsive by using media queries and flexbox layout.