Making saved social media posts into a To-Do List

Leanne Lim Theng Theng
10 min readJan 12, 2021

I signed up for a 7 day bootcamp on Intro to User Experience course by Smartcademy Singapore to learn more about, well, User Experience. We were taught and tasked by our instructor Moses Ong to create a high-fidelity UI/UX Design “To-Do” app and give a 5 minute presentation on it at the end of the week in our groups of 3–4. I must say, although this was the most intense workshop I signed up for, I enjoyed every minute of it.

This article is a step-by-step entry of the entire app creation process that I have learnt from the brainstorming to the final product, with some thoughts and reflections on the things I learnt and what I would have done to create a better product.

Designing a high-fidelity prototype that addresses a real problem in 6 days

5 steps I learnt from Smartcademy Singapore

Step One: Brainstorming & Initial Hypothesis Statement

  • We individually brainstormed as many problems as possible within the to-do list category in search for a new product idea on Miro
  • Next, we translated the points into 1 problem : 1 post-it note and prioritised the most impactful problems. In our case, ‘impactful’ was probably defined by how relatable and frustrating these problems were to us
Prioritisation of problems

With the points prioritised, we went on to spell out the problem we think people were having in relation to our topic (to-do lists). We also drafted a Hypothesis Statement to test and see if people were indeed suffering from the problem we think they were having:

Defined Problem Statement & Initial Hypothesis Statement

Step 2: User Research & User Interview

  • We tested our assumptions via in-depth 1–1 interviews on Zoom video conference with 3 male adults aged 25–30 years old
  • Interview questions were formulated and asked to find out about their pain, pleasure, context and behaviours regarding social media usage, personal activities and to-do lists
Interview questions according to topic

Step 3: Affinity Mapping & User Persona

  • We used Affinity Mapping to help us find patterns from our 3 interviewees
  • We got down to identifying common themes and patterns within interview data and then grouping them for 1 observation : 1 post-it note
  • A different post-it note colour was assigned to each interviewee
Interview responses from each participant in respective categories
  • We rearranged the above post-its onto a new board with actionable insights below
  • Actionable insights = “I” statements from the perspective of the user, gained by analyzing data and information in order to understand the context of a particular situation and draw conclusions
  • Each member were given 3 stickers each to vote for insights they felt were the most compelling
Actionable Insights

With the Affinity Mapping, three patterns were identified:

  1. People make to-do lists to keep organized
  2. They don’t like how they’re organizing things online
  3. ‘Save’ function available on social media apps are not utilised

The Problem

To summarise on our user research, we found that participants often struggle to decide on what to do and where to go with their loved ones. Although they gather inspiration from social media and create online to-do lists to keep tabs on their daily activities, they find it difficult to save and consolidate their data as existing apps do not organise and centralise the information automatically, making it difficult to retrieve.

These patterns and conclusions gave us a clearer picture of the problem we wanted to solve and our design direction.

Meet Jamie Teo

We harnessed the key insights from our user research and Affinity Mapping process into a user persona, giving ourselves a fictional representation of who our ideal customers of the app would be by incorporating all their needs, goals and behaviours into one.

Jamie, a 24 year old social media fanatic has an online presence on Instagram, Facebook, TikTok and more. She’s an extrovert who enjoys exploring new places with friends and family while gathering inspiration from posts on these various platforms. She’s always saving and sharing these posts by taking screenshots and tagging her friends, but forgets about them afterwards and also because of how troublesome it is to access these posts afterwards.

User Persona

Keeping this in mind, we created a Design Opportunity with a How Might We (HMW) statement:

HMW create a mobile app that allows users to save, organise and consolidate places of interests/activities from various social media platforms for future reference.

Step 4: Competition Analysis and Sketching Low-Fidelity Designs

Competitor Analysis

  • We looked at 3 competitors to find out how other apps are (not) solving our current problem for users
  • We liked 3 features across our competitor apps:
  1. The option for users to create their own categories/boards when saving posts (Instagram)
  2. Search function for a particular category/link (Collect)
  3. Allowing users to comment, mention and share their lists with others (Notion)

However, we felt that what these apps lacked were the ability to consolidate posts from various social media platforms and lacked the function for users to search not only a category but for a particular post. Current apps only have one but not the other.

Crazy 8 Exercise

  • Each of us had 8 minutes to sketch 8 screens, translating patterns identified from interviews into in-app functions…it was really intense…
  • With focus on communicating the main screens required to be developed and what each page will do
  • At the end of the exercise, we voted on the designs that we thought would deliver the biggest value to customers we’re solving for + left feedback for each other
Screens created

Step 5: Job Story and Task Flows

A job story helps us to focus on the context and break down our tasks into steps from the user’s perspective. Job stories explain the user’s situation which triggers their motivations to do something. We determined our job story using the following format:

A Job Story helps define the user and their goal

Task Flow

We split our job story into two sections and had two task flows to illustrate the series of steps the user takes to achieve each goal as explained below:

Task Flow 1
Task Flow 2

Step 6: Solution

the meeting point is a mobile application that allows users to seamlessly save and organise posts from various social media platforms for easy reference.

we made the prototype on Figma but i exported the frames onto Marvel, learning everything by myself :’)

On-boarding Process

Upon logging in, users will be greeted with the Main Page, where they can see their top 3 most visited categories within the app, and have a quick overview of all categories and all posts.

If users want to save a food post they saw on e.g Instagram on this app, simply copy the link of the post on Instagram, enter the meeting point and click on the ‘+’ icon. Click on ‘Paste Link’ to paste the post link in the Add Item pop up. The app will then automatically fill some basic information on the name, location, price point, etc. This function helps the user to save time and is a seamless way to fill up post details without manually typing it out. The autofilled details can be edited by the user at any time, but should they wish not to utilise the autofill function, they can toggle it off and manually input the details.

A confirmation pop up would appear after the post has been successfully added. Users will be able to view the details of the post that has just been added. If the user wishes to edit the details, the ellipses icon on the top right corner will take them back to Screen 4.

When the user taps on the left arrow on the top left corner, they would be directed to Screen 8 where the post will be visible within the category it has been added into, together with other posts in the same category.

Users can also check the ‘Visited’ checkbox if they have visited the location/done the activity, marked by a tick (Screen 7).

When users tap ‘Back’ from the Cafes page, they would be taken to the Categories Page (Screen 9), where they can view all categories added. Tapping ‘Back’ in Screen 9 will take them to the All Posts Page, where users are able to view all the posts they have added in the app. At any point users tap on the ‘Home’ icon at the bottom left corner, they would be taken back to Main Page (Screen 2).

Conclusion

To summarise, the features offered by the meeting point enables users to save, organise and consolidate all their posts in a single place allowing easy reference and access.

Learning Points

  1. Constant engagement and observation is essential

This was perhaps my biggest takeaway from the bootcamp. I realised that engagement and observation with both our users AND my group mates were important simply because people change and thus, needs change. On the participant front, we initially thought their only concern/need was an app to organize their social media posts from various platforms into one place. After the user research and further observation, we learned that our users were generally spontaneous in nature and often struggle to decide on their activity/destination of choice because of this. This information enabled us to include the ‘suggestions’ feature in the Main Page based on their commonly visited places/activities of interest in our app, so that our users could make their decisions easier and quicker.

On the group front, engagement and observation with each other was essential to ensure that every member was on the same page. As much as I thought we were in sync, our lack of communication resulted in a 3 hour long emergency discussion and many more hours of correcting and re-correcting our prototype the night before the presentation — certain features and ideas that were not previously discussed were added by one, leaving the others lost in confusion. All of us had the same general idea of what we wanted our app to be, but different methods to achieve it.

2. Finding the right problems to solve and the right questions to ask is harder than it sounds

It was only during the mad rush to complete our prototype I learned that research should never be taken for granted, because this would be the basis of our entire solution. We were given a day to look for a research participant and conduct a 20–30 minute interview with questions churned out the night (or like…a few minutes) before the actual interview. I think some of our questions were leading, for example: ‘How often do you find difficulty in deciding what to do with friends?’. This question skews the participants’ responses by making them think an experience they encountered was difficult for them when they didn’t initially think so or compel them to make up one for the sake of answering the interviewer’s question. I think a better way of asking this question could be something like: ‘Could you walk me through the process of how you decide what to do with friends?’ and then ask about ‘how often’ if it has been determined that users indeed faced difficulties in this aspect.

Honestly, I could use a little more training in this area because I still find myself struggling on deciding whether a question is leading or not and if it is, how it should be asked in a way that isn’t. Without solid research, there is no information available for a clear direction and problem to solve — we ended up trying to create a one-size-fits-all solution. We initially added a calendar feature so users could arrange to visit their places of interest on the app, allowing them to have greater visibility of scheduled events and doubling as a reminder (like the iOS calendar widget). This complicated our prototype and we lost sight of our original goal: to save, organise and consolidate posts in a single place, so as to be able to refer to them easily in future. If time were not (so much of) a constraint, I would definitely spend more time fine-tuning the questions and getting to know our users on a deeper level.

If you’ve made it this far, thank you for your kind attention. Please leave some comments or feedback, it would be of great help :)

--

--