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
In the first of a series of posts, I'll share my approach to defining an audience for my project, ReactPhoto.
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.
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 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.
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 wants to promote selected work and sell prints and services.
To create an online presence (increase brand visibility). To sell prints and services.
Automation of online business. Earn passive income.
Sony A7 III
Craig wants to offer previews, with annotations, for select gallery pieces. He also wants to sell prints.
Promotion, sales and analysis of current curations.
Improving relations, and building a good reputation.
Sara’s graded project requires an online portfolio of work.
To graduate with a portfolio of high quality work. To promote her Instagram.
To gain employment as a photographer.
Nikon Z7 II
Dawn started photography as a new hobby during lockdown, and wants to share her photos.
Share work online. Review camera settings. Promote her Instagram.
To improve her photography skills.
Canon EOS R
To share content from his latest trip. To monetise using affiliate links to “gear”.
To monetise his trips. To promote his social media platforms. Share his settings.
Gain exposure and sponsorship.
Sony A6400 and Apple iPhone
From the personas above, it's possible to break down the majority of goals into three key areas:
Looking at this even closer, there are recurring goals which can be directly translated into feature development:
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.
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.
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.
A new feature for ReactPhoto, if desired, this will allow users to share their equipment and settings with visitors to a photo page.
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.
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.
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.
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.
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.
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.
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!