Designer and Developer

4 months

Adobe Dreamweaver, Photoshop, Illustrator

The original site’s cluttered appearance left me with cognitive overload, so I envisioned creating an intuitive and welcoming user experience. I wanted to transform the website to better represent a restaurant with a promising mission and good food.

Background 

Prana is a health food spot located near the Miami International Airport and offers buffet style options.

According to HappyCow, it is now closed, but the website is still up and can be viewed here.

The restaurant’s cuisine has a lot of colorful vegetables and earthy grains, so I incorporated this into the new visual identity. 

An earthy and healthy color scheme that reflected the ethos of the restaurant seemed ideal. I went with warm, toasty browns and vibrant greens.

Although the original site has over 8 pages, I decided to condense the website into 4 pages so it would be easier for the user to navigate: Home, Menu, About, Contact. I then went to task mapping out the pages on paper.

Placing my final sketches into Illustrator, I transformed them into vector format. The icons were also custom made on Illustrator. I cropped and placed the photos on Photoshop. 

After creating mockups, I was ready to code the website into existence. I quantified the dimensions of each content block from the mockups, since exact numbers would be needed to code the site. 

With Dreamweaver, I knew I wanted the home banner to be transparent, but didn’t know how to do it. Now matter what I tried, the site preview never changed. It took some counsel to learn how to change the transparency value.  

The hosting platform didn’t have the font I initially wanted for the banner, so I had to choose a back up font, which was bulkier than what I would have liked.

I created a preference test to see if the new design had impacted the end user. I put the old home page and new home page side by side without detailing which was which. Much to my delighted surprise, every single tester preferred the new design. 

Many people called it cleaner. Others said it was more inviting and easier to digest. One pointed out what I had noticed, that it looked like the creator had just used a Wordpress template to make the site.

Conclusion 

I’m really satisfied with how the site came out. I was able to create a cohesive user experience that allows the user to discover the site without feeling overwhelmed. Having the changes confirmed in a statistically significant test makes me even more confident that I reached my goal of a website that effectively reflects the mission of a good restaurant and provides a smooth user experience.

This is where the idea that it was from an empty Wordpress template or such became more clear. The about page had no main content.

The Contact page was also blank. Instead, all of the contact information was crammed into the footer of the site, in addition to reviews and random information about yoga classes.

Thank you for viewing all the way to the end!

Hope you're not hungry now. 😄 🍛