UX/UI Designer
Dorothy DeLong
Responsive Portfolio Site
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
-
Timeline: 1 month
-
Key takeaways and project recommendations, based on user research
-
Mobile-friendly & responsive website design with a high-fidelity, interactive prototype.
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!
Empathize
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.
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.
.png)
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
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
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.