UpContent Redesign

up.png
 
 

Background

UpContent is a custom content discovery tool created to help users find more relevant information quickly. I redesigned the entire platform which consisted of undergoing research methods and then design.

Problem Space: the current platform is deemed outdated and also difficult to maintain. It is not flexible for users to easily use and the design patterns are outdated.

Goal: Create a better user experience for users and easy to use by identifying user needs/goals and pain points. Create a more friendlier/more professional service for our users.

Personal design goals: Improve my design skills (research, analyze, prototype)

 
 
 

User research

Screen Shot 2018-02-25 at 6.53.35 PM.png


I created a research timeline and effectively worked throughout the months to keep with the schedule. Research methods included:

  • Competitive Analysis
  • Heuristic Evaluation
  • Interviews & Analysis
  • Affinity Mapping
  • Personas

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 walked through each of the screens and analyzed the structure and determining intervention points throughout the original screens. 

 

Heuristic Evaluation

Not only did I take notes when walking through each screen, I also conducted heuristic evaluations using Nielsen's Heuristics. I conducted this to test the site's usability.

I found many examples in our site where some heuristics were violated. I wrote them down on a document and relayed it to the team to make sure we solve the usability issue for our future releases.

 One example is in the sign in page. There is no clear indication if an error occurs and also doesn't prevent errors from happening.

One example is in the sign in page. There is no clear indication if an error occurs and also doesn't prevent errors from happening.

 

Interviews

I conducted 1:1 interviews from UpContent users 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 
  • Walkthrough of several features on UpContent
 I recorded all the interviews and listened to all of them and took notes.

I recorded all the interviews and listened to all of them and took notes.

With these information that I received from our users, I was able to consolidate my notes and gain an idea of who our users were and how we could improve our product. It turns out, most everyone was going through the same experience and same pain points.

 

Affinity Mapping

With all the huge amounts of notes from users, I gathered them together and organized them into similar groupings based on their relationship (from ideas, opinions, issues). Affinity mapping helped me to see where the main pain points occur, what the users are saying about x, and sparks design ideas when reviewing the groups.

Our company space is not big so I could not use sticky notes. Instead, I used an excel sheet which worked just as fine! Here is one excerpt from the query builder grouping.

 

Analysis and Brainstorming

Based on the analysis of the results, I had a brainstorming session to figure out which new functions, which renewed old functions, and which visual approach, could satisfy users needs.

brainstorming.png

 

User Journey Maps

After the analysis, I created a user journey map that shows where the ups and downs of users are. I created one for new users and existing users since their journeys are a bit different. The biggest pain point that each group faces is when they are building a topic - currently, UpContent gives them a very complicated query builder to fill out which stresses the users mainly because they don't know how to use it. This was something that we needed to figure out.

New Users Journey Map.png

 

Our Personas

JANE D.
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 S.
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.

 

DESIGN


Paper and Pen

This is probably my favorite part out of the design process. Sketching out the research that I've done on a clean sheet of paper / whiteboard. Paper prototyping helps me to get quick sketches out and change them as needed. It also gives the first impression of the flow and look/feel.

 

User Testing

This was something that I heavily focused on starting. We conducted user testing at all our stages of fidelities. Some were think alouds, where users give their impressions and walkthroughs on the newest features. Other user testings consisted of a/b testing. User testing is important because it allows me to observe how users interact with our product to see what is working and what is not. It shows me if the designs are meeting their expectations.

Below is an example of a/b testing that we conducted on the way our list view should look. (Image on right, image on left or no image).

 

Site Map

 

Agile Method

I was constantly in collaboration with the main engineer and front end developer. We had weekly standups and meetings to figure out what we needed from each other and the timelines. We also used Trello, which helped to organize our "to do list".

Screen Shot 2018-03-01 at 3.36.23 PM.png

Final Screens

Below are the final screens. I

Below are some of the implemented redesign screens.

 
 The main page is much easier to follow. On the left side, all the topics are shown and filters are present as well. We designed the article grids so that it looks less bulky (previous complaints from a lot of users). Everything is intuitive and users know where to click and what to do.

The main page is much easier to follow. On the left side, all the topics are shown and filters are present as well. We designed the article grids so that it looks less bulky (previous complaints from a lot of users). Everything is intuitive and users know where to click and what to do.

 
 Some users who like to quickly skim are not too happy with grids as it doesn't follow the "F-reading style." I created viewing options to solve that problem, thus allowing users to quickly scan the articles. 

Some users who like to quickly skim are not too happy with grids as it doesn't follow the "F-reading style." I created viewing options to solve that problem, thus allowing users to quickly scan the articles. 

 
 Clicking on the article and reading is easier with less distractions. You can still scroll through the articles but the main focus is on reading the article here. You can also adjust the text size and spacing.

Clicking on the article and reading is easier with less distractions. You can still scroll through the articles but the main focus is on reading the article here. You can also adjust the text size and spacing.

 
 Notes is a new feature. Users can write notes on a topic or specifically within an article, and they can see both types of notes on this modal screen. It displays all the notes for each topic and article suggestions.

Notes is a new feature. Users can write notes on a topic or specifically within an article, and they can see both types of notes on this modal screen. It displays all the notes for each topic and article suggestions.

 
 

Final Thoughts

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. My next steps are to keep doing user testing and get more feedback. I am planning to use all the ideas from the brainstorming session for our future releases.