Website and branding redesign

Little Eagle Photography is a small photography studio lead by Ana Orlic, in Zagreb, Croatia. In June 2020, she approached me with a need of a website redesign. Previous design didn't suit her needs, and she was hoping to get a cleaner, more modern look for her website, as well as to boost her conversion rates.

Background

Little Eagle Photography is a name for Ana Orlic’s photography business. She is a young, talented photographer with a passion for travelling, yoga and summer.

Her initial website started as a way of showcasing her work online, an online portfolio she can send to clients when necessary. However, eventually she developed her style and wanted to go for a website look that speaks more about her work and about her services as well. Website is available at: https://littleeaglephoto.com/

Challenges

Initially, Ana came to me with a need to primarily freshen up the visual design of her existing website. She felt it didn’t look professional enough and that her photography doesn’t stand out enough. So, the visual design issue was the first on the list to solve.

After initial conversations and research, I've established few additional problems that needed to be worked on, connected mainly to user experience. When I brought these up with Ana, she was open to the idea of having me work on them. Mainly the issues were as follow:

  • The navigation on the original site was clunky (example, most pages had no "back" button; there wasn’t a clear indication if the page is scrollable or not)
  • There was no clear way of finding Contact information, nor the exact services of Little Eagle photography, so users would leave the website before they would step into contact.
  • There were some issues in the visibility of some parts of the text
  • There were some consistency issues between this website and Clients travel blog, which was also connected to it.

Solutions

In short, visual design came first, and it all started with the new logo. Ana and I discussed main aspects of her photography style, and just by taking inspiration in her work, I was able to come up with a new logo and visual style for the website that she felt spoke more about her.

"About me" information has been moved into the "Home page", to provide visitors with immediate context of who they might be working with. Also, a section about Little Eagle services has been added, along with the Contact information. Links to Gallery have been moved to more intuitive call-to-action places.

Ana wanted to avoid using the contact form, so contact information was added in several places where users are most often going to look for them: hamburger bar, footer and next to the services section.

Readability issues have been resolved with the use of different photographs and color gradient overlays when necessary.

Hamburger menu was moved to the right, to be cohesive with the Clients second website. The entire menu has been redone, so it's more clear to navigate with. Contact information was also added there.

Process

The process began with gathering information about why and what exactly Ana wanted to change about their website. After gathering her opinions and points of views, I've done online research about usability issues that I've come across while browsing the original website. We did not have the budget for proper user testing at any phase, so I did the best in my ability with the data that was already available.

The goal of the chosen color palette was to include calm shades that can be used in various places to provide comfort for the eyes and to connect the photographs with the text, but also to give some highlighting, punchy choices that can be used in call-to-action situations.

As this was my first redesign project of this scope, naturally it wasn’t all perfect, but it proved to be a great learning experience. Mainly, at this point I didn’t know enough about how the development of the website is going to work, so I lacked some aspects of design preparation and the development took longer than it should have.

Tools

For wireframing and design: Figma

For illustration edits: Adobe Illustrator

For developer handout: Figma and Mega

For planning and research: Mega, Asana and Google Docs

The mockup used for the headline of this portfolio article came from Anthony Boyd.