This is the detailed design of Group Photo, feature 01 of Dreaming Elf. I lead the design of this feature in collaboration with UXUI designers, graphic designers, motion designers, and engineers.

1. Brief

User Goal 1: connection with friends through interaction
User Goal 2: high-quality videos with built-in templates
Business Goal 1 2: video exposure, post number
Business Goal 4 5: friends message, DAU increase

2. Context

We launched a DressUp function: each time the user makes a donation, the elf will get a new look. The function was designed to promote users to post their elves in the new looks, but:

1. Users found it dull to post an elf who simply stands there doing nothing

2. Lack of interaction in the process so users didn’t want to share with friends

3. Ideation

How might we add more interactive elements to encourage users to post videos and share them with their friends?

I decided to add a function that puts 2 elves together. More precisely, after users get new looks, we encouraged them to visit friends, interact, and record moments in the form of a video.

4. Flow

I involved designers and engineers in the team to discuss the user flow and its feasibility in jumping between pages. The feature should be a very lightweight one: one button for photo taking, pose selecting, and photo creating. 

Main State

Objective State

5. Paper Prototype & User Testing

I made a simple paper prototype to show the design idea, brought it to the weekly product meeting to discuss with engineers, designers and presented it to PM Head.

6. Iteration & Mid-Fi Prototype

Based on usability testing, I made changes to the original user flow, and finished the wireframes. Then I passed this finished version to graphic designers, motion designers, and engineers for the product launch.

01 Multiple entries

02 Final Post Page Redesign

Considering the cost, I didn’t add the edit function into this MVP version, and for the buttons, I put the rewards information so that users are more encouraged to post or share the video. We moved on with version B after product review.

03 Objective State: Replace Share with Leave a Message

After consideration, it makes more sense to leave a note to the friend who took the photo with the user instead of sharing it to someone else who is not in the picture at all. So I replaced the Share function with Leave a Message function in objective state.

04 Animation Design: Keep the Mistake State

When I reviewed the work done by the animation designers and brought the flow for usability testing in product review, people actually loved the “mistake state” a lot. Compared to a mistake, they see it as a surprise. So I decided to keep the “mistake” state.

05 Functions Left Out

The two functions that I decided to leave out for this time is

1. Multiple elves taking a picture: technically costly, and will make changes to the whole user flow, which is low desirable and feasible.

2. Customize the photo: technically costly, so I decided to test the MVP feature first before contributing too much into it.

Spotlight Design Decisions I Made:

1. Suggested users take group photos when they get a new look —> new looks are a time when users have the strongest will to share

2. Enter a friend’s house to take the photo instead of at your own house—> more chances to interact with a friend

3. 4 posts selection for photo taking —> enables users to try out different interactions and to post more

4. Auto-video-screening: when the user presses the photo button, auto-screen-record is on —> convenient for users to share

5. One photo-taking, multiple interactions: users can post to TikTok, share with their friends, or save the picture/video.—> Provides users with multiple options so they could select ones that fit their needs.

7. Delivery

You are very welcome to check other subprojects here

And for sure, feel free to go back to the main page of Dreaming Elf :)