Website Redesign
for Arco Music Academy
Information Architecture, Prototype, UI
Deliverables
Arco Music Academy
Client
UI/UX Designer
My Role
1 UX/UI designer, 1 developer
Team
1 Week (design), 1 Month (development)
Duration
Overview
- Challenge
The official website of Arco Music Academy requires a new visual style and a redesign to improve its information architecture and user experience.
- Goals & Metrics
By building a responsive web experience, we hope to:
-
Create a new visual style to make the site look more professional and user-friendly.
-
Restructure the existing content and optimize website readability.
-
Improve the website navigation and build page-to-page redirects where necessary.
-
Add new features required by client.
The website is still under development. A draft could be found at http://www.arcomusic.com.au/
Visual Style Redesign
As the client had no idea how the website should look like, I created a series of visual styles for him to choose from. We finally selected a simple and lively design (option 4), which matches best with the target market of the academy: kids and teenagers.
IA Redesign
Existing Design
In the existing information architecture, the unorganized content made navigation difficult and inexplicit. Users could easily get lost or feel annoyed.
New Design
Based on the pain points, I refined a new site map. I also organized a card sorting with the website developer, the artistic director from Arco Music Academy and a faculty member to see how different people group information, and adjust the information architecture in a more proper way.
#1 Repetition of Content
The content on homepage was a direct copy and paste from some other categories. It resulted in an overlap between pages and a lack of proper nevigation for users.
#2 Mix of Information
Too much information was carmmed into single “About Us” page, including introduction of the academy, staff and programs.
#3 Irrelevant Pages
Some pages were not synthesized under proper categories, while some were out-of-date and would no longer be used.
#4 Ambiguous Hierarchy
The two programs were parts of AMA foundation. However, these three pages were displayed at the same level. It might cause misunderstanding for users.
After rounds of discussion, we finally reached an agreement on the design and took following actions.
-
Categorizing the content in response to main prospective user groups, including academy staffs, students (and parents), partners and job seekers.
-
Synthesizing related information under the same category.
-
Allocating proper amount of information on each web page.
-
Separating “Lessons” from other categories, as it was highlighted by the academy.
-
Fitting new features into specific categories for the exploration of new income sources.
Web Page Redesign
When working on the webpage redesign, I went through each page, figured out the pain point, provided new design and at the same time explained the reason to convince the client.
Example: Homepage
Conclusion
-
One of the challenges in this project was to convince the client of the importance of UX design. I explained the reason why each change should be made on the existing website, and the client was very supportive of the design process.
-
At the same time, by engaging the client and the faculty member (part of user groups) in some stages, I had a better understanding of their goals and needs. It yielded valuable insights that guided the project going forward.
-
The website is now under development. Working with the developer in a real-world project made me aware of the feasibility of my design and how we could improve the way it looked on different devices by responsive design.
-
In the next step, I would like to keep track of users’ interaction with the website by Google Analytics to understand what they will do, how they will achieve their goals, what their pain points are and provide next round of iterations.
Example: Lessons Page
Example: News Page
Example: Lessons Page
When working on the webpage redesign, I went through each page, figured out the pain point, provided new design and at the same time explained the reason to convince the client.