Republiq: Case Study
Context:
My brother and I created Republiq in 2019 because we were concerned about the way people consumed and discussed news. We wanted to break people from their echo chambers and expose them to new perspectives on hot news stories.
Goal:
To make a mobile app that aggregates the top stories of the current news cycle and provide an anonymous discussion forum for each topic.
This design breakdown will review the decisions that went into the creation of Republiq’s user interface and aesthetic. Disclaimer: the opinions displayed in the UI are sourced from users on the internet and do not reflect my own views.
Role:
Solo Designer and Full-Stack Engineer
Design Objectives:
- Show all top stories at once
- Intuitively show each news story’s popularity
- Feature multiple journalistic perspectives for each story
- Make it easy to view other opinions and share your own
Homepage:
The homepage is made up of three sections:
The homepage is structured in this order because the headlines are the most important and the discussion won’t make sense without it. However, I made the discussion section peek so the user knows that it’s available with just one scroll gesture (the homepage scrolls infinitely so that scrolling down reveals more opinions). All of this is available before the user needs to make a single gesture.
Splitting each section gives the homepage some space, and keeps it from feeling claustrophobic.
- General Header
This section is meant to set the context of the home screen and to make it feel like a news app.
2. Headlines Section
This headline section tackles goal 1 by making every headline visually available for a quick scan.
3. Discussion Section
This section tackles goal 4 by organizing every opinion in a reddit-like comment.
Previous Drafts
This homepage was, of course, not my first draft. As it is in UI, a lot of solutions are not obvious at first. Here are a few iterations that didn’t work because they didn’t accomplish our design objectives.
News Page
The news page is a central part of Republiq’s experience because this is where the user can view multiple journalistic perspectives and engage with user discussion. Here’s how the user would navigate to the news page.
The News Page has two sections: the News Story Section and the Discussion Section.
Again, like the home page, I placed the news section first in order to set the context for discussion. This time, however, the user gets a much more nuanced picture since we’re providing multiple journalistic viewpoints — the NYT, WSJ, WaPo, Fox News, etc. For this section, I drew a lot of inspiration from Reddit and Google News.
1. News Story
2. Discussion Section
This is the same discussion section as in the homepage, but it only features the opinions of the specific news story.
Posting
We wanted our users to give their opinions, so we made the post button always accessible. It hovers above the homepage and newspage (as opposed to being a button only tucked into the news page).
Aesthetic
I wanted to briefly disccuss the subtle touches I added to elevate the app’s aesthetic. I wanted to give our app some personality without being overbearing. Since this app is premised on good discussion, it was important that none of the UI ever visually competed with user opinions for attention.
1. Logo
I designed this logo to be read a few different ways: (1) gradations of heat: think a “hot” news story 🔥, (2) gradations of shadow: a story is always nuanced, and always has multiple perspectives to be understood from, (3) a sun: to show that we have optimism for our public discourse.
2. Small Touches
3. Experiments
Since every user on this app is anonymous, profile pictures can’t use real photos. Here’s an idea for anonymous profile pictures that ventured a bit from the established aesthetic and made the app more personable.
Conclusion
We shelved this app in late 2019 so both of us could focus on our schoolwork. I had a lovely time working on Republiq, and if we bring it back, future iterations would require much more feedback from real users.
Thanks for reading.
