举办线上活动，用老用户带新用户是个促进产品用户数增加的不错选择。本次设计练习采用线上活动的方式，通过老用户分享邀请自己的好友共同完成作品，希望能为产品拉新。这次练习选择了LOFTER这个产品。

一、活动介绍

活动名称：好基友一辈子  圣诞老人和驯鹿--廉价cosplay大赛

活动大致介绍：

老用户邀请自己的好友一起参与活动，一个cos圣诞老人，一个cos驯鹿。邀请的好友可以是LOFTER的用户，也可以是非LOFTER用户（重点）。两人共同完成一个作品。两人可以在同一空间完成作品，也可以在不同时间、地点完成一个作品（重点）。参加就送福利币。

作品评比以获得的喜欢数为标准，获得喜欢达到一定数目送乐乎打印优惠券。获得喜欢数前几多的用户，分享XX大奖，奖品是双份。

二、需求分析

2.1需求分析

采用分析关键要素的方式，把业务需求和用户需求转化为设计需求和具体的功能点。

业务需求（右击在新标签页打开查看大图） 用户需求（右击在新标签页打开查看大图）

2.2 需求总结

按照流程中的接触点总结功能点如下：

需求总结（右击在新标签页打开查看大图）

三、情境场景剧本

根据以上总结的功能点，撰写情境场景剧本，进一步细化功能点。

1、LOFTER老用户Teddy 在APP中看到活动banner，对这个活动产生兴趣，点进去看活动详情。

2、Teddy看了一下活动介绍和大家上传的作品，发现即使跟好基友不在一起，也能玩。Teddy觉得这个活动很有意思，打算参加活动

3.1、Teddy通过拍照入口，拍了作品。在编辑图片的时候，Teddy根据提示为好基友留好了位置。通过微信/qq发送邀请给自己的好友 一颗猫 ，等待好友参与，并获得福利币。

3.2、Teddy 刚好和好友 一颗猫 在一起，两人想了个点子，拍照上传了作品。获得了福利币

3.3、Teddy 想到自己的好友 算不准大师 也在玩LOFTER，想邀请他参与，给他发送了邀请，获得了福利币。

4、一颗猫 看到微信/qq中的邀请链接，看了好友的作品，决定参与活动。

5、一颗猫 下载app，登录进去，上传了自己的照片，完成了作品。并获得福利币。

6、完成作品后，app提醒一颗猫，分享到社交媒体，获得喜欢数，赢奖品。一颗猫分享了作品链接。

7、Teddy收到通知，得知自己和一颗猫的作品完成了，同样，app提醒自己将作品分享到社交媒体，获得喜欢数，赢奖品。Teddy分享了作品链接。

8、cherry 收到了Teddy的点喜欢邀请，点开邀请页，看了之后决定点个喜欢。cherry点喜欢按钮，跳转到授权页，cherry点击授权后，为他们点喜欢。

四、流程图

按照情境场景剧本，梳理具体的功能流程和每一步需要用到的数据。

流程图（右击在新标签页打开查看大图）

五、交互稿

5.1活动入口

活动入口设置在首页的banner，使用这个流量大的入口，希望能让尽可能多的用户看到。同时也要使用趣味性、有吸引力的banner图，提高点击查看活动的转化率。

右击在新标签页打开查看大图

5.1.1 拍照

右击在新标签页打开查看大图

5.2 编辑图片

编辑图片页面根据之前的需求分析，设置了给好基友留位功能，当然用户也可以直接发布。根据业务目标，希望用户能点击给好基友留位功能这个按钮，所以这个按钮放在有方便点击的右下角，视觉上给予突出的样式。

右击在新标签页打开查看大图

5.2.1留位

为了方便用户快速选择，在留位页给出了热门的两个角色的模板。在更多页，方便用户切换给出了切换身份的tab，而不需要用户返回再次选择另外一个身份的更多按钮，减少操作步骤。

右击在新标签页打开查看大图

5.3 发布

5.3.1 没有邀请基友参与的发布流程

发布后回到活动页，看到自己发布的作品。

右击在新标签页打开查看大图

5.3.2 分享流程

分享到微博流程：

右击在新标签页打开查看大图

分享给微信好友流程：

右击在新标签页打开查看大图

分享到微信朋友圈流程：

右击在新标签页打开查看大图

分享给QQ好友流程：

右击在新标签页打开查看大图

分享到QQ空间流程：

右击在新标签页打开查看大图

分享给易信好友流程：

右击在新标签页打开查看大图

分享到易信朋友圈流程：

右击在新标签页打开查看大图

分享反馈：

右击在新标签页打开查看大图

5.3.3 邀请基友参与的发布流程

在提示发布成功页，给用户提供发出邀请的按钮，不阻碍用户的主流程，又在合适的地方提供合适的内容。

右击在新标签页打开查看大图

5.3.4 邀请子流程

微信邀请流程：（和分享相比，文案不同）

右击在新标签页打开查看大图

QQ邀请流程：（和分享相比，文案不同）

右击在新标签页打开查看大图

LOFTER粉丝邀请流程：

右击在新标签页打开查看大图

邀请成功/失败反馈：

回到活动页，以toast形式提示

右击在新标签页打开查看大图

完整交互稿地址：http://1aezh1.axshare.com