melewdesign
a visual ux design portfolio | by Meghan Lewis
BANNER-md.png

Megan Diana

 

 

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


Megan Diana - Home
 
MD-Home-Mobile.png

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.




MD-Events-Banner.jpg
MD-Recording-Banner.jpg
MD-Projects-Banner.jpg
 

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.


Megan Diana - Home



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 delievery 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.


Megan Diana - About
Megan Diana - Project
Megan Diana - Video
Megan Diana - Music



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