top of page
joanna.jpg

Joanna Ma Photography

A redesign for the most special moments in the Arizona Desert

​​

Finalized Website: https://joannamahl.com/

Tools: Figma

Brief: Redesign & rebuild professional site with modern and minimalist aesthetic.

Research: Competitor sites and portfolios, persona development, user journey map.

Client: A trendy graphic designer who does Wedding Photography as well. Her photographs reflect the importance of nature, beautifully posed moments, and she wants the site to have clean navigation with pale colors reflecting the Arizona desert.

Feature List: Feature photography in interactive ways, clear and reliable navigation,  frequent call to action for consultations and navigation, organized content for easy browsing and an all-in-one portfolio, inquiry, and blog site.

Deliverables: Wireframes, Low-fidelity site and mobile. Actual site changes made using Showit platform.

Client

joanna_client_profile.png

My client Joanna Ma wanted an improved website for her Professional Wedding Photography portfolio. Joanna emphasized that she wanted to have a distinct hero banner, more interactivity and animation, more call to actions, and straightforward user flow while adding more navigation items. All of these things would help contribute to the potential of every visitor's wedding, engagement, and lifestyle stories.

Mood Board

joanna_moodboard.png
Screenshot 2024-09-04 at 15-55-55 Joanna Ma Photography – Figma.png
Screenshot 2024-09-04 at 15-55-55 Joanna Ma Photography – Figma.png

I created a moodboard using the professional photos the client (Joanna) has taken to deeply understand the overall aesthetic, mood, and personality in Joanna's pictures. We deeply brainstormed on how to match the website palette and font with the natural desert backdrops. The range of colors represent the Arizona desert that Joanna loves while being calming and easy-on-the-eyes, accurately reflecting the subjects, stories, and emotions in her photos.

Persona & User Journey Map

joanna_persona.png
journey_map.png

Based on the user research conducted, I focused on:

​

  • Integrating social media into site to extend experience of client's photos and posts elsewhere

  • Call to actions such as "inquire today" or "about me" buttons will help encourage clickthrough

  • Suggesting highly curated work to be displayed to create the best impression

  • Ensuring clear navigation at all times for user ease (sticky navbar or other)

  • Prevent page lengths from being overly long to improve user enjoyment while browsing

  • Allowing client work to appear as large images to help maximize the quality and details in them

  • Incorporate interactivity in gallery views (sliders) or tiled display for user ease

  • Avoid cluttering and crowding pages to stressing or overwhelming user

  • Include testimonial sections with sliders to bolster client's reputation

  • Keep navigation shallow, max 3 pages from Homepage to reduce browsing fatigue

  • Emphasize the client's voice, work, and personality to strengthen connection with user

  • Breaking up and clearly organizing pages with more information/ text (ex. investment & about pages)

  • Designing inquire form to be simple and straightforward

Wireframes

For all screens, I designed four unique layouts with various features. There is emphasis on the frequent use of large images in banners, sliders, and sections to let the client's work speak for itself while complementing with the writing she would use. In addition, the designs feature generous padding on either side of the screen to help keep the site feel clean, uncluttered, and luxurious.

Home

Home

joanna_home_wireframes.png

Key points for Homepage examples:

  • Draw attention towards the logo with the client's name to keep brand consistency

  • Each design has a prominent hero capture the user's attention immediately.

  • Content is sectioned to make information and photographs easy to follow.

  • Navigation options in footers for user ease and contain call to actions and social media links.

Portfolio

joanna_portfolio_wireframes.png

Key points for Portfolio examples:

  • Tested hero placements to encourage layout consistency and browsing spacing.

  • Need to feature three categories of albums (weddings, engagement, lifestyle).

  • Experimented with preview image link to album page,  reducing overall page length.

  • Include a testimony section to strengthen prior photoshoots with customer satisfaction.

About

wireframe_about.png

Key points for About examples:

  • Prioritizing clean and professional ways to portray the client (photographer).

  • Arrangement of sections do not distract from the photographs used to tell the client's story.

  • All designs have more sections added to expand on client's story and expertise.

  • Sections can be swapped to client's preference and call to actions required.

Investment

wireframe_investment.png

Key points for Investment examples:

  • Clear and concise text formatting to best convey session pricing and details.

  • Text-heavy sections should not feel crowded or cluttered.

  • Clearly correlating images with relative text, headers, and subheaders.

  • Include an inquire today call to action below package/services section/s

Album

wireframe_album.png

Key points for Album examples:

  • Page is relatively deep in the user flow (Home > Portfolio > Album)

  • Layout consistency with other pages and remain short reduce to browsing fatigue.

  • Maximize user interest with an Inquire call to action.

  • Album images can feature text upon hovering to save space.

View

wireframe_album_view.png

Key points for View examples:

  • This is the deepest page (Home > Portfolio > Albums > View) and needs to stay simple.

  • Most formats give additional context to the event and story of the album.

  • A tiled, pinterest-like display helps relieve users from clicking or sliding.

  • Slider options give user interactivity and control on how much they want to see

Inquiry

wireframe_inquire.png

Key points for Inquire examples:

  • Client uses many forms to gather potential customer information.

  • All layouts to explore ways to fit all forms without making the page too long.

  • Most form layouts are relatively top-to-bottom as the standard form user flow.

  • Images and heroes help bring more character but not distract from purpose of the page.

FAQ

wireframe_faq.png

Key points for FAQ examples:

  • FAQ can be dry, I wanted to balance user ease with user interactivity. Interactive elements

  • Accordion help reduce page space for user who have to a specific question.

  • Alternative- two columns with in-depth answers that are switched out on question click.

  • Special emphasis on maintaining clear and consistent spacing for readability.

Under construction, please check back soon

More content will be uploaded on this page to reflect completed project status. Thank you for looking, and please revisit this page soon!

bottom of page