Megan Diana
UX/UI, WEBSITE DESIGN
—
Marvelous music moves most! Especially if the music is composed by Megan McGeorge!
PROJECT BRIEF
After working together on the Piano. Push. Play. project, Megan contacted me to create a simple website for her music releases and projects to showcase. Using the logo as inspiration, we created photography with a focal color and kept everything very simple. She didn't want a lot showcased yet, but wanted a site created on Squarespace for ease of use. We had a weekend to come up with a concept, create the site and launch it within the week after. Generally working on such a tight deadline can create some interesting outcomes, but since we communicated our needs to each other so quickly, the site came together really well.
FUN FACTS
Megan McGeorge contacted me because of our work together on her Piano. Push. Play. project. Pink is Megan's favorite color and we used it throughout the site to emphasize certain elements.
Contrary to popular belief, you can utilize HTML, CSS, JQuery, and javascript code in Squarespace. Doing so is an advanced modification and should be used sparingly. (Their customer support will not provide any code help, i.e. you're on your own if you add any external code.) Sometimes though, the code will even cease working and the reason for this may be due to specific template and CMS updates. Fun times!
THE FINE DETAILS
TIMELINE: Project began in 2016
ROLE: UX/UI designer, Web designer
SCOPE: UX/UI Design, Website creation, Page layout
TOOLS: Adobe Illustrator, Adobe Photoshop, Squarespace
ASSETS: Squarespace Pages & Design, PNGs
Simplicity is key...
Beginning work on Megan's site, we came together on a singular concept, simplicity is key in showcasing her music. First and foremost, she is a pianist and composer and she really wanted to emphasize this. Ultimately, we both decided that black and white images with a small splash of color (pink) was the direction to go. We came to the idea that the contrast of the simplistic site and the unchanged videos, her message would come through and be emphasized through use of spot color.
USERS & AUDIENCE
The target users this website are primarily music lovers, fans, and concert goers. These users specifically are looking for a seamless experience and an easy to navigate site to find more information about Megan's releases. They want to be able to view the information they need quickly and easily.
Due to their preference on being able to view the site quickly and easy, we decided to use Squarespace as a CMS due to the simplicity with setup, maintenance being handled externally, and relative costs.
TEAM & ROLE
With my previous experience of creating seamless online experiences using Wordpress, as the lead UX/UI designer I led the team in making changes requested from users and the owner of the site.
I coordinated and led the design of the site including: visual design, interaction, recommendations on content, the user journey and research, and some minor architecture.
DESIGN PROCESS
Spending a weekend putting together all the assets, we were able to launch the site the following Monday. Megan provided the images, I manipulated them to fit within her brand color scheme. We walked through connecting the domain and everything was set to be live by launch.
UX/UI DESIGN
The objective of the website and the interface was to keep the user/customers informed and allow for an easy way to see what Megan was up to with her music. We accomplished this by keeping the overall design very visual with large photography, strategic use and placement of text, vibrant color use, and an overall playful look that encourages interaction.
Once we landed on a fully customizable template within Squarespace that could provide the level of enhancement we wanted, it was also important that after installation, it would be easy to change and customize on the fly. Knowing she would be able to continue creating content for the site after delivery was also a positive.
Inspiration for the site came from Megan's own library of photography. The background is a simple white with an occasional banner picture to differentiate sections. Using hot pink as a occasional secondary color is used as well to emphasize photos, lines/rules, and important sections. Keeping the overall design simple allows for the music to speak for itself.
OUTCOME & RESULTS
Even with the quick turn around time, we were able to launch the site rather quickly. She was ultimately very pleased with the site and continues to advertise it alongside creating her music.
As result of working with this client, I learned that when designing a site on a quick turnaround, the best course of action is to keep the project scope small and provide a timeline if they wish to know how long additional services would take.
CREDITS
Client: Megan McGeorge
UX/UI Designer: Meghan Lewis
Photography: Megan McGeorge, Benji Vuong
©Megan Diana McGeorge | www.megandiana.com