Building a Web Platform for an Aggregated Email Newsletter
The 1440 newsletter gathers the top news each day and strips it down into five-minute story segments delivered to subscribers’ inboxes. They reached out to the Flatiron School to work with a team of UX designers to create an online platform to help them expand their business and provide their user base with more ways to stay informed.
1440 Media's current homepage
UX Designer and Information Architect. I worked with three other UX designers from the Flatiron School under the guidance of two design directors from Flatiron. My work included leading ideation, creating wireframes, and creating the prototype.
Working on our prototype
Our team had just 4 weeks to take this project from kickoff to final deliverables. The client was open to the design process and wanted us to think big and thus did not impose many constraints on the team or the project’s scope.
Our team used the Stanford Design Thinking process throughout this project. Design thinking is a methodology for creative problem solving.
Stanford Design Process
One of the requested deliverables was an in-depth competitive analysis. Our client was looking to grow and evolve to the next level, and we knew they needed to better understand the competitive landscape in order to do so effectively. We were given a list of direct and indirect competitors to look into, and during the research process we identified some new emerging direct competitors. We categorized these competitors on two criteria:
These metrics were chosen because the client expressed a desire to be the next Reddit or Pinterest, both of which have a heavy emphasis on social interaction, while still retaining the impartiality that is the core of 1440’s philosophy. Through this analysis we determined that there is an opportunity space in providing a platform that is both community based and unbiased.
The 1440 Media team had sourced users for us, all of which are current 1440 newsletter subscribers. We knew we would need to distribute across three rounds of testing with each round having a different focus and goal. The goal of the first round of testing was to discover any news-related habits and any opinions about 1440’s newsletter. We tested those by conducting 30-40 minute interviews over video chat, during which we asked questions about their experiences with email newsletters and their general news-reading habits.
Conducting user interviews
Understanding our Audience
Synthesizing the Data
We conducted an affinity diagram exercise to synthesize the user interviews into more useful information. We used a top-down approach and sorted our notes into five groups:
Through multiple rounds of combining notes into groups and splitting them apart, we were left with six main categories:
Creating the affinity diagram
Crafting a Persona
We invited the 1440 Media team to participate in our empathy map exercise as they have a unique insight into their user base. We used the insights from our interviews along with this empathy map to produce a persona that embodies 1440’s target audience.
Our Target User
Our persona’s name is Beatrice, a 42 year old hospital administrator who likes to engage in stimulating conversations.
She wants to get a quick and clear view of what’s going on in the world so she can be a valuable source of information in her social circle.
She also wants to be able to form her own opinions and is frustrated when reading biased news media because it feels like it’s telling her what to think.
"I want to form my own opinions on things versus someone telling me what to think."
The Core Problem
The engaged and infinitely curious reader needs a fast and simple way to get an unbiased and holistic understanding of current events that they can personalize and share in order to develop their own informed opinions, enjoy their news experience, and interact with their social circle.
From our persona and domain research, we created five design principles to guide us through the design process. The design principles ideally will act like a filter which will help us focus only on ideas that address these principles.
Guided by our design principles, we moved into the concepting phase. Our team used rough sketches at this stage in order to get as many diverse ideas out without spending too much time polishing them. After we individually created rough sketches of various concepts that would help address the core problem, we presented our ideas to each other. We collaboratively decided which ones would be worth pursuing based on our internalized knowledge of our target user and the insights we gathered from the first round of testing.
The ideation process
We took the concepts we identified as the most viable and refined them both visually and conceptually. Each one was sketched out and some were turned into clickable prototypes in order to test whether the concepts were viable or if there were points of confusion inherent to them. In total we brought nine of our concepts through to this phase, with many of these sharing themes or mechanics.
Low-Fidelity Concept Sketches
The second round of testing was concept testing to determine which of our ideas were worth continuing to flesh out. We conduct concept testing using low-fidelity sketches in order to avoid committing our limited time and resources to ideas that may or may not be viable. Once they are proven viable we proceed to build them out in greater detail and incorporate them into the mid-fidelity wireframes that come later in the process.
Mid-Fidelity Concept Sketches
Validating our Ideas
We synthesized the results of our concept testing using affinity diagrams for each concept, looking at how users responded to the concepts: if they were well-received, if there were questions, hesitations, or concerns, and if the response was negative overall.
Some concepts that we initially thought would test well were not liked by users, so they were abandoned. Based on the results from concept testing, we decided to limit the amount of direct reader social interaction with the site due to concerns about it becoming a toxic environment.
Creating the second affinity diagram
We then synthesized the results of our affinity diagrams using a priority matrix which evaluated the concepts based on two metrics:
conformity to problem statement
effort to develop
We chose these metrics to ensure that the ideas and concepts we went forward with served the users’ needs and motivations, while keeping an eye on our own time and resource constraints. Additionally we invited the 1440 Media team to participate in a NUF test (New/Useful/Feasible) to help us further prioritize the concepts within the selected set.
The top two quadrants of our priority matrix
Creating the MVP
We created a site map to organize our concepts and to start to think holistically about the product and how these ideas would be combined and built upon to create one cohesive MVP. We decided on using a top navigation bar after checking out other news sites and noting their layouts.
After the site map was finalized, we created wireframes and the prototype. The final prototype focuses on three main themes: perspective, personalization, and interactivity.
Testing our Prototype
The third round of testing saw users interacting with the prototype and completing a series of four tasks, each with subtasks, in order to check each feature for usability issues. The task list was created to simulate what a first-time user might experience; these tasks involved:
finding an article
interacting with comments
viewing an expert
Interacting with the Q&A section
We split the feedback from the prototype test into two categories:
The usability feedback was generally less complicated and we incorporated it into the prototype between each test. The conceptual feedback was much more complicated. While some of the feedback was able to be addressed between tests, most of the feedback had to be incorporated into the future recommendations. Some conceptual feedback from the tests are shown below.
Conducting usability testing
After we finished testing our prototype we addressed any issues that were within our scope honed the prototype into a product that provides 1440 Media with everything they need to make this product successful. We sketched out a roadmap for the 1440 Media team that would guide them in implementing each part of the MVP. We chose to structure the rollout in three stages because many of the features within the MVP heavily rely on other features.
MVP 1.1 provides the basic functions a news website needs, like a homepage or topic pages as well as basic reader profiles. This gets the 1440 newsletter on a site that readers can share from, which is important for acquiring new users.
MVP 1.2 builds on top of 1.1, and adds expert profiles and more reader-centered features. One of the key features of the new 1440 Media platform is the expert content, but that content can’t exist before experts have experienced the site.
MVP 1.3 implements the final pieces of the platform such as Q&A sessions and expert recommendations. This enables readers to interact and follow experts they enjoy reading.
We also laid out some future recommendations which included features we were not able to implement in the MVP.
MVP Rollout Stages
The team was successfully able to balance the delicate line between spending too much time on a feature at the expense of the product as a whole and not spending enough time in order to really get a sense of how each feature would operate as part of the whole product. Throughout the project there were countless opportunities to incorporate new ideas into the MVP. We had to make one of two choices with each of these new ideas: either implement the changes and test them or shelve them for future consideration due to limitations on time. New ideas come to us as the project evolves and sometimes the best we can do is acknowledge these ideas and pass them along to the client for future consideration.