FPR Website
Design a profile creation flow for a networking app for photographers
Role
UX design
Self initiated
Timeline
April 2023
Tools
Adobe XD, Illustrator
The Idea
FPR for photographers, is a networking website designed for photographers seeking to connect with other professionals in the field. It offers a platform where photographers can showcase their diverse portfolios, share their work, and establish connections with like-minded individuals.
The Problem
Available online networking sites have limited profile customization, insufficientdiversity for personalized profile pages forprofessionals as the networking tool.
The Goal
Design a website that addresses the challenges users may encounter when customizing their profile page or navigating to their preferred content. Additionally, create a profile page specifically tailored to photographers that effectively represents their work.
User Research
I conducted user interviews and transformed the insights into empathy maps to enhance my understanding of the target users and their needs. The interviews revealed that photographers within the target audience are looking for a platform where they can showcase their work, discover the work of others, and identify the distinctive qualities of each photographer. Such a platform would offer collaborative and networking opportunities among fellow photographers. Unfortunately, existing networking sites often fall short, being either too simplistic or excessively geared towards professional job seeking.
Empathy map
User Pain points
User Persona: Josh
Josh is a freelance photographer that is just starting out in the world field, that wants to find people that are in his interest so he can find people to collaborate and network with.
Nunc nec sapien et magna malesuada pellentesque.
Goals
Different categories reprensenting portfolio, with personalization, finding and connecting to other photographers
Frustrations
Websites that advertise as finding business connections are too static on user profile, or only rely on gallery/image as information
Problem Statement
Josh is a freelance photographer who needs to create a landing page for his photography portfolio. He aims to showcase his work, make his services available, and connect with other photographers who share his interests, with the intention of collaborating on projects together.
Sitemap
Insufficient user profiles were identified as a pain point for users. Therefore, I utilized this insight to create a comprehensive site map.
My objective was to make strategic decisions regarding the information architecture that would enhance overall website navigation and introduce greater diversity to user profiles.
Paper Wireframes
Next, I sketched out paper wireframes for each screen in my website and mobile site,keeping the user pain points about the diversified page in mind when designingthe flow.
The home screen paper wireframe variations focus on optimizing the simplicitynavigation flow to each section.
Paper Wireframe & Screen Size Variation(s)
Because FPR users access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital Wireframe
Screensize Variation(s)
Desktop (left)
Mobile (right)
Digital Wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain pointsand improve the user experience. Prioritizing clear visual element for simpleand easy navigation between pages was a key part of my strategy.
Further Realization
After realizing profile creation flow is complete, the website pages must have a editable option, I then incorporated a dashboard feature where users can add/delete, organize their materials and customize their preference in typograhy, color etc.
Low-Fidelity Prototype
To create a low-fidelityprototype, I connected all of the screensinvolved in the primary user flow of creating its user profile, to flow 2’s dashboard, and back to the homepage.
Atthis point, I received feedback on my designs from members of my team about button placement, interacting and navigation of different buttons to theircorresponding pages.
High-Fidelity Prototype
My hi-fi prototype followed the same userflow as the lo-fi prototype, andi ncluded the design changes made after the usability study, as several changes suggestion by members of my team
Link to H-Fi Prototype
https://xd.adobe.com/view/d3956cb8-f480-47b0-9bcb-a0b69f548ffa-86c6/
Desktop site
User flow, and Interaction
The flow begins with the website displaying the welcome page, followed by the initiation of the profile creation process upon clicking the "Join Us" button. Upon completing all the prompts, users are then asked about their content preferences. Subsequently, they are directed to the dashboard, where they can customize and edit their page's style, and add any materials they wish to showcase on their homepage.
mobile screen
Mobile Profile Creation
Adding profile picture, prompts, profile creation prompt
Back-to-Top Scrolling
mobile sized dashboard interactions, and scrolling interactions
Accessibility Considerations
I made use of headings with varying text sizes to establish a clear visual hierarchy. Additionally, I incorporated icons to assist users in distinguishing between different text prompts, tools, and functions. Moreover, I ensured smoother screen reader access by incorporating alt text on images.
What I Learned
I learned that details in changecan have a big impact on user experience. Themost important lesson for me is to always focus on the user’s needs and observe carefully on their experience when going through design
Impact
Our target users shared that the profile materials and pages were easily edited for customization. The profile pages demonstratedclear visual hierachy for simple navigation.
Next Steps & Reflections
- Improve the interactive aspects of the profile creation flow, such as component elements.
- Users should have a way to make a portfolio from collection of other photographers.
- The dashboard could be optioned out as another method to interact editable components, such as incorporating an artboard as the alternative.
- One mistake I made was misconducting enough user groups when comparing different characteristics of photographers, thus mistakenly made bias decisions.
- Identifying what the user's biggest fruastration and painpoint when compared to the competitive audit on other networking sites became most insightful.
Previous ( Cafe App Case Study )
Daxing Airport Digital layout ( UI design )