Bryan McDowall/Portfolio

ReactPhoto: Defining an audience

ReactPhoto is a simple portfolio builder, informed by file structure. After its release last year, I'm revisiting the project to make it even better.

ReactPhoto on GitHub
ReactPhoto: Defining an audience

In the first of a series of posts, I'll share my approach to defining an audience for my project, ReactPhoto.

Project summary

ReactPhoto operates using a simple build process.

The original premise was that an artist or photographer could build an entire portfolio by simply adding a folder structure containing images in a defined directory, and running a script.

"A flowchart diagram detailing the logic when generating pages from folders and images."
The simple logic behind ReactPhoto's build process

Using templates, pages are generated for each image and each folder to create a gallery and page structure. Descriptions and other information were generated from the image files themselves.

"A screen of the existing ReactPhoto gallery page, populated with photographs taken in Japan."
ReactPhoto in its current form

A simple yet effective static website is generated from the user's images, and is ready to deploy or share using their preferred method.

A demo of the existing application can be seen on my own amateur photography site, bryPhoto. Whilst this works in its current form, it's very specific to my own needs. It can be improved and optimised further, and as such I wanted to identify the people who would be using this.


As is often the case when starting a new project, I try to gather my initial research in one place.

"Project layout in Adobe XD"

Using Adobe XD I am able to create visual layouts, which I can present and export information from easily. In the next step, I will develop this information further into interactive wireframes using the same application.

Whilst I enjoy using this application, the tool itself is less important than the ability to communicate ideas effectively. There are many other applications which can perform similar tasks, and it is often the case that different employers (or clients) will have their own preferences.


Based on groups I expect would find ReactPhoto useful, I sourced images from Unsplash and using alliterative naming, created memorable personas.

These personas are essentially archetypes of the people whom I will be building ReactPhoto for. At the beginning of the project, I will attempt to identify their needs and goals in order to better design key features of the application, but they will be present throughout development stages also.

It's worth empathising with your personas at all stages of project development, in order to identify and overcome difficulties as they may arise.

Poppy (28), Professional Photographer

"User Experience persona - polaroid of a person. Subtitled 'Poppy: Professional Photographer'"

Reason for using ReactPhoto

Poppy wants to promote selected work and sell prints and services.

Short term goals

To create an online presence (increase brand visibility). To sell prints and services.

Long term goals

Automation of online business. Earn passive income.


Sony A7 III

Technical skill


Craig (38), Curator

"User Experience persona - polaroid of a person. Subtitled 'Craig: Curator'"

Reason for using ReactPhoto

Craig wants to offer previews, with annotations, for select gallery pieces. He also wants to sell prints.

Short term goals

Promotion, sales and analysis of current curations.

Long term goals

Improving relations, and building a good reputation.


Fujifilm X-T2

Technical skill


Sara (19), Student

"User Experience persona - polaroid of a person. Subtitled 'Sara: Photography Student'"

Reason for using ReactPhoto

Sara’s graded project requires an online portfolio of work.

Short term goals

To graduate with a portfolio of high quality work. To promote her Instagram.

Long term goals

To gain employment as a photographer.


Nikon Z7 II

Technical skill


Dawn (34), Designer

"User Experience persona - polaroid of a person. Subtitled 'Dawn: Designer and Hobbyist'"

Reason for using ReactPhoto

Dawn started photography as a new hobby during lockdown, and wants to share her photos.

Short term goals

Share work online. Review camera settings. Promote her Instagram.

Long term goals

To improve her photography skills.


Canon EOS R

Technical skill


Tommy (21), Travel Blogger

"User Experience persona - polaroid of a person. Subtitled 'Tommy: Travel Blogger'"

Reason for using ReactPhoto

To share content from his latest trip. To monetise using affiliate links to “gear”.

Short term goals

To monetise his trips. To promote his social media platforms. Share his settings.

Long term goals

Gain exposure and sponsorship.


Sony A6400 and Apple iPhone

Technical skill


Identifying desirable features

From the personas above, it's possible to break down the majority of goals into three key areas:

  • Self promotion
  • Technical information
  • Monetisation

Looking at this even closer, there are recurring goals which can be directly translated into feature development:

"Bar chart featuring (in order): Promote selected work - 5, Promote brand - 4, Promote social - 4, Review EXIF data - 3, Passive income - 3, Sell prints - 3, Share gear - 2, Promote paid services - 2, Automation - 2, Analysis - 2"
The most popular goals, by frequency

Promoting selected work

Arguably the primary feature of ReactPhoto. The application generates navigation and pages based on the contents of the Photography directory; where folders create galleries, and photos create pages within that gallery.

As part of the design improvements, it would be desirable to allow custom descriptions and titles to be passed to each page. This method of customisation would likely also support the desire to sell prints, by supplying a link.

Promoting a brand

Presently there is little support for customisation.

The application could be configured to support custom logo and icon images. Custom colour values could be defined from the same configuration file, potentially a custom body/title font combination also.

A single config file would be used to define these values, and would require low technical knowledge to replace defaults.

The difficulty comes from poorly sized images, low-contrast colour values and ill-fitting font combinations - which are the ultimately user’s responsibility.

Promoting social platforms

Currently there are limited social integrations.

Instagram is a popular social platform for photographers, and if a value exists, this is added as an external link to the main navigation.

Other social feeds are displayed on the About page.

These should be configurable, and users should have some autonomy over this, in order to support a growing and unknown variety of platforms.

Reviewing EXIF data

A new feature for ReactPhoto, if desired, this will allow users to share their equipment and settings with visitors to a photo page.

"Screen capture from Flickr - an excerpt of EXIF data, detailing camera make and additional settings." Something which Flickr has long supported (illustrated), this allows visitors to learn from the photographer.

This could potentially be configured in detail. But at minimum, the user should have control over whether or not this is visible.

Generating passive income

This is quite a vague feature request and begs many more questions.

Passive income could take many forms, but my understanding is that the user has little involvement in this process. It could simply be a support link, eg. Paypal or Ko-fi, where visitors can “tip” their work - this could be considered a quick win.

It could be a link to purchase prints from the photo page, detailed in the selling prints feature.

Perhaps they require something more involved, such as Amazon affiliation, where they can earn money from users buying the equipment they promote? And this would tie into the sharing gear details feature also.

This requires further thought, but should ideally compliment other features of the application.

Selling prints

This should be a simple feature to include.

By allowing a configurable link and label, the user can define their preferred third party service to link directly to prints of each image.

These should be styled in the shape of a button, to catch visitors’ attention.

Sharing "gear" details

Increasingly, influencers use their platforms to market goods to their audience. They are often able to monetise these items using affiliate links to generate passive income.

"Screen capture from Kraig Adams' home page - a grid layout featuring gear which he uses for photograph and hiking."

Kraig Adams uses a simple grid on his homepage, with each link generating passive income to support his video work.

The simplest version of this would use an image, with a title (used for the alt tag also), and a link.

I believe this feature would attract users with aspirations to market items in this way.

Promoting paid services

Using an established page template, users can freely create pages to promote their services.

It might be useful to add a contact form for direct enquiries.


Whilst this is likely more related to hosting and build workflow, the right choice of framework can make automation a little easier.


This should be possible by including a simple field for a Google Analytics value in the configuration.

Next steps

Having identified these core features, I'll attempt to support them by incorporating them into template designs.

Stay tuned for part two of this project case study, coming soon!


  • design
  • development
  • persona
  • user experience
  • user journey

Related portfolios