Fotoup Website UX | Research | Structure

Design Philosophy of Basic structures of FOTOUP / Done in: 2011 to 2015

Major Projects In Fotoup Social Network (Click to see the details for each)

Photo Galleries

Contest & Voting

Personal Home & Social Features

Tagging System & Search

Messaging System

Settings & editing info

Forum & Groups

How It Got Shaped, Designing A Social Network

What is fotoup & Who is it for ?

Professional social networking platform, Focused in photography

Fotoup is part of a master plan of a social networking platform for professionals, that in fotoup version it is focused On people involved in photography and image making.
It is built to make it easier to make professional connections, advanced online photography resume and portfolio, connect local people and promote talented photographers around the world and holding events and award contests.

A Little History

Fotoup project started 2011 and phase 1 opened website for few invited photographers in Jan 2013, we continued developing and we upgraded the website to phase 3 till end of 2013. We finished designing of final UX/UI versions of the app, the portfolio, shared spaces, messaging system, contests platforms and voting system. Some parts of the website never went online but they were fully designed and documented and most of fotoup was online and active until 2018. The main issue for the halt on fotoup platform was the lack of funding in the last stages of the start up.

Fotoup is a combination of Three creative projects:

The photography social designed for photography professionals and a fully integrated system for holding online photo contests and voting system. Fotoup photo hosting and social environment feeds the events and Frame magazine project which it’s self is a creative and unique idea.

The Existing Market

Competitive Analysis

A competitive analysis was performed to understand the strengths, weaknesses, similarities, and differences between competitor photo sharing services, photography portfolios, modeling websites and professional websites in general categories.

Almost all of designers in the project started using all photo networks to find out the flaws and best practices. At the time the main rivals were Flicker, 500PX, Viewbug, Fotoblur, Divianart and some smaller projects. This familiarity made us practically aware of what the surveys results said.

So when the design of the UX started we all had a basic understanding of where we are going. Maybe between all the different many features designed and implemented in fotoup the design of the Profile page, the Photo page and also the upload system are the most crucial and consequential. Most of the data we gathered were pointing at these pages design and structure to be defined very accurately.

Project Overview

The Client

Fotoup, Photography social network startup

The Challenge

To create professional social platform for photography professionals

Outcome

A series of social features and social media interaction were designed based on gathered data, target group feedback and surveys of target group needs and dissatisfaction

Roles:

Lead UX Designer (research, interaction design, visual design)

Responsible for redesign, animation, wire frames, prototyping, discovery and ideation, user research, interaction design input

Personas

Persona Creation

I used all of the qualitative data i gathered during the research process to create a main centric target persona. Since Fotoup is a multi-sided-sided service, meaning it is used by more than one user type donors and recipients, I wanted to capture reflection of all types of users through my main persona. I found that donors and recipients have different needs and motivations.

In this case “Photographer” lets cal him John, is the target while how he gets approached and contacted and how he contacts other lower priority targets is determined by John’s needs.

Design Process

A high-level list of app features was created to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.

Interaction Design

I completed a task flow and user flow to imagine the ways a user might /should navigate through the service using the feature to achieve their goals we implemented.

I created a site map of the pages and service that incorporated the features I designed.

Wireframes: Low & Mid Fidelity

I began the process of wireframing with sketches and considering some precedents in our studies to use user knowledge and make it more intuitive. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketches I chose served as a guide for my digital wireframes and then the prototypes.

Colors and Branding

Next, I created a UI Kit, a comprehensive collection of all components and UI patterns used on the platform. I used branding guidelines of the graphics the platform already had as the starting point and added components such as buttons and navigation bars as well as new icons I had created for the social feature.

The Needs, Frustrations & Wishes Of Target Users

The research

During the research phase, I sought to understand the trends that lead the photo industry and photography. I also needed to uncover the needs and frustrations of the target user to better understand how to satisfy their need in a virtual social.

Research Goals

1.Define the standard for the roles in photography and photo industry.

2.Learn about popular photo apps & sites on the market.

3.Understand why businesses and organizations would be interested in a more focused social network.

4.Define common behaviors of photographers in similar websites

5.Define common behaviors of other people who ae interested but not professionally involved

6.Determine users’ needs and frustrations with current services

7.Understand in what ways they make money and if it is possible to facilitate more and more services for them in the same platform.

The Research And Basis Of The Prototypes

Besides all the areas we studied like the market focus main role players, the main target groups, revenue pathways, industry standards and how it is working traditionally as it is entering the online digital area. We also studied the users and how they are satisfying their needs with thee current tools.

We surveyed about 30 active online photographers and asked them what they are missing and what they need to be improved in forms of 40 questions surveys. All answers analyzed and lead to some data points that had a very significant effect in the way the UX and UI started to get shaped in fotoup.

Beside that I and the other engineers and UI coders all started using almost all photo networks to find out the flaws and best practices. At the time the main rivals were Flicker, 500PX, Viewbug, Fotoblur, Divianart and some smaller projects.

The Research Output

1 Informative portfolio

Meaning that they want to be able to show and say and link as much as they can

2 Easy to be identified

So in different ways they could differentiate themselves

3 Be able to edit photo pages contents after upload

An issue with current solutions, the uploaded photos are not editable easily in many case has to be re-uploaded and that is also another problem to handle re-uploaded photos in the system data structure

4 A Kind of ranking or metric to be measured among other photographers

Artists are in constant battle to show off with their works to be able to get hired more. But art is not scored by numbers. Something we found out they want is a way to be able to go up in a list or ranking, a constant real-time updated ranking system. In facebook for example the popularity is often understood with the number of likes or shares.

5 Highlight my skills

Both in how the users are found or searched for and in how the users are categorized in the network the users want to be highlighted with their skills and specialties

How user gets started | The Signup

The main design details of the sign up can be seen here: Designing Fotoup Signup Wizard

As a summery here are The Main goals in the Signup Wizard:

Introduction to credit system
Intro to photo upload
Intro to tagging and skills
Intro to filling resume
Gathering the skills and categories
Gathering the personal info
Not annoying the user

Main Social Pages

Fotoup has few main functions and pages that are the fundamentals of the network.

The photo pages and profile pages are the main pages with most functions implemented in them as we figured out in our study and research as well. They have the highest traffic flow from inside or outside the network. And they appear more than any other content in the searches and attract viewers to fotoup. So the services designed and implemented in the system have a direct relation with the traffic flew of these pages and also how the behavior of the users in these pages are designed to bring more interaction and involvement taht can lead to more revenue.

The search engine and login/signup and upload functions are also the main functions that should have been prioritized in terms of access, usability, intuitiveness of design and clarity. So they all are implemented in logedin/out menu that is present at all pages.

The Profile And The Photo Page

The Personal Homepage

The home page has two versions, one the public version that serves as the feature board to appreciate the best photos of the network and a private/personalized version that loads contents based on the latest activity of connections of user. The singed in version of homepage is where the user sees all new contents from his connections or pages.

Fotoup has 3 basic kind of content, the pro photo galley upload, wall posts and forum or conversation section. In the home page the user can navigate between the latest from his/her connections, comment or UP them or just go the the page of that new content. We designed the side bar for navigation purposes and in smaller and narrower screens the side bar goes above the content and works like tabs.

The Search

Fotoup Professional Search engine

Search Photos
Searching Photography people

Search is one of the main features of the network. It let people find the photography professional that they are looking for like a model or photographer or lighting expert. But its not limited to finding professionals, it also is connection to all the photos in fotoup public galleries that are made available for sale by their right owner of the photo. In many cases that the photo is a famous one, you can trace the model, photographer or stage experts that are tagged to the photo by fotoup roles.

The Tagging System

The fotoup project covers a very divers but professionally focused target groups but the main target group for fotoup service and experience design is the photographers. As photographers especially pro photographers are the highest priority for user based fundamentals, the other groups like amateurs, models, businesses, artists, makeup artists, retouchers and some others were considered in the design process. User Tags were basically designed to differentiate the profiles but also in later developments to work as a profile template.
The tags are not only made to emphasize on the skills but to keep the rights and show the level of ownership and tracing a photo, how and who has made it and designing ways to get in touch with the owner.

Fotoup tagging and user roles and levels are all implemented to satisfy these needs. User has the ability to identify his/her skills, profession, and focused in the industry from the first pages after signup.

User roles identifies what the user did in the photo project while the tags are shouting out his/her main general activities in the industry.

All this makes the design of photo upload page and photo page very critical an dependent to profile page.