Challenge 2: Wireframing Reddit
What is Reddit?
Reddit is a social media network that allows you to be subscribed to different subreddits (like categories) of your own interests. These subreddits range from sport news, technology, medicine, memes, educational subs, tv shows, etc.
I personally use it a lot to be able to keep up with several of my personal hobbies and interest. It also allows you to interact with other users, directly on their posts, to move the conversation forward; after all, if you’re in the sub your interests are similar but you might have differing points of view; you can learn a lot from other users.
UI elements and flow
The main UI elements are:
Action menu with 5 buttons: front page, your subs, post creation, chat, notifications. This action menu will be displayed at all times during your browsing, up until the point where you enter a specific post.
There’s also a search bar, a profile button which allows you to see your account’s information and change your settings.
Thumbnails are also prevalent, but they are an option that can be disabled. They give you a preview of the picture/linked information on a post.
One very important UI element (which is not usually seen) is an automatic scroll button, which allows to jump from one parent comment to another. This makes browsing comments sections in a more efficient manner, instead of having to manually scroll through hundreds or thousands of comments to get to the next thread.
There’s also elements like keyboards, action buttons, informational components that display the amount of comments on a post, the number of up/downvotes, etc.
Reddit’s commenting flow:
In my selected flow, I want to be able to describe how to generate a comment on a specific post, on a specific subreddit. This, as a whole, takes 5 steps and it’s a fairly simple process but it includes several UI elements which are worth giving a closer look to.
The flow goes as follows:
Main page > your subs > sub selection > post selection > comment creation
The posts on the front page (the default the app opens up upon booting) will redirect you to the comment section of that specific post, and if the post includes an external link, you can visit the link from the comment section as well. On here, there are other UI elements; up/downvotes, amount of comments, a share button and an award button.
From the front page you can also use your action menu to go to your sub list. On here, they’ll be categorized as your favorite subs and your entire sub list. The favorites list is entirely created by you rather than automated.
Once you enter a sub, you’ll be presented with information from that sub, along with a notifications bell and a “joined” button (which is replaced with a join button if you’re not subscribed). There’s also a categorization for posts, about (information about the sub), and a menu for the specific sub (which displays rules, discord links if they’re available, support, etc). There’s also a categorization in case you want to sort by recent content, the best posts of the month/year/all time, etc.
Why Reddit?
The reason I chose reddit is because it has a lot of UI elements which other apps don’t have, and a good analysis of this app can be productive for future projects. It is also one of my most used apps, so I already know how the app works/flow which allows me to focus a little better on the individual elements rather than the whole functionality of the app.
My experience:
The overall process of creating a wireframing was stunted by my own standards. At first, I was trying to replicate too accurately what the app portrays on screen and that made me lose a bit of focus on what was really important which is analysing the flow and all the elements that come with it.
I decided to work with Sketch to get some practice in and the functionality was similar to that of Figma and Adobe XD. It’s simple to work with, but coming from an industrial design background, it takes a bit of time to get used to the program’s differences with the software I’m used to work with.
Making a wireframe gives you valuable insight on the functionality of an app and allows you to better understand user flows better.
