Popdaily is a media news with more than 3 million readers in Taiwan. It focuses on topics interest to 18-26 girls, and publishes across its own website, Facebook group and Instagram. To further engage with readers and get more user data, Popdaily wanted to create mobile app. Joining the project as a freelance designer, I worked with client and development team to plan roadmap, conduct research to validate design and product strategy. Finally, I delivered pixel-perfect design for the MVP.
The app is officially launched in November 2018.
The goal
Design Popdaily’s forum app MVP for girls to share ideas and read Popdaily’s articles.
Challenge
How to start from a bunch of features list?
Our client has a lot of creative ideas (as the picture below) while lacking validation, so we are not sure what is the core value, and hard to prioritize. To meet the target, launching MVP in 3 months, and also validate the early concepts, my strategy is to design the basic function first and do research in parallel. When the engineering team is implementing, we can decide what feature to add on based on research findings.
This is feature list I got from the client. I put the basic function as P1, and start design first.
Phase 1 : build the bone first
Based on the client’s request, the primary purpose for the app is to let the user post ideas and interact with each other. So we start from this first and include functions below:
Login
Set up interesting topics
Browse posts - comment, save, share, link to related Popdaily articles
Create a post - edit, insert photos and remove the post.
Notification
Profile - manage my post, saved articles.
Project management : Communicate the expectation for deliverables
I made the design plan to communicate the schedule and deliverables. To expedite the process, I skipped the jump to design first and validate design at the end of user interviews.
Create the user flow from the client’s main use case
The flow based on user’s goal and phase 1 features. This flow is used to check if interaction I design is smooth.
Sketch
Based on user flow and priority of the functions, I sketched the interface and explored design variations. The one below is the selected one for higher fidelity design.
Lo-Fi design
After I had more concrete ideas from the sketch, I moved to digital lo-fi design. I used the lo-fi design to review the client and get feedback from users.
Research
The research has two goals:
1. Understand what might motivate a user to use Popdaily forum app.
2. Identity the usability problem and get feedback on the current design
To achieve them, I interviewed 6 users to understand their behavior on social media and conducted a usability test with the lo-fi screen.
(Below is the task list example for the usability test.)
Research findings
From there research, we learned:
Users prefer to read, and seldom post in social media
Users are picky at the content feeding to them. They follow the Facebook group they like but will unfollow the group if find the content is not interested anymore.
Users are visual driven, they prefer to use a picture than text in a post.
The information provider is essential, and influences the credibility of the information
When having a question, they prefer to “search” first, rather than post “question” to public
Changes from user’s feedback
Based on research, we decided to make more in-depth interest matching and considered search placement first because search is critical to help a user get the information they want. Besides, we kept showing username rather than anonymous.
Hi-Fi design
I modified the design in Hi-Fi screen and delivered the wireframe. Below are selected flows and interactions:
1. Interest setup in registration
To feed users the content interests them, the app asked users to drill down to keywords in interest setting and will prioritize as they preferred. In addition, the category they select will become the filter tab, which help user to jump to their interested topic quickly.
2. View post, comments, and related articles
The design goal was to let the user quickly browse all sections at a glance so they could decide where to go. Therefore, I used tab to switch between comment and recommended article and horizontal scroll to browse articles.
3. Notification mechanism
If a user responds to a post, should the user keep getting notifications with “any” activity of the post? If not, when should the user get notified? - The challenge in designing notification is “how frequent to notify user”. To avoid information overload, I decide to notify the direct relevant users
Phase 2 : Grow up step by step
To work with client more closely, we picked less features in a iteration, and shorten a iteration. Below are the features we decided to do regarding to value to user:
Search: need to show Popdaily’s post and user-generated post in results.
Article area: an area that allows users to read Popdaily’s article, like Popdaily website.
Recommendation: each post has recommended Popdaily articles and related post
Challenge
How to distinguish Popdaily and user-generated content?
The initial idea is to use the same list view to present both user and PopDaily’s content. However, this might confuse users about what content they are reading. Therefore, I needed to let users understand two different functions in the app:
1. Forum: a place for users to share ideas and ask questions
2. Articles: a Popdaily articles reading zone.
Design explorations
We decided to pick design 3 because it can present more articles, and the Popdaily can using the top one to highlight news or promotion. Also, we decided to remove the filter to save space and follow the articles order in Popdaily website.
Navigation ( home - category - article)
Based on design 3, I further explored about “how to go an individual article” and “actions in article page“.
Search
To help users navigate to the content they want to see, the app shows searching history by default. Also, in the search result, it shows 3 most related result in both discussion and Popdaily articles.
Result
After delivering phase II design, the client formed an in-house app development team worked on the rest of the features. Popdaily started small group test with 300 users in September and officially launch in November, 2018.
Takeaway
The goal of MVP is to quickly get the market’s feedback on the idea. Thus, I narrowed to higher-fidelity quickly to meet the timeline. However, hi-fi might constraint the imaginations. Also, keeping delivering features might neglect the product’s core value. Therefore, if I can access users and clients more efficiently, (in this project, I am a remote freelancer in different time zone), I would try to iterate more ideas with abstract or lo-fi designs first, and then narrowing to higher fidelity design.