Week 4: Editorial Design
The fourth week of the UX/UI IronHack Bootcamp is all about editorial design. We were asked to work in pairs and create a web magazine from zero, an exciting and full of detail challenge.
Here you can see the high-fi of this project, after considering all the feedback given to us during our presentation in the Bootcamp. It was an intense but very rewarding week. If you would like to see the pre-presentation version of the high-fi, please scroll down to the end of this post. Thanks, and enjoy!
PS. Run the Figma prototype yourself here.
But Wie, Cómo, How?
Let me take you to a long but very nice journey of how my teammate Maggie and I got to that crazy high-fi on the next steps.
Who is this magazine for?
The type of magazine to create was a decision we had to make coming from our user persona, who we chose from a short list given to us.
In our case, we decided to go for Paula, a 19 years old artist, dreamer, and unstoppable online magazine reader who is always on the go.
some points on Paula :
- Reads Vice, Rolling Stone, Man Repeller, and other webzines.
- She wants to be an artist and connect with people (and aliens if they want to) around the world.
- She reads voraciously, everywhere, anywhere.
- Wants to be cool and achieve her dreams. Read the most influential authors from her time to show off on socials.
- Follows modern authors.
GUERRILLA RESEARCH
In order to have validation on what kind of content a user — in our case and because of our 1-week deadline - very close to our user persona, would like to find in such a magazine, we :
- Asked users of our persona to let us know if they read magazines,
- asked what kind of magazines and content they would find attractive to read.
- This would help us to later work on the information’s architecture.
From these conversations, we discovered the users need a platform that not only has fun, interesting & original content but also gives them easy access to it, including from their mobile phones, where they can have their favorite categories & articles to hand whenever they want to read or share them.
VISUAL EXPLORATION
Visual Competitor Analysis
Then came the turn of our competitors. We worked on creating a visual board to analyze the magazines our persona actually reads. In this case, Paula was a big fan and heavy reader of magazines like Rolling Stones, Man Repeller, and Vice. These boards included logos, color palettes, and layout samples.
This helped us to also work on a list of brand attributes that best describes these competitors, for example for Repeller, we found it to be mainly stylish, trendy, sophisticated, and easy-going, meanwhile, for Vice we find it more on the playful, original, creative and adventurous side.
BRAND ATTRIBUTES
After getting familiarized with our user persona and having a better idea of her preferences, we worked on a list of brand attributes based on her interests and which kind of magazine and content she would enjoy reading.
These attributes come from adjectives commonly used to describe people’s personalities. Our list had around 10 attributes, which we then cut to 5 by making use of trait measurement, which basically involves ranking and rating them on a scale of 1–5, from less to extremely descriptive.
Our attributes list resulted in :
- Progressive
- Outspoken
- Urban
- Playful
- Original
With this information, we finally started creating moodboards containing possible visual elements that we would include in our magazine. These moodboards contained typography, color palette, icon style, and layout elements. The key here was to be consistent and transmit the right “mood” from our brand.
SURVEY TIME
We worked on three moodboards, all based on our brand attributes previously assigned, and continued with creating a survey to test if these boards were indeed compatible with those adjectives.
The way we shaped our survey was by showing the three moodboard options and the list of our attributes to let our testers choose which of them is the most compatible with it.
As result, our testers chose the moodboard with the colors purple, neon green, white and black, and after discussing in pairs, we decided to go for this option.
STYLE TILE
The next step on our journey was building up a Style Tile with the possible visual elements that would compone our webzine. Because this is a tool that would help us in the process of designing the actual web, This is important to mention that we did iterate on it and added or changed some elements as we realized they were indeed working or no, by ourselves or after testing.
At this point, we knew we were going for a very strong, loud, and outspoken personality so we decided to create a brand name that would reflect it. We started iterating between the names “Right now” (in a circle) and “Layers” (a square-shaped logo).
To list some of the elements of our style tile:
- Strong font and sizes. For this, we chose the font Archivo and its black variation in color white, and we left the neon green for linking.
- Dark strong background. We chose black to be the color of choice for this because it would give that edgy, original look from our brand’s personality.
- Big and strong-colored images that help to make our content more attractive.
SITEMAP
Coming from our research, we started by coming up and organizing category ideas for our webzine and tested them with a few testers. Our main theme as a brand was creating a webzine with a focus on art, urban, modern and mainstream subjects. As a team, we created ten possible categories that, partly came from suggestions in a short guerrilla interview and as a result of our tests and our persona, were then reduced to five: Art, Music, People, Weird, and Authors.
As for the second level of categories, we tested one more time doing card sorting and gave our testers a number of possibilities, which then resulted as follows :
TASK AND USER FLOW: What will our user be doing on our website and, how?
Having the structure of our webzine, we passed to evaluating the task that our user would be accomplishing.
We discussed beyond the regular “just reading an article” task and thought about giving the possibility of bookmarking that article and having it save for later. For our user persona, this would be of extra use since she is mostly on the go, using different devices and reading at any chance she has.
PROTOTYPING, FIRST STEPS
My teammate and I worked separately on lo-fi versions, which we then brought together to a mid-fi prototype that we later used for testing.
On this prototype we see the user:
- On the homepage,
- choosing an article to read,
- clicking the bookmark icon,
- logging in to their account and finally,
- checking their bookmark’s list for then continue browsing.
FEEDBACK
After testing this mid-fi, we received some very interesting and punctual recommendations on different points, which we then changed on the high-fi:
- The navbar seemed too heavy, even more, if it were meant to be fixed to the top at scrolling down.
- Our first idea of having a recommendations column on the right was also too wide and made the size of the article’s image look awkwardly short.
- Some of the padding and alignment were off, more spacing was needed on the homepage.
- Our bookmark icon wasn’t easy to see.
- The user’s bookmark list page seemed a little bit off and boring, considering how dynamic the rest of the pages are.
HIGH-FIDELITY TIME
After iterating based on our tester’s feedback, we passed to our high-fi, which after three usability tests, also went through changes like:
- Choosing a different logo. From the circular to the rectangular version which spoke better about our brand.
- Reduced the presence of the black color. We decided that adding some dark grey made a huge difference along with our whole website, especially to differentiate some sections. By this, is also important to say that we left the purple behind, and just contemplated using it for some hovers, mainly because there was already a lot going on in our web and it is a difficult color to read over darker ones.
- It is important to mention that, right from the beginning of hi-fidelity prototyping, we noticed how difficult & uncomfortable for the eyes the color purple in contrast with black looked like. The main reason why we decided to stick to gray, black & green.
PS. You can check out the prototype on Figma here!
KEY LEARNINGS
- Start sketching and prototyping soon, helps to move on faster and not “falling in love” with the first idea.
- It is important to think about usability when choosing elements and colors. Trying to cover all possible situations our users might be in and making sure they will be comfortable looking at our page was tough.
- Especially in a webzine like this, spacing and order resulted very important. As we were aiming for a very peculiar, outspoken style, we noticed it could get very easy to present a very messy layout.
