top of page
All Device Mockup - Dorothy DeLong (18).jpg

Dorothy DeLong

Responsive Portfolio Site

Multi-device mockup of Dorothy DeLong's website

Who is Dorothy DeLong?

Dorothy DeLong is a feminist photographer who travels the country snapping pics of women doing amazing things.

Whether it’s protesting for pay equity, fighting for environmental regulation, or standing up for those in the #MeToo movement, Dorothy covers it all.

Problem

After the launch of her site last year, Dorothy has not experienced the influx in business she was hoping for.

Before her site launch, she conducted business via her Facebook page. She finds that potential clients are still contacting her via Facebook Messenger and NOT her website. Dorothy’s site is a one-page, non-responsive design, so it is not mobile-friendly. She had a few clients comment that it’s “just easier" to message her on Facebook while they’re on the go, instead of her site.

How might we get more users to book business with Dorothy via her website, instead of her Facebook page?

Solution

This project focused on user research to ultimately discover why users preferred Dorothy's Facebook page instead of her website. I then used the data analysis to design a mobile-and-tablet-friendly, responsive layout for her site.

Project Scope

My Role

  • UX design

  • UX research

  • Interview facilitator

  • Client contact

Tools

  • Adobe Photoshop

  • Figma

  • Google Forms

  • Zoom

Design Thinking Process

A happy user makes a repeat user!

Using the Design Thinking Process to create a mobile, responsive version of Dorothy's desktop website first involved fully understanding her users. Addressing users' issues and making design choices to ensure their experience is seamless will result in more business for Dorothy.

Click the numbers below to jump to different steps in the process!

Empathise

Empathise

Meet the User, Be the User

Why exactly are people opting to still inquire via Dorothy’s Facebook page and NOT her new website?

Dorothy’s comment about user feedback she received stuck out to me - “it’s just easier" to use Facebook when they’re on the go... which implies that something about Dorothy’s site is NOT easy to use on tablet or mobile.

To ultimately solve the users’ pain points with the site, I conducted user research to determine what those pain points were in the first place.

Quantitative Data - Website Analytics

I gathered the following analytics from her site to determine:

  • which type of devices visitors were using when viewing Dorothy’s site

  • how long users were staying on the site based on their device

Total Site Visitors by Device Type:

Length of Visit by Device Type:

Desktop vs Mobile - the majority of Dorothy’s users are viewing on their cell phones.

Desktop vs Mobile - mobile users have a MUCH shorter visit time than those on desktop. Mobile users leave in a matter of seconds, which tells me they aren’t viewing much of anything on the site.

Graph showing user survey results to question: "On a scale of 1 to 5 (1 being 'extremely difficult' and 5 being 'very easy') were you able to find and view the information you were looking for on the website?"

Quantitative Data - User Survey

Prior to user interviews, I built and issued a survey in Google Forms to a larger pool of users (a total of 20). Half the users were instructed to view the site on their mobile devices, while the other half were told to view the site on their desktop computers.

When asked if they were able to find and view the information they were looking for on Dorothy's site, the majority of desktop users had a very easy time while all mobile users gave an extremely difficult rating.

User Survey - Key Takeaways

  • Desktop users had a great experience.

  • Mobile users had a terrible experience.

  • Mobile users were frustrated because the website was not mobile-friendly and they couldn't view items or navigate the site easily.

  • Mobile users requested a responsive design.

A collage of word bubbles showcasing a sample of user survey responses by mobile viewers

A sample of user survey responses from mobile viewers

Qualitative Data - User Personas

I created the following user personas for Dorothy, so they can better understand her customers' needs and experiences. Based on survey feedback, I incorporated the users' major pain point: not being able to easily navigate the site on a mobile device.

Qualitative Data - User Journey Map

The main emotions that kept appearing in users' survey answers were frustration and annoyance. I mapped out a user journey to highlight the user’s experiences and what caused those emotions and thoughts.

Define

Define

What are the main pain points?
And how can we fix them?

User Pain Points

After interpreting the research data, I began to see a pattern:

Desktop = Good

  • Desktop users had a wonderful experience. They claimed the site was straightforward and easy to use.

Mobile = Bad

  • Those who view on their phones consistently had a terrible experience.

Mobile > Desktop

  • As I gathered from website analytics - most of Dorothy’s users are NOT viewing on a desktop - they are viewing on their phones.

Mobile users' main pain points consistently stemmed from not being able to view the site’s information, due to the fact that the site is not responsive for tablet or mobile devices. This results in users getting frustrated when trying to use the site on the go and abandoning the site altogether.

Dorothy is losing out on potential clients, which results in losing out on potential bookings and income.

Proposed Solutions

It’s my belief that creating a mobile-and-tablet-friendly version of the website would be helpful to users who get frustrated by trying to view the unresponsive site on their devices.

I believe this would increase business inquiries for Dorothy’s photography because users could easily navigate and view all parts of the site, whenever and wherever it was top of mind.

If they have to wait to view it once they are in front of a desktop/laptop, they may

1.) Get frustrated and not want to revisit

2.) Forget completely.

We need to immediately give users the information they want, while they are thinking of us.

Ideate

Ideate

Get the creative and
problem-solving juices flowing.

Website Look - Wireframes

The main goal for the website redesign is clear - a responsive design with layouts for tablet and mobile! All aspects of the website need to be clear and visible while being viewed on any device. I started with hand-drawn wireframes as the base.

 

The desktop layout was successful, so I analyzed it to identify key content and functionalities. The content order on the desktop design prioritized Dorothy's portfolio, so that remained the same. For smaller screens, I ensured essential features were easily accessible, and created streamlined layouts with touch-friendly navigation.

Website Look - High-Fidelity Mock-ups

I created high-fidelity mockups in Figma to bring the design to life.