Oblek

Media monitoring platform

— This work was modified in order to comply with an NDA Agreement.
Year
2020
Client
Oblek
role
Product Designer
Work
  • UI
  • UX
  • Strategy
  • User research
  • Leadership

Overview

Oblek Company began the design of a B2C web application called myoblek with the goal of becoming the biggest monitoring platform of Mexico, owning a database with over 160 million records of newspapers, radio, TV, web, social media and public records, processing over 440,000 notes a month.

Background

MyObleck is a monitoring platform, that focus on tracking tradicional and digital media, working in real time and allowing the user to customize and automate their search on specific topics.

During my time there we built an MVP, and I was promoted to CPO and was in charge on other products including Intelite, El Medio de Medios and TuInforma.

I was the first UX|UI designer of the company!

I initially joined Obleck as a web developer a couple of months after my web development full stack bootcamp, but after 2 days, I designed and suggested a new proposal and I was promoted to Product Designer.

Initially our designated team included 2 graphic designers, one brand manager/developer and a social media manager. I was in charge of designing and executing the product strategy, designing the landing, executing the UX strategy, leading and re-structuring a a cross-functional team, I also hired 8 new team members (developers and designers).

This was a waterfall company with goal of become an agile company, so I was also asked to give zoom conferences to all the company employees (100+) about agile, sprints, value of UX, among others.

Some key achievements of which I have listed below:

Implementing sprints. It helped aligning the team around the product vision, make rapid decisions, and also kept our stakeholders stay on track, engaged with the product and value the importance validating assumptions with real users.

Implemented company and employees OKR’s. This ****Increased productivity by focus on tracking regular progress towards goals and also aligning it with the company’s vision, strategy and top priorities, and also increased insight and transparency across the organization for top-level executives

Turned an idea into a product while juggling many hats. Shaping the product vision and strategy into something more tangible while growing and leading a team was a rewarding and exhilarating experience.

Understanding the problem

There was not real research so I defined a UX strategy to shape the vision, after doing an extensive comparative study, I did a set of interviews with over 10 potential users and I uncover the following:

  • Users needed to cross the search results with data from past years to understand past behaviour in order to develop a strategy for their own customers and export this in customized reports.
  • The information needed to synch in real time, because users have to be alert and review all platforms they can during the day.
  • The source of truth is very important for people to verify the validity of the source and avoid fake news.

Design Process

For this project I decided to go with a mix of lean startup (giving priority to testing and user feedback), and agile (the company goal was to deliver and scale the product fast as some services in there were already offered in a more manual way).

Value proposition

We needed to find the best product-market fit, and the team needed to understand the market and develop a product that meets their real need.

Business Model Canvas

To address the most important elements to launch the platform and get paid customers we also worked on the business model canvas.

Personas

Based on the research, together with the design team we created personas to help understand the goals, motivations, and behaviors of the people who will use the interface. We nailed down 6 different personas but decided to focus only on one.

The current clients were operative employees, but we were hoping that with the platform we would have a bigger market including decision makers.

User Journey

We created a user journey in order to make it easy for users to engage with the product, predict the behaviour the buyer personas were likely to have at different touch points, identify gaps and empathize with the customers.

Problem Statement

After gathering the findings from the research, I lead a workshop with the team to define the problem statement.

We decided on this one:

Communication-oriented professionals are frustrated with keeping track of their public personas or brands, through different types of communication channels, and with reacting in real time and differentiating between real and fake news.

The product vision

We identified the following key business goals:

  • We want users to easily configure customized searches
  • We want users to create tailored made reports and shared them in their prefered way.
  • We want users to have a big pool of verified sources synched in real time with the news of the world.

We decided to create a responsive web app.

At this point I started planning and executing sprints, team building activities to boost the moral and working on strategy and design on other brand products.

I also did a service design overview and identified some internal process gaps, I solved one by re-designed the internal software to capture data, decreasing the workflow time of capturist by 70%, this also included AI to cluster all articles related to one topic, and synthesize them it in a couple of paragraphs, so instead of having capturers reading 10+ articles and manually creating the article, they only had to set up a few parameters, click on a button and do a minor review to make sure everything was written properly.

This helped the product by having more information captured everyday and an even bigger database.

User Scenarios

I co-created with the team a set of scenarios to understand users' motivations, needs, barriers and more in the context of how they would use a design, and to help ideate, iterate and usability-test optimal solution.


Defining the MVP

Based on the research, we identified some user stories:

  • Many Channels. Users start monitoring around sunrise, so the information needs to be added prior to that time and include data from many different sources, including local newspapers, and emerging news blogs.
  • Customized reports. Users can create tailored made reports for each search, this can be send as a pdf, word, whatsapp, telegram, etc.
  • Alert at all times. The user can be notified in the moment if the topic that they are monitoring gets flagged on any social or digital media, or in the case of traditional media, as soon as a capturer adds the synthesis of that topic.

It is also worth noting that there were technical constraints that had to be taken into consideration as the development team who was in charge of all the backend operations were not very open to the ux evangelism and out team had no access and depended on the for many API calls. This delayed our delivery times because we were not handed any type of development documentation because they did not have any.

User Flow

After all the workshops and research I defined flows for all paths within the platform and reviewed them with the team.

Risk = impact * probability

I wanted to test the biggest assumptions behind the initiative and all of our weaknesses upfront so I did a workshop with the team including stakeholders to define and rate our riskiest assumptions, so after that we could tackle them through targeted experiments such as a landing page, survey, and prototypes, rather than the product itself.

Designs

While I was overseeing the user testing planning and execution (which was an iterative process that was conducted at every milestone of the project to identify the biggest pain points) I completed the landing page design.

I wanted to create a refreshing, minimalist and clean design that conveyed trustworthiness and was clear and easy tp understand, while following the colors and look and feel that the CEO envisioned.

Testing

User testing was an iterative process that was conducted at every milestone of the project to identify the biggest pain points in the current version. Once feedback was gathered, I would revisit the prototypes with the design and development team to do minor adjustments and test again.

Results and takeaways

After having experience mainly in small startups, working in an mature company was a compleat different experience and had a bit of a learning curve.  It taught me a lot about the challenges of burocracy, the art of negotiation, and also made me really work on my UX evangelist and leadership skills.

Some key takeaways from this project are:

  • Focus on the the team. My role became a management role and the best strategy was to empower my team for them to reach their full potential in order to give life to the vision of the product.
  • Communication is key. Being the new kid on the block, and coming in with different processes from what people are used to is not always welcomed, so including many departments and showing them how we could all work better together is a challenge but it could be worth it in the long run if you find a way and dont loose your will.
  • Meet as many people as you can. In a big company there could be many departments that might seem irrelevant, but they are not! they have very valuable insights and you could also be of help to them, and doing so you could be improving the business in ways you never imagined.

Oblek

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.