UpContent Redesign

Group 11.png


My first assignment at UpContent was to redesign the whole product! Not only that, UpContent added a new feature called teams collaboration, where members of an organization can collaborate within UpContent. As a new user myself, this was a challenge that I needed to tackle and finish with a timeline of around 2 months. Collaborating with the CTO, I conducted the research, analysis, ideation and created the final design.





What is UpContent and Who Uses It?

UpContent is a custom content discovery tool created to help users find more relevant information quickly. 

To better understand who I had to create this product for, I conducted various methods of user research to better understand who we are building the product for. Through interviews, current site evaluation, and competitive analysis, I was able to understand our users' needs, goals, and pain points, which then allowed me to start designing based on these factors.

Competitive Analysis

I conducted a competitive analysis to evaluate our competitors. Competitive analysis helped me to understand where UpContent stands in the market and if there were any gaps. I wanted to learn the competitors' strengths and weaknesses, strategies that create an advantage. It allowed me to know my market, product and goals of our product.

Screen Shot 2018-01-24 at 2.57.16 PM.png

From the competitive analysis, one thing our product is doing well is allowing users to specify what type of information they look for through a query builder. One weakness that we lack was the lack of connecting various social media accounts (we only allow Buffer and Hootsuite). 


Evaluating the Current UpContent

I evaluated the current screens by conducting a simple heuristic evaluation. I walked through each of the screens and analyzed the structure and determining intervention points throughout the screens. Below are just two of many screens. I also conducted think-alouds with UpContent users and received valuable feedbacks of the current interface.



I conducted interviews in order to understand how the user interacts with our product. There are several things I asked when conducting the interviews:

  • Users' backgrounds
  • General use of technology
  • Goal of using UpContent
  • Users' objectives and motivations
  • Users' pain points and satisfactions 

With these information that I received from our users, I was able to consolidate my notes and gain an idea of who our users are and how we can improve our product. 


Our Personas

Jane is the Director of Marketing for an agency. Her responsibilities include developing strategies for new and existing products, meaning that she needs to know all the current news. She is always researching about new products and technology features and uses tons of search engines and different websites to get all the information she needs. Sarah needs a way to get all the relevant information quickly without wasting time.

Paul is a freelance writer, who is currently writing a book about the current topics of climate change. His task is to know everything about climate change so that he can write about it in his book. Thus, he is always online to searching for news, articles, journals, etc. He wants an easy way to find information about climate change without having to filter out the search results each time.


User Flow

Overall, the flow of UpContent is pretty simple and straightforward. The flow shows all the steps that users can perform within the main screen. The main goal is for users to browse their articles.


Google's Material Design

UpContent didn’t really have their own material design. It was mostly designed based on what looked good. I wanted to change this tactic by introducing Google’s material design. Luckily, the CTO and the rest of the members were highly eager of following the material design component, as it would save time and be easier to construct for both myself and the engineer. Also, the material design guidelines would eventually help lead us to a pixel-perfect mockup. Note: while most of the new screens are based on Google’s MD, some are not (eg. color). 

Material Design.png


Low Fidelity


Medium Fidelity


Site Map

This is the final site map for UpContent - it is much bigger than the original site map. This is mostly because of the new teams collaboration feature - now, users can collaborate with other members of their team by creating notes and seeing activity logs of what other members do. Users can also do all the functions from the original UpContent as well (browsing articles and reading them).


Final Screens

Below are the final screens. I was constantly in collaboration with the main engineer that was to implement the designs and together, we were able to create the new UpContent. Some of the important screens are shown below with comments.


Other Screens

There were new screens that I had to design, because we were also creating a new feature, called teams, where users can collaborate within UpContent to share or talk to each other about the articles. These are some of the screens pertaining to teams.


Final Thoughts

What a big, first project. I had a lot of fun working on this redesign and I was very happy at how welcoming the UpContent team members were in all my design thinking and following material design guidelines. There are still some glitches here and there with the designs, but hey, I'm still learning. My next steps are to follow through with upcoming feedback from the end users. I'm gonna keep track of these feedbacks and continue to improve the UpContent product. Once more and more people sign up, I would like to start contacting some users and do interviews to learn more about our users and come up with more, new ideas on how to improve UpContent.