ONLINE EDITORIAL
PROJECT OVERVIEW
The challenge was to 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 Persona we chose wasElaine the 35 year old Eco-Friendly Researcher.
ROLES
USER RESEARCH
INTERACTION DESIGN
UI DESIGN
USER RESEARCH
My team member and I conducted 5 interviews for this project. We were very keen on picking people who best matched our Persona ‘Elaine’. These are some of the things we learned.
USER GAINS
• Users were looking for something simple and straight to the point, clear content.
• Users read most articles on the go and in mobile version.
• Users want “Likes”to control and manage content shown to them
USER PAINS
• Sites can be overwhelming with content and lack of organization.
• No way to bookmark an exact reading spot
• Can’t tell how much time will be invested in reading an article.
MARKET POSITIONING
This tool helps in understanding where a product or service is located based on specific qualities in the market. Here we put on the X axis affordable vs customizable and on the Y axis we have informal vs concise. We want to be a bit of everything but with a heavy dose of customizable and conciseness.
IDEATION - MOSCOW METHOD
After analyzing the major pain points of the Journey Map my team member and I started the ideation process. We organize and prioritize our ideas using the Moscow Method. This helped us understand where to focus our attention to.
MUST
• Organized Content
• Affordable
• Custom
• Consise
SHOULD
• Search Options
• Previewed Content
• Pictures
• Managed Subscription
COULD
• Video Integration
• Spotify Integration
• Plan A Trip Feature
• Podcast Integration
WON'T
• Press Room
• Buy & License Photos
• Ancestry Kits
USER FLOW - HAPPY PATH
The user flow happy path was a very simple one for the editorial. Especially since the major pain point we were solving was time and content management. We wanted users to be in and out of the site achieving their goals with the least amount of steps.
LO-FI WIREFRAMES
At this point, my team member and I began our design process with our Low fi sketches. Here we started visually creating the feature solutions we came up with in our Jobs To Be Done. I decided to start designing in the mobile state of our website since the research shows most users will be accessing the site on the go and on mobile. First thing we came up with was a simple design that broke up the topic categories by sections. This way users can skim to pick which article they are in the mood for. Another feature we added was cards with simple article info, mainly the article read time. This way users can know how much time an article will require before investing time into it.
MOOD BOARD
After testing mood board with 12 people who matched our User Persona very well and asked them to pick the mood board that matched their Persona best. A surprising 58% choose the control mood board. Showing us how important the research and testing process is. It’s all about the user not us! This became our board we began to build our editorial brand Self•ish off of.
STYLE TILE
The style tile is a great way to start narrowing down the design elements, fonts, colors, buttons styles and much more. Also included an article card and a few elements that would be within the actual article. We wanted to keep elements fresh and clean with lots of white space and open air, very similar to our mood boards.
HI-FIs
HI-FIs
Our high fidelity reflects everything we have been doing so far. It is a clean, easy to use and refreshing design. With no changes from our Lo fi due to high success testing numbers. For the article page I went with a different approach with the mobile design. I made the text a little bigger and the spacing between the lines a little bigger so that it is easier on the readers eyes.
