app icon

Synology Moments

Personalize & categorize your photos in a smart way

holding device

Background

Synology Moments is a package for photo management running on DSM, our NAS web-based operation system. iOS and Android app are also provided for users to backup and browse their photos easily.

My Contribution

I held and directed the brainstorming to explore the next generation of photo management and collect scenarios and the difficulties of photo management, sharing and backup. We also reviewed our competitor's app and our related application, Photo Station and DS Photo. I also conducted interviews to figure out the context of that people manage, share and backup their photos.

I was mainly responsible for user flow and detailed wireframes to discuss with a PM and developers. I also made prototypes to communicate my desgin and for user testing. I also conducted user testing after beta version was released to evaluate the design and find out usability issues. The visual design shown here was not official one. I designed it for high-fidelity prototype.

Project Goal

1. Identify user needs and design direction of next generation of photo management tool.
2. Provide great user experience to help users management and browse photos in anytime and everywhere.
3. Create add-on value to Synology NAS eco-system and increase sales volume of Synology NAS.

Time

Nov 2016 - Aug 2017

My Role

Research
Interaction Design
Prototyping
Visual Design

Company

Synology Inc.

Credit

Research: Chun-Chuan Lin, Chien Wen Yeh
UI flow: Chun-Chuan Lin
Prototyping: Chun-Chuan Lin
App icon: Shang Yi Chao
Visual design: Chun-Chuan Lin

process icon

Discovery

Competitor Analysis and User Research

Competitor Analysis

01

Competitor Study


From UI & UX perspective, we picked up the main stream players’ newest photo management services as well as our own service, and analyzed them from signature features to main screen UI structure to figure out how we could improve in our new photo management tool.

What we Found

Summary: timeline, auto categorization & social sharing are basic features;

Features

  • Timeline is a basic feature: Almost every photo tools have a pool in which the photos are sorted by taken date.
  • Auto Categorization: Albums created by location, face and objects recognition. Trip albums are automatically created by a specific time period that you may have a trip and take lots of photos.
  • Social Sharing: Flickr is more like forum for professional photographers. Amazon Prime Photos has Family Vault which allow family members to share their photos. They all have share link to other people can view the photos.
  • Memory Recall: Google Photos and iOS Photos push notifications sometimes to let you recall your trips. They may automatically create a slide show or video-like ablums for you.
  • Search and Filter: Flickr can filter photos by colors becasue it is more like seeking for reference. Amazon also list some filters in its side menu

Design

  • Two different layout of thumbnails, one is trim the photos into square; the other keep the ratio of height and width.
  • The photos are sturctued either by timeline or albums.
  • Using featured photo as album cover. In the album level, there is a big banner displaying the photo

02

Current Synology Photo Product Review


Synology Photo Station and DS photo were reviewed. Some issues were found and classified based on features. Here is the detailed report of DS photo issues and suggestions.

WHAT WE FOUND

Problem summary: messy information architecture

Interaction Design

  • The information architecture is messy.
  • Layout modes, consisting of grid and list mode, should separate from view modes, consisting of folder, timeline and map mode. The former is just simple changing the layout; the later one is using different ways to organize photos.
  • It doesn’t make sense that map mode and timeline mode are children screen of folder mode. They should be in the same level.
  • It is not easy to set up privileges to share photos.
  • The rules of sharing photos are too complicated and confusing.
  • In timeline mode, the sorting in 2 rows is confusing. Not easy to unsderstand the time order.

Visual Design

  • It is hard to tell if the thumbnails are photos or folders.
  • Private and password protected albums have the same design. You cannot tell the difference.
  • Colors are not used well. One screen has too many colors.
  • Some visual bugs.

Check full version of report about DS photo issues and suggestions.

User Research

03

Interview


In order to know more about users' behavior on photo-related activities, user interviews were conducted. Before conducting semi-structured interivew, I list some questions may help users to recall their experience on entire journey from photo shooting to photo management and sharing. I interviewed with 1 photographer, 1 newbie mother and 1 designer within a week.

The outline of interview questions is shown as below:

1. Basic Info
1) Talk about your self. What is your job?
2) What devices do you use for taking photos? What services or tools do you use for photo management?
3) What do you use for file storage and transference? (e.g. Cloud storage, USB drive, NAS…)

2. Photo Taking
1) What photo do you usually take?
2) Talk about the recent experience of photo shooting? (When? What? Where? Why? How? Who?)
3) Do you take many photos in the same scene in a time? Why?

3. Photo Management
1) Do you manage your photos? Why or why not?
2) When do you menage your photos?
3) Talk about the recent experience of managing photos? (When? What? Where? Why? How?)
4) What do you like or dislike during the process? Why?

4. Photo Sharing
1) Do you share your photos? Why or why not?
2) Talk about the recent experience of photo sharing? (When? Sharing what? Sharing with whom? Why? How?)
3) What do you like or dislike during the process? Why?

5. Memory
1) Do you review your photos? When? What is the scenario?
2) What do you like or dislike during the process? Why?

6. Photo Backup
1) Do you backup your photos? Hong often? What do you use? Why do you want to backup?
2) What do you like or dislike during the process? Why?

7. Existing Products
1) Is there any feature of product you are using impressing you?
2) What do you like or dislike and why?

WHAT WE FOUND

Behavior summary: More and more people use smart phones as main photo shooting tool, but they still use a cable connected to their computers to backup and manage photos manually. It is also time-consuming to pick the best photo among lots of similar photos. They want to keep their privacy, but they also want to share meaningfull photos with family and friends in an easy way.

  • Originally I thought married couples may would to share every photos they took. But I found they still want to keep their privacy, not every photos they want to share to their partners.
  • It's not convenient to collect photos from multiple devices or other people.
  • I thought the married couples may carry their traditional professional camera. Actually, they have to bring lots of baby stuff, so they prefer to use mobile phone to take photos.
  • They transfer photos by connecting to PC via cable.
  • All of them manage their photos on computer. The folder name will be date and location or the event.
  • For work purpose, they may manage/access their photos within few days once photos are taken; for personal life record, photos may be backed up once a year.
  • It is not easy to collect photos from others during or after traveling/events.
  • Took lots of similar photos to avoid missing important moments, but it is annoying when they manage and select photos to keep.
  • Don’t know if their friends have downloaded the photos yet. They want to delete the photos because of limited space.
  • Restore functionality on Dropbox helps them to recover the missing photos due to damaged hard drive. They feel grateful.
process icon

Design Workshop

Exploration Stage

01

Brainstorming Workshop


Main purposes of the workshop with PM, developers and designers are:
1) Know everyone's thoughts and expectation on our product and potential users.
2) Expolre our engineering feasibility, business viability, existing constraints and our user pain points.
3) Collect everyone's ideas and experience.
4) Create shared understanding.

Before brainstorming, I searched images related to photo management, sharing and use scenario and print them out as prompters. I also came up with 3 proto-personas who may have a huge amount of photos, like photographers, couples having a baby or child and designers. They have different use scenarios and difficulties which are used as brainstorming topics as well.

1. Let’s talk about your personal experience
1) The softwares or apps you use and why you choose them.
2) The use scenario, purpose and object.
3) What features do you like or dislike and why?

2. Think about 3 personas's needs and how might we.
1) Photographers: have lots of similar photos and need to select the best ones/ want to share photos with clients easily
2) Newbie Parents: grandparents want to see photos/ collect all photos from different devices/ record and store children's milestones
3) Designers: easily collect and categories different materials for inspiration/ share images with other colleagues/ seperate photos for business and personal.

process icon

Definition

Product Strategy and Design Goal

01

Enhancement or New Product?


From Competitor Study, Current Product Review and Brainstorming, we thought about if we needed a brand new product or just new features and improvement based on current app. We analyzed pros and cons of developing a brand new one.

Pros:

  1. Won't be strict to current product structure and limitation due to too many tech and UX debt. Will have flexibility to design new and better user experience.
  2. Won't effect our original users. The current users of Photo Station don’t need to adapt to new changes. They can continue to use current version.
  3. Different target users may have different needs. May attract new target users to purchase our NAS rather than other competitors.

Cons:

  1. Two apps may have similar features, so it may be difficult for users to choose.
  2. Maintenance cost may be higher.

We decided to develop a new product in the end because:

  1. Users
    We will have chance to explore new concepts and better experience without lots of limitation. We can target different users and educate users which tool is better for them.
  2. Technology
    We will publish Synology Drive which has new index structures, so Synology Photos can have better integration with Drive.
  3. Business
    Alhough the maintenance cost may be higher, new product may also bring new oppotunity.

02

Why & How Do We Select User Target?


Traditionally, our NAS target are business and home users. From our observation, there are more and more general home users to purchase our products with digital home environment spread and under privacy consideration.

Our Photo Station was designed for small business and individual content creators. There are lots functionality and feature which are useless for normal home users, like detailed camera metadata, advanced privilege settings, etc. We want to create a simple product that everyone can use.

03

Design Goal


We define our design goals in order to focus on what we determine to be most important issues to resolve and to check and make sure our solutions meet the intended goals.

Help users to:

  1. Browse well-organized personal event photos anytime everywhere.
  2. Select the best photos among similar photos.
  3. Collect photos from everyone and share to someone easily.
  4. Find photos of special moments or someone easily.
  5. Backup photos in an easy, safe and secure way.

process icon

Concept Development

Idea Exploration

Initial Concepts

01

Browse well-organized personal event photos anytime everywhere


- From the user research, we know users usually categories photo by time and event name or location. They sometimes use people's name or event types to group photos.

- Idea: We can group photos by time and location. Also, we can create albums by different topics like people, parties, exhibition etc.

- What if the internet is not stable so the clients cannot access photos anytime anywhere?

- Idea: We can save thumbnails with low resolution on the device when the mobile have Wi-Fi connection and there is a new technology called super-resolution imaging which can be used for resolution enhancement.

Group Photos by Locations

Group Photos by People

Group Photos by Objects

Super Resolution





02

Select the best photos among similar photos


- Mark or group blurred photo automatically and ask users if they want to delete them (Users can preview them and delete one by one or delete all at one time)

- But how can we know if the photos are blurred? We search on stackoverflow and find it may be possible. Reference

- We also can track the user behavior and know his selection criteria and train machines to create AI for the future.

- Group the photos which are taken in the similar timing (e.g. photos taken within 1 or 2 seconds can be grouped together)

Group Blurred Photos Together

Group Photos Taken in Similar Time Together





03

Collect photos from everyone and share to someone easily


- Challenge: users’ friend may not install our app for one time use. They may prefer to share photos on their mobile directly rather than laptop.

- Maybe the user can share a private URL link which allow his friend to upload and download photos there.

- We can detect who in the photos and recommend whom to share.

- If both of them are our NAS users (eg. family members, we can know their location and people they shot (maybe have lots of selfie), so we can assume they travel together and ask them if they want to create an album which we will help them to put the photos from two devices together.

Private URLs Allow People to Upload & Download Photos

Detect People in Photos and Suggest Receivers

Creat Shared Albums by Detecting Time, Location & People in Photos





04

Find photos of special moments or someone easily


- We can help to group photos of a sepecific event and person, so users can find them via well-organized albums

- Users can add tags of photos based on the keywords they usually use to categorize, so the photos will be easily searched.

- We provide advanced search functionality which can set up some conditions. For example, a specific period of time and the photos must include someone.

- Recommend search keywords or topics that the users may be interested.

Manual Tagging

Advanced Search

Keyword Suggestion





05

Backup photos in an easy, safe and secure way


- Challenge: unable to run the app to backup in background on iOS. Backup may consume lots of battery and network usage.

- We can backup photos only when the device is charging and connected to Wi-Fi.

- We can play a clip of music which is silent to keep app running in the background. (Cheating)

- We can ask users to give permission for using their locations to keep running. We may be able use the location to trigger backup.

Backup When Devices Are Charging and Cnnected to Wi-Fi

Play Silent Sounds to Keep Running App in Background

Get Permission of Tracking Locations to Keep Running



process icon

Interaction Design

Detailed User Flow & Wireframes, Prototyping & User Testing

User Flow & Wireframes

01

Wireframes


After some main features is confirmed, I start to think more deeper about our user flow and the interactions that would create better experience. There are countless UX flow and wireframes generated during the design iterations. I use wireframe and prototypes to communication design concepts with developers. In the meantime, developers also do some investigate technology that we can apply on our app. The image shown below is just small part of wireframes.

The Challenges

There are more and more challenges and questions when not only I start to design but also developers start to develop. Some of them are more like design questions, such as which design is better. Some of them are challenges caused by technology limitation which may be able to resolve by improving the user flow or interaction. Some of them are discovered when the design are really implemented. I categorize the challenges into 5 main activities that user interact with. And then explain how to resolve each of them.



01

BROWSE


1. Image Recognition:
1) Some objects or people are categorized together incorrectly.
2) The same objects or people are grouped separately.
3) Auto-created albums of strangers and passengers.

2. Location Labels:
1) Globalization open source is messy and every country has thier own order of fields of address (Countries, states, counties, city, village, street name, house number, flat number, etc).
2) When we group photos in timeline, which scale of a place should we grouped them by, city, village or even smaller district.

3. Timeline:
1) What should the layout look like?
2) Cannot update automatically when photos have been uploaded

4. Mobile Experience: Need time to load photos when browsing photos.

Solution


1. Image Recognition:

1) We should let users can remove the incorrect results.

2) Let users to combine the results which should be grouped together.

3) For the auto-generated albums of strangers:
- We can sort by amount of photos, so the strangers will be in the end of the list.
- We change the rule of creating an auto-albums. We increase the amount of photos from 2 to 5 to generate an album.
- We also put those albums having less photos into a second layer.

2. Location Labels:

1) We focus on the 32 main countries where our products are sold first. We make sure the address formats in those countries are correct. We create a table that can help us mapping the data.

2) After testing, we find village scale is a proper scale. You may have too many photos in the same city and it would be able to help you identify smaller locations. If we use street name level, you may not familiar those names and that would be useless for you.

3. Timeline:

1) Our UI designer tries different layouts for the timeline view. Basically there are 2 variation, one is more like traditional timeline, and the other is more stylish and looks like magazine layout. Eventually, we choose the timeline layout because those photos are not selected by users. This view should be more functional and need to be more simple and clear. The magazine style may be more suitable for albums which the users created for better photos.

2) The issue here is if we want to update the timeline view automatically, that means the page needs to be refreshed once the upload has done. The layout on timeline view is dynamic, we need to recalculate amount of photo in a row and the width of each photos to rearrange the layout when there are more photos. However, if the users are uploading some photos and in the meantime browse the photo pool, they may be interrupted from browsing once the upload has done. So we design a toast have a refresh button that allows users to refresh the page manually.

4. Mobile Experience:

1) In order to optimize browsing experience in an unstable network condition, developer team find and use a new technology called Super-resolution. It automatically detects the network condition. When the network condition is unstable, deep learning techniques and hardware acceleration on mobile devices reconstruct thumbnail details, providing uninterrupted browsing experience.

2) When the users tap a photo to browse full-screen photo in lightbox mode, we also try to preload or preprocess the previous and next 3 photos. If they swipe left or right to view previous or next photos, the photos has been loaded and borrowing experience is more smooth.

3) Design a better loading screen to reduce the feeling of waiting. If we have the thumbnail of the photo, we use the thumbnail as placeholder and once its higher resolution photo has been loaded, we fade in the high resolution image. If we don't have the thumbnails, we use gray background with a simple animation to indicate the loading status.

02

SHARE


1. Share Link: The share link which is an unique URL, but it is not private. Anyone who know it can access the album and that may cause privacy issue.

2. Is sharing recommendation useful?

3. Shared Album: should Share with Me or Share to Other be default page?

4. Do people know how to share photos and share link? Do they also know the difference between Public Share and Private Share?

Solution


1. Share Link:

We think the unique URL would be easily known by strangers unless the people whom the user shares to leak to others. If the user has concern of privacy, he also can create a common account for their friends. We also consider we can have password protection feature which is not high priority in this stage.

2. Sharing Recommendation:

Although we want to create a shared albums for users and suggest whom they can share to, we find users don’t want to share every photos they took in a quick internal research. The users may take lots of selfie or bad photos which they don’t want to share. This feature is not appreciated, so we abandon this idea eventually.

3. Shared Album:

We think viewing the photos that other people shared with us is more important and frequent than viewing the photos we shared. You need find the albums you shared only when you want to manage them. We also plan to collect data to see if our assumption is correct.

4. Sharing Actions:

I create a prototype to run an internal testing. I invite people who are not in this project to test if they have any difficulty to share photos. We find it is a little confusing when they want to share photo with other Synology Moments users. In our original design we reduce a step to reduce workload for users but it causes confusion. We have some iterative refinement to find the best solution.

Final Design

1. Add share button to make it easier to share the link to other app.

2. We show the names in the first level, so users can know whom they share to easily.

3. Reduce a step by removing a screen of shared list. The users also can add, remove or view the people whom they share to easier.

03

FIND


1. How to increase the chance to help users find the right photos?

2. It is not easy to go back the first level when you are in the deeper level.

Solution


1. Increase the Chance:

We sort the albums by the amount of photos inside not only in auto-categorized albums but also search results page. So people have higher chance to find what they want.

2. Information Structure:

When you in the third or fourth level in auto-categorized albums, it may take many steps go back to the first level. Instead of putting a portal button to other applications, we put a home button to help them go back to first level easier.

04

BACKUP


Unable to know backup status easily; in the mean time, need to consider consistency with other app as a system.

Solution


Change Navigation:

I change the navigation from drawer to bottom bar to not only increase discoverable but also reduce steps to switch view. I use red dot on navigation bar to indicate there are upload or backup tasks running. When you switch to More tab, you can see the backup status easily.

05

SELECT


Prioritise Development Tasks:

Although helping users to select the best photo among similar photos may be a good sell point because many of us have lots of messy, duplicated, similar photos on the mobile phone and never get a chance to clean them up, we decide postpone this feature to later stage because developers have no enough time to release products. We want to make sure basic features are good enough to go, and then continue to finish this feature.

Beta Testing

01

User Testing


After the beta version is released, 4 internal employees are recruited from different department to participate the user testing. I list what we want to know from this testing first and then categorize them by features. And then I add description of scenarios and tasks we are going to ask our participants to do. Also list the standard steps of each task to check if the users mental model is the same as what we designed. I also record the whole process during the testing, so people who are interested in this project can check the videos.

02

Testing Results


1. The button style is not like a clickable button and wording is confusing.
2. Cannot rename in an empty album.
3. After uploading the photos in a new album, they don't show up.
4. Users don't notice the toast for informing user the upload finished because their attention is on the upload queue.
5. Users don't know they can click on upload queue icon to reveal the queue panel again.
6. They don't know close button on the toast is used for refresh page.
7. The feedback of adding photos to an album is not clear enough.
8. Users try to hover or right-click on albums to see if there are actions.
9. Users try to click Logo to go back to the initial page.

03

Solutions


1. Making buttons look like buttons (adding a frame around the text) and changing wording.
2. After creating an empty album, the focus should be on the album name field to help user to rename.
3. We should refresh the album automatically when there are no existing photos.
4. We don't reveal the upload queue panel automatically when there is a new upload task. We should animation and red dot on the icon to indicate there is an ongoing task and finished task. Once the upload is finished, we show the toast with a "Refresh" button on it near the upload queue icon.
5. We show "Add to Album" on upload queue panel after the upload task is finished. Once the photos has been added to the album, we show a toast.
6. We can show more button when a cursor hovers on an album. After more icon is clicked, we show an action menu including rename, delete, etc.
7. Adding link to the initial page on the logo.

process icon

Visual Design

Icon design and visual layouts

Mobile App

01

Photos, Albums and More


New information architecture makes users easier to access photos and information they may need.

Android screen
Android screen

I have tried different layouts earlier, but those layouts have 2 issues:
1) users can see less albums in a screen.
2) People's faces in the photos cannot be seen.

02

Album


Album cover photo is used as big banner in ablum page.

iOS screen
iOS screen

03

Lightbox


Viewing the photos in full screen.

Android screen
Android screen
Android screen

04

Shared Albums


Users can find the albums they or other peoeple shared here.

iOS screen
iOS screen

Web App

01

Photos


Timeline view and folder view are provided, so users can choose the mode they need.

02

Albums


Album list has manual ablums which are created by users and smart albums which are created automatically based on topics.

03

Lightbox


Dark background is used to make photo stand out. Users also can know who in the photo are, when and where this photo was taken, and manage tags from the imformation panel.

04

Smart Albums: Things and Places


Random photos can be automatically grouped by an image-recognizing technique that can identify the people, subjects, and places in the photos.

05

Smart Albums: People


Users can easily find all photos of someone they want to view or share.