Project Overview

Dorothy is a feminist photographer whose focus is on capturing candid shots of empowered women in their communities.  Up until now, she has been using a Facebook page to share all her photos, but as she and her work have become more visible, she recognizes the need for a professionally branded online presence to further her visibility.  

Problem

She has come to me to help her create a portfolio website where she can highlight her art and make it easier for prospective magazines and galleries to reach out to her.  Sending potential employers to her Facebook page does not give off the professional image she strives for.

How might we create a one-page online portfolio whose content can be easily viewed, and will entice magazines and galleries to contact and hire her?

Design Research

Gather Client Goals

First I got some basic information from Dorothy:

• Who are we trying to reach with this site? 
  • ​"Magazines that want to use my work in editorials and galleries that want to show my work."
• Examples of competitors and website designs that she likes.
• She has a simple black logo but is open to new colors.
• She wants one page since she doesn’t want a ton of content to update.

The site must include:

• An artist’s statement 
• A photo or headshot of Dorothy
• A quote about her mission
• Site navigation that will link to each section
• Her logo and full name
• Three samples of her photography work – potentially add more at a later date
• Contact information
• Social media links ​

Look & Feel - Moodboard

I took some of Dorothy’s photos as a starting point, then looked at photographers and sites she admired, as well as did a search for feminist imagery.  

Adjectives I would use to describe the tone in her photos were connected, candid, realistic, authentic, and active.  In looking for images and colors that would portray these, the result was a brand that is colorful and dramatic.

Colors & Typography

Using pink for feminism seems a little too cliché, but then I discovered this quote:

Whilst pink is often discussed as a negative gender stereotype, it has taken on connotations of empowerment in a post-feminist context that redefines it as the colour of women who have achieved equality and are therefore able to embrace pink as a marker of their femininity, and to communicate fun, independence and self-confidence (Koller, 2008).

Looking at Dorothy's portfolio, I pulled out three bold colors to use.  They also happen to be the primary colors, which as the building blocks for all colors, match her mission of building a strong foundation for women.  I matched these with strong, feminine fonts as well.  Yeseva One comes from "Yes, Eva," which seems appropriate!

Dorothy DeLong Color Palette

Dorothy DeLong Typescale 

---

Logo Update

She gave me her all-black logo and said she was open to new colors, so after landing on these three colors, I decided to integrate them into her logo as well.

---

Other Inspiration

Before I started designing, I also used SiteInspire.com to find some inspiration for portfolio layouts, and decided on using a featured image at the top, with a thumbnail layout for her portfolio.

Design Process

Planning

I first grouped the content into three categories: 
​

• About
  
• Portfolio
  
• Contact

​I then drew out a basic one-page design with these as the three sections.

Wireframe Iterations

Then, in creating a higher-fidelity wireframe with Figma, I made some changes to enhance the visual hierarchy, as well as make the colors more accessible, and make for smoother development.  The client also gave me some feedback that she wanted to add some more photos to the page, so I added them to create a final version (4) of my design.  Here are my wireframe iterations:

Grayscale Wireframe

• Artist’s statement moved below photo
• Top menu simplified
• Add labels under photos
• Add background logo for depth

Adding Color

• ​Moved her photo next to the artist’s statement
• Inserted fonts
• Tested out some colors & added new color logo to header​

Adding Images

• Added photos & descriptions
• Moved title quote 
• Highlighted the Portfolio title
• Shrunk the background logo in the footer 
• Highlighted “Contact Me” & added social icons
• Added email capture to footer

Refining Gallery

• Added three more photos per the artist’s request.​
• ​Enhanced the spacing around elements

Further Research & Final Designs

After going through this process, I learned about UX Research through my UX coursework.  I decided to go back and refine my design with some research.  Specifically, I chose to do some research on the best photo layout for a professional portfolio, so I refined my problem statement:

How might we improve the product layout in the portfolio section, to create a more professional-looking portfolio that attracts the eyes of more professionals looking to hire her?

Competitive Analysis

To get some ideas, I wanted to see what other photographers were doing on their sites.  Earlier, Dorothy shared with me two of her competitors and two photographer sites that she admires.  I added one last photographer who is also interested in the female form and women's role in modern society.  With five competitors, I felt ready to start looking at what they offer in order to match trends and find opportunities for Dorothy’s site. ​

Results

Four out of six sites use grid layouts for their photos.  Other opportunities for Dorothy's site include a page for each category, event, commission or project, as well as a page for press or awards, and an email capture form to get subscribers. Two sites also included shopping and video features.

(Click on image to view details)

User Personas

Before deciding how to revamp the layout of her portfolio section, I wanted to take a quick peek at the types of users that will be looking at her site, so I can see whose tastes we're trying to appeal to.  These are mainly professionals in the art and journalism fields, who look at portfolio sites frequently.

Final Design & User Testing

I did one final design comp, updating a few more things to increase engagement and flow before testing.

This design uses color-coded sections with interactive navigation colors:

• Pink = About
• Yellow = Portfolio
• ​Blue = Contact

Final Design Comp

1 = Updated featured quote layout

2 = New greeting and color added to artist's statement for more visual hierarchy and engagement

3 = Labels on photos that include:

• Watermark
• Title
• Share button

Prototypes & User Testing

Through the competitive analysis, I learned that most portfolios use a grid layout, but I was curious whether that would be more effective than the thumbnail layout I currently have.  I applied the new design elements to my last thumbnail wireframe ("Refining Gallery" version above), and then created two prototypes and sent them to users via a survey.  I decided to use linear scales in the survey so that I could collect more quantitative data and visually see which layout was preferred.  An A/B split test would have been better, but since this site is not live yet, I'm not able to do that.

Prototype A

Prototype B

User Feedback Summary

From the survey results, it seems like the grid was slightly more favorable.  Users liked the larger sizes of some of the photos, and the focus on the photos rather than the text.  

•  Grid “gives me a "retrospective", if you will, of the photographer's work and style all in one glance.”​
• One user said that both prototypes were too large and didn’t fit on her screen, even though she tried two different browsers and tried resizing her screen.​
• One user said they'd like to be able to click on a photo to see it larger.
  

Conclusion

A grid layout is best.  It’s quick and easy to add photos, which is something Dorothy requested.  Grid layouts seem to be standard across the online portfolios I viewed, so will be seen as professional & eye-catching.

Learnings & Challenges

Learnings

This was my first school project, so I learned quite a bit during this journey.  Some of the hard skills I learned were:

• Organizing files and frames in Figma - I learned quickly that it can get overwhelming if I’m not organized from the beginning.
• Researching trends - I got to do a lot of searching for current trends in website design and portfolio design, which also led me to find some great resources.
• Prototyping - I increased my skill in this area by trying out a photo carousel and text hover effects.
• Non-destructive editing - In doing my revisions, I got lots of practice in keeping my versions separate so I could go back to them if needed (which I did).

Using a linear scale in my survey questions made it easier to see what was favorable.   

​It also helped me uncover some inconsistencies in my survey methods, which resulted in one user rating this question a 3.  See below for more details on this challenge.​

Challenges

Inconsistent Prototypes

Since most photos in the competitive analysis did not have text on them, I decided to not include text in the grid layout unless a user hovered over the photo.   Looking back, adding this hover text just confused the comparison between the two prototypes, and skewed the survey results.  I should have added hover to both or neither.  This is why my final prototype B does not include the hover feature.

Types of Users

Because of my limited connections, I wasn’t able to find users that fit the personas I created.  Therefore, they were not professionals in the photography industry, so their views may not align as such.  I would want to go back and retest with users who better fit the personas.

Next Steps

• I would like to revise my prototypes and keep testing to get a better idea of what grid layout would be most appealing to users.  
  • Test text vs no text on photos
  • Test different grid layouts
• I would also like to troubleshoot loading and viewing issues for users with these prototypes, so they have a better experience.
• I would love to have this website go live, so I could test these out with more users and use A/B testing for each of these, rather than surveys.

Conclusion

One of my biggest takeaways from this project was experiencing the circular journey of the design process.  When I started this project, I had heard that the process is circular, but my bootcamp presented it to me in a more linear way.  As a new learner, I guess that makes sense.  The first journey was linear, but as I learned more throughout my boot camp, I found myself going back through the process each time I visited this project, going deeper each time.  I got to flex my creative muscles with revisiting, restructuring, and revamping my steps and process each time.

---

Thank you for reading!

Check out some of my other case studies by clicking on these images.

Elizabeth Brett - Navigation Redesign

City Cycles - Redesign & New Online Reservation System