HelloJoey is a parenting app, which helps people build a rock-solid parenting foundation in just 10 minutes a day.
My role is a product designer. When I joined the team, the first thing I did was to organize all design materials, which helped me dig into the product quickly and build a more consistent design with the team. After that, I worked closely with product managers, developers, researchers, and the marketing team to optimize the current product based on the use case. I am responsible for user flow, wireframe, prototype, and user interface design. I was involved in many detailed design, for example, notifications, how to design push notifications to user? and so on. The below comment deign thinking is one of my works which i think is an interesting complex topic for me. Also, i designed the marketing brochure after communicated with the marketing team.
Lab, a new feature, which has not shipped, features that parents can join in a group study learning a specific topic guided by a parenting professional. From the use case we interviewed, users eager to communicate with other parents regarding their confusions and want community support.
To improve user engagement, user stickiness, we add a feature: comment and reply. Guider can reply to all users who join in the group study, and users can respond to each other as well. The community is formed up.
Before hands-on sketch to design, I discussed with product managers and developers many times about the detailed comment deign, which including :
1. what kind of comment mechanism or form do we use?
2. if we add comment interaction?
3. How to display comment and reply?
4. how to sort comment and reply?
5. How to load comments?
6. If we limit the length of character?
7. if we support @?
8.If we support comment management?
1. What kind of comment form do we use?
Solution: Multi-directional comment.
Why: One-way comments are biased towards letting users express their opinions, but they don't want users to interact, and the focus is more on the content. Two-Way comments, only the author and the user interact, and The interaction is not active. As for our product, We received a bunch of reviews from app users who eager to communicate with other parents. Also, Our goal is to build a friendly parenting study community. Therefore, one-way is not appropriate. Multi-directional comment: After the user comments, anyone can reply, and can interact multiple times. Multi-directional comments is appropriate for our product, which is a strong social form, users and users can interact based on content reviews and based on observations and comments.
2. If we add comment interactive action?
Solution: Yes.We can like and reply.
Why: Comments interactive action generally includes: reply, like, recognize, light up etc. As for our product, we choose to reply to and like(support) actions. We want to make users feel their opinions are precious for us and like(support) to encourage the user to be active to express themselves.
3. How to display comment and reply?
Solution: Use the first-level comment as the theme, and all the responses ( the second-level comments) of the comment are displayed within the scope of the topic.
Why: The comment area is usually an extension of the content and is an area where the user interaction is active. I compared Facebook, Twitter, etc to decide which display structure fits us.
The Facebook display structure is to use the first-level comment as the theme, and all the responses ( the second-level comments) of the comment are displayed within the scope of the topic.
Facebook Screen Twitter Screen
The Facebook display structure is to use the first-level comment as the theme, and all the responses ( the second-level comments) of the comment are displayed within the scope of the topic.The advantage: relationship between the first-level comment and the second-level comment is clear. Each level of the comment can be an extension of the topic interaction, and the second-level comment area facilitates the user to browse the dialogue process, which is beneficial to enhance user interaction and create a heat.The disadvantage is that when there are too many secondary comments, the first-level comments have limited exposure, and the ranking and filtering requirements for comments are higher. Then, the second-level comments have less space to operate.
The Twitter display structure treats the first-level reviews as the second-level reviews, and focuses on the users, presenting the user's current comments.The advantage is that all comments are exposed to the opportunity to create a relatively objective comment area, and each comment has the same operational space. The disadvantage is that the content of the comment reply is not continuous, which leads to a poor experience in browsing the conversation, and it is relatively challenging to extend the topic.
4. How to sort comment and reply?
Solution: Arrange in order by ascending order. The earliest comments have the highest exposure.
Why: To Improve the continuity of the comment dialogue and the user experience, make it easy for the latecomers to browse enjoying the participation.
5. How to load comments?
Solution: Pull up to load more pages.
Why: It is more common on the mobile application. It conforms to the gesture operation of users browsing content on the mobile. User habits have been fully cultivated. Also, The advantage of the pull-up loading is that it saves user traffic, and when the user needs to load again, the product conforms to the information flow form.
6. Does it support @user?
Why: @Users are more suitable for our products with high interactive comments, to see good content to share with friends.
7. Do we support emoticons?
Solution: Not right now.
Why: First phrase goal is to fulfil users basic communication need; after that, we can add emotions later.
8. Appropriate comment management?
Why: Appropriate comment management means app backend needs to have corresponding functions to give operators management of comments, such as review, comment deletion, comment topping, sensitive word filtering, etc.
Marketing Printable Brochure
My role: Gathered requirements from the marketing team, and deigned brochure(Illustrations are not from me).
Requirements: Combine two of the app screens as one "page" like this (measuring 6x6). The "print" size would be 6"x20" and they will score and fold.
1. square bi-fold brochure inches by 6 inches
2. Elements: colorful, show our screens, logo, screenshots scaled down, testimony, marketing event, horizontal.
Goal: To distribute to parent at school meeting or parenting events.