Dorothy DeLong

Dorothy DeLong is a photographer whose work celebrates femininity, identity, and quiet strength. As her audience grows, she’s seeking new ways to expand her connections in the art world.

Futuristic hero image introducing GPTSheets with the tagline ‘Your ultimate spreadsheet companion,’ displayed over a glowing view of Earth from space, reflecting its smart, user-focused approach to managing data.

The Challenge

Dorothy needed a portfolio website to showcase her work and simplify the licensing process, making it easier for galleries and publications to get in touch.

My Role

As the UX designer, my goal was to design a mobile-first portfolio website to support Dorothy’s outreach goals.

Deliverables

Color Scheme & Typography

Wireframes & Prototype

Competitive Analysis

Mobile-First Responsive Design

High-Fidelity Design & Visuals

How might we design a portfolio to support Dorothy’s outreach goals?

The Design Process

Research & Analysis

To design a portfolio site that reflects Dorothy’s artistic vision and supports her goals, I led the research and design process by analyzing sites of artists in her genre.

These sites provided key insights into effective design features:

Features:

Minimalist layouts

Clear CTAs for inquiries

Effective photography display

Three mobile artist portfolio screenshots. Montinique Monroe’s homepage shows a powerful protest photo with a minimalist layout. Graciela Magnoni’s contact page displays her name, email, and social links on a clean white background. Sarah Maple’s site features a grid of colorful satirical artworks, placing her work front and center.

Montinique Monroe’s homepage features a clean, minimalist layout.

Sarah Maple’s portfolio section displays her work prominently.

Graciela Magnoni's site

features a streamlined contact page

Graciela Magnoni's site

features a streamlined contact page

To complement this research, I reviewed magazine and museum websites—Dorothy’s ideal collaborators—as secondary sources. These helped inform design decisions that make it easier for curators and editors to explore her work and reach out.

These sites provided key insights into effective design features:

Features:

Prominent call-to-action buttons

Sticky navigation

Clear content organization

Louvre homepage features prominent call-to-action buttons to guide user interaction.

The Metropolitan Museum of Art’s website demonstrates excellent responsiveness on different devices.

Apollo Magazine’s layout demonstrates clean organization and visual hierarchy, making it easy to browse art-related content.

The Museum of Modern Art uses sticky navigation to organize content and guide users through their site.

Louvre homepage features prominent call-to-action buttons to guide user interaction.

The Metropolitan Museum of Art’s website demonstrates excellent responsiveness on different devices.

Apollo Magazine’s layout demonstrates clean organization and visual hierarchy, making it easy to browse art-related content.

The Museum of Modern Art uses sticky navigation to organize content and guide users through their site.

User Flow & Wireframes

To create a seamless and user-friendly experience for Dorothy’s portfolio, I designed an intuitive user flow that guides visitors through her gallery, mission, and contact and licensing options.

Homepage

User taps the hamburger menu to reveal the navigation options: “Gallery”, “About”, and “Home”.

Gallery

User taps “Gallery” in the navigation menu to view the collection.

User taps “Gallery” to view the collection.

Tapping the image group opens a larger view with swipe navigation.

Tapping a group opens a larger view with swipe navigation.

Tapping “Return to Gallery” takes the user back to the gallery.

Tapping “Return to Gallery” takes the user back.

About Page

User taps “About” in the navigation menu to access Dorothy’s Artist Statement, her contact details, and the usage and licensing form.

User taps “About” to view the artist statement, contact info, and licensing form.

Three grayscale mobile wireframes showing the homepage, gallery, and About screen of Dorothy’s portfolio.

Other Actions:

Sticky navigation persists across all pages.

Sticky navigation stays visible on all pages.

Alternatively users can scroll to each page for a continuous browsing experience.

Users can also scroll for a continuous browsing experience.

Tapping the logo or “Home” from the navigation menu redirects the user to the homepage.

Tapping the logo or “Home” returns the user to the homepage.

Color & Typography

After carefully reviewing Dorothy’s work, I curated a gradient background of purple and blue to amplify it’s emotional impact and align with her brand. The gradient not only enhanced the images, but made them feel vivid and immersive.

I chose a purple-blue gradient to amplify the emotional impact of Dorothy’s work and make her images feel vivid and immersive.

For Dorothy’s portfolio, I chose to pair Belleza and Quicksand to reflect both the elegance of her artistic work and the accessibility of her brand identity.

Mobile view of Dorothy DeLong’s homepage, featuring the portfolio’s two main fonts.

Belleza was used for headings and key titles:

Its refined structure brings sophistication and a gallery feel, reinforcing the timelessness of her work.

Quicksand was used for body text:

Its rounded forms add warmth and make the content feel more welcoming.

Designed for Connection

This section showcases the final design and highlights how key interactions were crafted to support exploration and engagement. From browsing Dorothy’s gallery to reading her story and reaching out, each screen demonstrates a seamless, intuitive experience built with her audience in mind.

Mobile view of Dorothy DeLong’s homepage with the navigation menu expanded. The dropdown displays links to “Gallery,” “About,” and “Home”.

I grouped content thoughtfully to support a simple navigation experience, resulting in a streamlined dropdown menu that made it easy for users to explore the site and connect with Dorothy.

I organized content to create simple navigation and a clear dropdown menu, making it easy to explore and connect with Dorothy.

mobile screens of the Featured Collection gallery. The first shows a grid of four images under the “Gallery” section. The second shows an expanded view with larger swipeable images.

I added a dedicated section to spotlight her work, making powerful images instantly accessible to visitors.

The About section includes a contact form with clear CTAs for inquiries and licensing, simplifying access to essential information.

This design allows magazines and galleries to request images and verify exhibition details easily.

The About section includes a contact form with clear CTAs for inquiries and licensing, simplifying access to essential information.

This design allows magazines and galleries to request images and verify exhibition details easily.

Mobile view of the About page from Dorothy DeLong’s portfolio. The top section includes a portrait of Dorothy, her artist statement, contact email, and social media icons. Below, a contact form invites visitors to send messages or collaboration inquiries, with a checkbox for licensing-related requests and a bold purple “Submit Request” button.

Usability Testing

To ensure the website met Dorothy’s goals, participants tested key features and provided feedback on functionality, clarity, and ease of use.

Finding & Previewing Work

Task: Navigate to the gallery, browse the “Featured Collection” carousel, and find a specific image of interest.

Task:

Navigate to the gallery, browse the “Featured Collection” carousel, and find a specific image of interest.

Problem: Users weren’t sure if they could tap gallery images to open the carousel.

Problem:

Users weren’t sure if they could tap gallery images to open the carousel.

Solution: Added subtle “Open Collection” text to show the gallery group is clickable.

Solution:

Added subtle “Open Collection” text to show the gallery group is clickable.

Mobile view of the Featured Collection gallery screen. Four portrait-style images are arranged in a grid beneath the “Gallery” title. At the bottom, subtle “Open Collection” text signals that the gallery group is clickable.

Contacting Dorothy for Collaborations

Task: Go to the About section and complete the inquiry form with a sample message.

Task:

Go to the About section and complete the inquiry form with a sample message.

Problem: The form felt too formal and had too many fields. Users also hesitated to check the licensing box due to unclear instructions.

Problem Revealed:

The form felt too formal and had too many fields. Users also hesitated to check the licensing box due to unclear instructions.

Solution: Simplified the form with a conversational tone and combined fields into one text area. Revised licensing checkbox instructions for clarity.

Solution:

Simplified the form with a conversational tone and combined fields into one text area. Revised licensing checkbox instructions for clarity.

Mobile view of the updated contact form on Dorothy’s site. A single text area with placeholder text invites users to share their name, email, and message. Below is a checkbox labeled “Is this related to usage or licensing of Dorothy’s work?” followed by a prominent purple “Submit Request” button.

Competitive Analysis

A competitive analysis revealed Dorothy needed to showcase more work to align with industry standards. However, she wanted a more innovative approach than traditional gallery categories. To address this, I introduced two key solutions:

Latest Works Section: A dedicated section to feature her latest work, keeping the portfolio current and organized.

Latest Works Section:

A dedicated section to feature her latest work, keeping the portfolio current and organized.

Stories Section with Interactive Map: This feature lets visitors preview upcoming work and discover the stories behind each image, encouraging future collaboration and adding a personal touch.

Stories Section with Interactive Map:

This feature lets visitors preview upcoming work and discover the stories behind each image, encouraging collaboration and adding a personal touch.

Two mobile screens from Dorothy’s portfolio. The first, titled “Latest Works,” displays a five-image grid of recent portraits. The second, labeled “Stories map,” features an interactive world map with a camera icon pinned to Morocco. A pop-up shows a photo and story from Marrakesh about Argan oil artisans.

These solutions make Dorothy’s portfolio a dynamic space that showcases her creativity, connects with her audience, and strengthens her presence in the field.

Outcome Summary

Participants celebrated the portfolio for its clear layout, smooth navigation, and strong potential to spark collaboration.

The portfolio successfully met its primary goals—showcasing Dorothy’s work and making it easy to connect. Participants found the experience clear and engaging, with special praise for the interactive Stories map, which offered a dynamic way to explore her photography. A user-suggested feature—click to enlarge—was added to enhance accessibility and depth. This thoughtful interaction helped distinguish the portfolio and supported deeper storytelling and collaboration.

The portfolio met its core goals—highlighting Dorothy’s work and making it easy to connect. Users praised the clear experience and loved the interactive Stories map. A user-suggested “tap to enlarge” feature was added, enhancing accessibility, storytelling, and collaboration.

Accessibility Considerations

Accessibility was built into both the design and presentation of this project. I used clear visual hierarchy, strong color contrast, and meaningful alt text to support screen readers and visual clarity. Navigation was simplified for easy use on smaller screens, and tap targets were sized for accessibility across mobile devices.

Preview of the Dorothy DeLong mobile prototype

View prototype in Figma

What I Learned

This project deepened my understanding of mobile-first design and how thoughtful details—like storytelling through maps or small interactive moments—can enhance both usability and emotional connection. It also reinforced the power of feedback, showing how one user’s insight can lead to a more refined and inclusive experience.