Swaag for iPhone redesign

Swaag, a classic app of photo sharing, is hit for tagging and battle functions. You can use Swaag to add brand tag or text for photos. China also soon appeared some similar products such as Nice and Pinco. It’s popular after Instagram.

Instagram’s popularity with its excellent user experience not unrelated. It’s smooth and pre-upload photo sharing makes the whole process easy. As a class photo tagging app, Swaag have a lot of users and more consummate product form. But Swaag in photos uploaded editing process is very cumbersome. There are many places to improve about the user experience.

Current Swaag for iPhone. Left: Feed page, midde: Discover page, right: Battle page

Function Model

Swaag retaining only filters and tagging because it flagship for photo tagging function. This is a very smart decision. If it retaining editign of brightness, contrast, color and so on, like Instagram, the tagging didn’t seem important. It increase the threshold of sharing and make sharing becomes complex.

Current Swaag for iPhone have two process to share photo:

  1. Open camera > take a photo / choose filters > add tags > upload
  2. Open camera > open camera roll / choose current photo > crop > choose filters > add tags > upload

We edit photos often require multiple steps. Functional model can be divided into an iterative structure and a parallel structure like series-parallel connection in circuit.

Iteration is the process of feedback. Each iteration closer to the target and each results of iteration will be used as the initial state of the next iteration. Swaag is currently used in the iterative structure. Each step is only responsible for one function and must strictly abide by the order from cropping to select filters to tagging.

Instagram is a typical example of parallel structure. You can choose filters, edit contrast, brightness and other parameters can be adjusted in the same interface after select a photo. Waiting for you to adjust to how you want then release.

Iterative structure and parallel structure

Swaag’s feature of editing photos isn’t rich. Filters change photos but tagging add brand information in other dimensionality on photos. They belong to different dimensionality. And in the interface, tagging need to interact with the photo area, but select the filters doesn’t.

So, I think Swaag should choose parallel structure. This not only reduces the sharing operating procees, but also let users experience more fluid.

My Swaag for iPhone redesign. Left: take a photo, right: add tags and choose filters

The new interaction to tag

Tagging is one of the main functions of Swaag. But the experience of tagging is terrible. Click on the empty area of photo will first appear for the brand category. Users can select a brand in category, select a tag recently added or type text. There exist two major problems :

  • Brand category only better than nothing: Category natural beginning first digital brand top surface, then the alphabet. This takes too long to search from the brand list. Second, in addition to assist in accurately classify brand category when adding tags, category is no any effect. It is increasing an needless interaction.
Current process of sharing photo
  • Tapping to add tags is not precise enough and can’t preview.If you need to edit the position or text, you need to delete it and add a tag afresh. Although the frequency of edit is low, tapping is also not a good way.

In my redesign, I change this interaction:

1. When take a photo or select photo in the albums, the tag on the location of the original preset shutter button

2. By dragging , users tag on their favorite location

3. Drag release, keyboard and search page appears, user can search brand or type text

Left: drag a tag, right: search a brand

Thus, the operation is not only simple, users can also directly preview the effect of tags. If you want to edit the location or delete it, just drag the tag onto the deleted area. If you want to edit the text, just tap it.

To easily understanding, I made a demo:

If you want to share photo in the albums, the photo list at the bottom of the camera button. Users can see the latest photos and slide up to browse the full photos list. Meanwhile, the square photo area is also integrated into the crop function. Before the next step, you can crop photo without the need to enter a single page.

Click here to see the Chinese version.