Project: Good News Only - Editorial Design
Team: Andrea Marquez and Myself
Tools: Sketch, Adobe XD, Abstract, Maze, Miro
Role: UX/UI Designer
Research, User Interviews, Wireframing, Interaction + Visual
Design, User-Testing, Prototyping
About
The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content. The best magazines and newspapers had already launched their digital version in early 2000, but it has been only in the last 5 years that the digital experience started to take its own shape. With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and dive into it.
The Challenge
Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas.
The Design Process
User Persona
We were given user personas at the beginning of the project. My teammate Andrea and I selected Paula, the laid back creative.
Poor Paula wants to be an artist and connect with people around the world. She reads voraciously, everywhere, anywhere. In bed, public transportation, with friends, out loud, for her projects, etc. She is looking for a site that inspires her
Business/ Competitor Analysis
From our user persona, we identified our three major editorial competitors: Rolling Stone, Repeller, and Vice.
Feature Analysis: We created a feature comparison chart to understand each editorial and what they bring to the market, providing us a clear perspective on our competitors and what we would need to create to set ourselves apart.
Market Position Map: Based on the Business and competitor analysis, we projected where we stood in the market and where we want to go.
USER RESEARCH
Empathy Map: We were going more in-depth on what Paula might be feeling. We develop an empathy map to learn more about the main pain points and what we could do to improve.
Journey Map: We constructed a scenario his journey based on the insights we received from the prompt. Breaking down Paula’s motivations, frustrations, wants and needs for this website.
Empathy Map
Journey Map
MoSCoW Method
As a starting point to determine the priorities for the design, we held a brainstorming session and translated some of the ideas into sticky notes. Right after, we utilized the Moscow Method to prioritize and organize the most critical requirements for a higher chance of success in the MVP (minimum viable product).
User Flow
To had the visual representation of the path the user takes when using the product, we created a simple User Flow chart. It helped us to plan how many screens we needed plus served to evaluate and optimize the user experience.
Sketches & Lo-Fi Wireframes
Mid- Fi Wireframes
UI (User Interface Design)
Visual Competitive Analysis
Before creating the High Fidelity wireframes and define the looks or feel of the design, we decided to research other competitors in the same space as our product. This analysis was beneficial to be aware of current trends, set the product apart from the competition, and in general, make the product identity look different from what it was already out there.
In these visual competitive analysis boards, we included three of our competitors Vice, Repeller and Rolling Stone.
Moodboard
A moodboard was created for this project, in order to establish a visual feel and overall look of the design. This helped us to communicate the artistic directions of the project in the early stages.
Style Tile
Before fully jumping on the High Fidelity wireframes, we created a Style Tile to determine the direction of the visual brand. It served as a preliminary idea on how the typography, color palette, and element style decisions could work together. A style tile is unique from other tools because it is specifically a method for establishing a visual vocabulary between the designer, web developers, and clients.
Atomic Design
We also had an Atomic Design inventory, which became important and handy for quick prototyping. The Atomic design documentation helped me to create a more effective, consistent, and quick UI design.
MICROINTERACTIONS
PROTOTYPE
The Hi-Fi interactive prototype was developed for desktop and displays both micro-interactions and animations featured on the site.