Creating a Website & Social Media Makeover of Songbirds Music
Improving user engagement, brand identity, and the social presence of Songbirds Music by building a cohesive social media page and revamping the website for a smooth customer experience.
Role:
UX Designer
Program:
TBD by Design for America
Timeline:
14 Weeks
Team:
Kiana Duggal, Allie Kim, Lizet Barrera
Tools:
Figma, Figjam, Canva, WordPress, Google Suite
Creating a Website & Social Media Makeover of Songbirds Music
Creating a Website & Social Media Makeover of Songbirds Music
Improving user engagement, brand identity, and the social presence of Songbirds Music by building a cohesive social media page and revamping the website for a smooth customer experience.
Role: UX Designer
Program: TBD by Design for America
Timeline: 14 Weeks
Team: Kiana Duggal, Allie Kim, Lizet Barrera
Tools: Figma, Figjam, Canva, WordPress, Google Suite
THE PROBLEM
THE PROBLEM
THE PROBLEM
Songbird Music's Lack of Organization and Harmonious Aesthetics in its Platforms Dims its Presence to Potential Clients.
Songbird Music's Lack of Organization and Harmonious Aesthetics in its Platforms Dims its Presence to Potential Clients.
Website pages are "cluttered", disorganized, and have multiple typos and irregular layout styles.
Website pages are "cluttered", disorganized, and have multiple typos and irregular layout styles.
Client finds keeping up with content creation time-consuming and difficult to manage with other workload.
Client finds keeping up with content creation time-consuming and difficult to manage with other workload.
Website and social media visuals are inconsistent with the business brand and lack aesthetic appeal.
Website and social media visuals are inconsistent with the business brand and lack aesthetic appeal.
How might we create an engaging, minimal website and maintain a consistent social media platform that communicates the family-centered nature of Songbirds Music to attract new customers?
How might we create an engaging, minimal website and maintain a consistent social media platform that communicates the family-centered nature of Songbirds Music to attract new customers?
OUR SOLUTION
OUR SOLUTION
OUR SOLUTION
Organized, Visually-Aligned Website Pages with Seamless Navigability and Sufficient Content.
Organized, Visually-Aligned Website Pages with Seamless Navigability and Sufficient Content.
Organized, Visually-Aligned Website Pages with Seamless Navigability and Sufficient Content.
Our goal for the new website was to make it easily navigable while having aesthetically pleasing visuals. We hoped to minimize and organize the information by adding more content-specific tabs to the menu and creating consistent layouts throughout the pages.
Our goal for the new website was to make it easily navigable while having aesthetically pleasing visuals. We hoped to minimize and organize the information by adding more content-specific tabs to the menu and creating consistent layouts throughout the pages.
Our goal for the new website was to make it easily navigable while having aesthetically pleasing visuals. We hoped to minimize and organize the information by adding more content-specific tabs to the menu and creating consistent layouts throughout the pages.
Clean & Ready-to-Use Social Media Templates that Maintain Songbird Music's Brand Identity.
Clean & Ready-to-Use Social Media Templates that Maintain Songbird Music's Brand Identity.
Our team hoped to reduce the amount of time our client has to spend designing new posts on her social media page by providing her with pre-made templates she can quickly customize to her liking. As for the style, we chose to create minimal and playful designs that would fit well with the business brand and values.
Our team hoped to reduce the amount of time our client has to spend designing new posts on her social media page by providing her with pre-made templates she can quickly customize to her liking. As for the style, we chose to create minimal and playful designs that would fit well with the business brand and values.
RESEARCH FINDINGS: SOCIAL MEDIA
RESEARCH FINDINGS: SOCIAL MEDIA
RESEARCH FINDINGS: SOCIAL MEDIA
Observations from Client's Instagram Page:
Observations from Client's Instagram Page:
Aligns with the warm, friendly, and educational business values.
Page is slightly unprofessional.
Most posts seem made for current families, not new visitors.
Inconsistent posting.
Disorganized highlights section.
Messy and outdated highlights make the page hard to navigate.
Aligns with the warm, friendly, and educational business values.
Page is slightly unprofessional.
Most posts seem made for current families, not new visitors.
Inconsistent posting.
Disorganized highlights section.
Messy and outdated highlights make the page hard to navigate.
RESEARCH FINDINGS: WEBSITE
RESEARCH FINDINGS: WEBSITE
RESEARCH FINDINGS: WEBSITE
Takeaways from Competitive Analysis and Heuristic Evaluation:
Takeaways from Competitive Analysis and Heuristic Evaluation:
Use a clean and minimal visual style with consistent colors, imagery, and typography.
Keep navigation simple and ensure all important links work reliably.
Present concise content that clearly explains “why us" and highlights concrete benefits for children and parents.
Make pricing transparent and easy to find.
Build trust by prominently featuring testimonials.
Support users with designated FAQ and Contact pages.
Use a clean and minimal visual style with consistent colors, imagery, and typography.
Keep navigation simple and ensure all important links work reliably.
Present concise content that clearly explains “why us" and highlights concrete benefits for children and parents.
Make pricing transparent and easy to find.
Build trust by prominently featuring testimonials.
Support users with designated FAQ and Contact pages.
Insights from Collaborative Post-It FigJam Annotations:
Insights from Collaborative Post-It FigJam Annotations:
Insights from Collaborative Post-It FigJam Annotations:
Overwhelming information in the home page.
Disorganized and misplaced content.
Menu needs to be broken down into more tabs for better navigability and organization (add Contact and FAQ section).
Inconsistent use of text fonts.
Many grammatical issues and typos, decreasing credibility.
Content lacks proper hierarchy.
Parts of the website are text-heavy, causing readability and content-overload issues.
Overwhelming information in the home page.
Disorganized and misplaced content.
Menu needs to be broken down into more tabs for better navigability and organization (add Contact and FAQ section).
Inconsistent use of text fonts.
Many grammatical issues and typos, decreasing credibility.
Content lacks proper hierarchy.
Parts of the website are text-heavy, causing readability and content-overload issues.
IDEATION & WIREFRAMES
IDEATION & WIREFRAMES
IDEATION & WIREFRAMES
Aligning Social Media Templates with The Client's Tone/Content Type & Re-Structuring the Website Visuals & Information.
Aligning Social Media Templates with The Client's Tone/Content Type & Re-Structuring the Website Visuals & Information.
Transforming our Rough Visualizations into Website Wireframes & Shifting from Initial Sketches to Lo-Fidelity Template Designs.
Transforming our Rough Visualizations into Website Wireframes & Shifting from Initial Sketches to Lo-Fidelity Template Designs.
THE RESULTS: SOCIAL MEDIA
THE RESULTS: SOCIAL MEDIA
THE RESULTS: SOCIAL MEDIA
Monthly Schedules Made Easily Shareable with Customizable Planner Templates.
Monthly Schedules Made Easily Shareable with Customizable Planner Templates.
We provided the client with clean and efficient scheduling templates to make her event-planning process manageable, while also making class calendars more accessible to parents.
We provided the client with clean and efficient scheduling templates to make her event-planning process manageable, while also making class calendars more accessible to parents.
Monthly Schedules Made Easily Shareable with Customizable Planner Templates.
We provided the client with clean and efficient scheduling templates to make her event-planning process manageable, while also making class calendars more accessible to parents.
An Assortment of Unique Templates Ready for Use.
An Assortment of Unique Templates Ready for Use.
The client can choose from a variety of options, having a specific template made precisely for the type of content she wishes to add to her social media page, such as FAQS, reminders, and even customer testimonials.
The client can choose from a variety of options, having a specific template made precisely for the type of content she wishes to add to her social media page, such as FAQS, reminders, and even customer testimonials.
An Assortment of Unique Templates Ready for Use.
The client can choose from a variety of options, having a specific template made precisely for the type of content she wishes to add to her social media page, such as FAQS, reminders, and even customer testimonials.
Adding a Playful Asset to the Brand Identity:
Adding a Playful Asset to the Brand Identity:
Since our client's business is catered for young children, we wanted to implement a fun, family-friendly tone to the visuals of the social media templates. Therefore, we designed some simple, decorative stickers that aligned with the overall brand aesthetic to make the posts more colorful and inviting.
Since our client's business is catered for young children, we wanted to implement a fun, family-friendly tone to the visuals of the social media templates. Therefore, we designed some simple, decorative stickers that aligned with the overall brand aesthetic to make the posts more colorful and inviting.
THE RESULTS: WEBSITE
THE RESULTS: WEBSITE
THE RESULTS: WEBSITE
De-cluttering & Enhancing the Homepage
De-cluttering & Enhancing the Homepage
Before:
Before:
After:
After:
Maintaining Focus & Organization by Splitting the About Us Page.
Maintaining Focus & Organization by Splitting the About Us Page.
Before:
Before:
Designing a Navigable, Clean & Transparent Music Classes Page
Designing a Navigable, Clean & Transparent Music Classes Page
Before:
Before:
After:
After:
With these updates, our team enriched the client's website with minimal, organized content and aligned it with the brand identity. Ensuring consistent typography, price transparency, and grammatical fixes also allowed for the business to build credibility and readability.
With these updates, our team enriched the client's website with minimal, organized content and aligned it with the brand identity. Ensuring consistent typography, price transparency, and grammatical fixes also allowed for the business to build credibility and readability.
OBSTACLES ALONG THE WAY
OBSTACLES ALONG THE WAY
OBSTACLES ALONG THE WAY
Our client originally wanted us to replace her current class make-up scheduler, but that required back-end knowledge we were not skilled with. Additionally, changing to a different platform would mean it would affect client familiarity navigating the new interface, and we'd face issues integrating it with WordPress.
Our client originally wanted us to replace her current class make-up scheduler, but that required back-end knowledge we were not skilled with. Additionally, changing to a different platform would mean it would affect client familiarity navigating the new interface, and we'd face issues integrating it with WordPress.
Since the client was not tech-savvy, we struggled with figuring out how to give her the social media templates in a way she would be able to use them without much difficulty. This setback led us to perform extra steps in handing over the final designs in a format that would work with the client's understanding of the tools.
Since the client was not tech-savvy, we struggled with figuring out how to give her the social media templates in a way she would be able to use them without much difficulty. This setback led us to perform extra steps in handing over the final designs in a format that would work with the client's understanding of the tools.
Originally, we planned to build the client's new website on a staging site on WordPress for better integration. Due to some platform ownership and accessing issues, however, we resorted to a less ideal option of creating individual draft pages for each of the updated designs.
Originally, we planned to build the client's new website on a staging site on WordPress for better integration. Due to some platform ownership and accessing issues, however, we resorted to a less ideal option of creating individual draft pages for each of the updated designs.
REFLECTION
REFLECTION
REFLECTION
1
Accept Redirection In Case of Unplanned Events.
Accept Redirection In Case of Unplanned Events.
Throughout this project, our team faced many unexpected obstacles. However, these issues did not stop us from moving forward with our goals. Although we had to adjust our timeline to account for them, we still found solutions to face these issues and successfully completed our client's new website pages. Ultimately, we learned to prioritize finishing the more important aspects of the project instead of dwelling on the ones we missed. Things won't always go as planned, but it is up to us to determine what comes next during times of crisis.
Throughout this project, our team faced many unexpected obstacles. However, these issues did not stop us from moving forward with our goals. Although we had to adjust our timeline to account for them, we still found solutions to face these issues and successfully completed our client's new website pages. Ultimately, we learned to prioritize finishing the more important aspects of the project instead of dwelling on the ones we missed. Things won't always go as planned, but it is up to us to determine what comes next during times of crisis.
2
Prioritize Visual Consistency.
Prioritize Visual Consistency.
When you are in teams that involve having everyone play the same role (e.g. designers), it can be difficult to maintain consistent work due to everyone's different styles. To ensure we created cohesive designs for our client during the template-making and website revamp stages, our team decided to establish style guidelines and pre-plan our design strategies. Discussing such things beforehand helped us distribute the different design tasks amongst each other without us having to worry about producing work with similar styles.
When you are in teams that involve having everyone play the same role (e.g. designers), it can be difficult to maintain consistent work due to everyone's different styles. To ensure we created cohesive designs for our client during the template-making and website revamp stages, our team decided to establish style guidelines and pre-plan our design strategies. Discussing such things beforehand helped us distribute the different design tasks amongst each other without us having to worry about producing work with similar styles.
3
An Informed Client Makes a Successful Product.
An Informed Client Makes a Successful Product.
During these projects, it can be easy to get carried away with the process and neglect keeping your client in the loop. But at the end of the day, you are designing for your client and their preferences, not for yourself. By establishing weekly meetings with our client and informing her throughout the whole process, our team better-understood her needs and if we were moving in the right direction with the project. Frequently communicating with our client made the rest of the design process easier because we knew our final product would have her approval.
During these projects, it can be easy to get carried away with the process and neglect keeping your client in the loop. But at the end of the day, you are designing for your client and their preferences, not for yourself. By establishing weekly meetings with our client and informing her throughout the whole process, our team better-understood her needs and if we were moving in the right direction with the project. Frequently communicating with our client made the rest of the design process easier because we knew our final product would have her approval.
What would I do differently if I had the chance?
What would I do differently if I had the chance?
Change the Main Street Sites portion of the website: At the time, we could not afford to make drastic changes to the scheduling page because the client was actively using it to track her classes, registration, and attendance. But with more time, we would have learned the workings of the Main Street Site and created an improved visual aesthetic that matches the overall website branding.
Perform user testing: Due to a tight timeline and not having the new website built on a proper staging site, we were unable to run trials on its effectiveness. Through an outside perspective, we would have gained an understanding of what the new website designs fall short of, allowing us to see issues we might have missed in the earlier stages.
Change the Main Street Sites portion of the website: At the time, we could not afford to make drastic changes to the scheduling page because the client was actively using it to track her classes, registration, and attendance. But with more time, we would have learned the workings of the Main Street Site and created an improved visual aesthetic that matches the overall website branding.
Perform user testing: Due to a tight timeline and not having the new website built on a proper staging site, we were unable to run trials on its effectiveness. Through an outside perspective, we would have gained an understanding of what the new website designs fall short of, allowing us to see issues we might have missed in the earlier stages.
Thank You for Reading!
Check out my other project, as well:
BACK TO TOP