Buzzz Editorial

Goal

Design a mobile web interface for an online business magazine. UI case study.

I transformed UX research data into a UI mockup ready to be tested. The main goal was to practice UI Design, especially typography, grid, spacing, and micro-interactions.

My Role

UI Designer, Graphic Designer, Interaction Designer

Done as a study project at the IronHack UX/UI Design Bootcamp. April 2020.

Project duration: 1 week.

Deliverable: High fidelity design prototype with micro-interactions.

Tools: Figma, Sketch, Illustrator.

iphone mockup with buzzz editorial screen showing homepage
iphone mockup with buzzz editorial screen showing menu
iphone mockup with buzzz editorial screen showing category
iphone mockup with buzzz editorial screen showing article

Context

For this project, I have received a very brief UX report with the following highlights. Target group: male/female, age 26-49 years, higher educated, with moderate income, entrepreneur, cosmopolitan, business savvy. Task: design a mobile web interface for an online editorial.

photos of user personas in buzzz editorial project
See the user personas

Process

Since the challenge brief was very open and I was free to modify the UX part, I have narrowed down the information about the user first. photos of user personas in buzzz editorial project See the user personas. The pain points presented are rather my own assumptions, not a result of research, and as such serve essentially the main purpose, which was to practice the UI Design. In the next step, I have identified the sitemap: home-screen (daily digest, most popular, most recent), category page (7 categories, 1 level subcategories), and article page (with a list of related articles). The structure takes ads into account as well. Having the information structure clear, I moved over to the visual competitive analysis which gave me nice insights on what already exists and let me see if I can bring in something new. In the next steps, I created the mood-board, set typography, and colors, all based on the user personas. The main focus rested on readability and making the information structure well arranged. I dedicated a unique color to each category. Next, I’ve made up a name for the magazine and created a simple logo. Next came the most enjoyable part – creating UI elements, or say the building stones, strictly in the line of the atomic design approach. While doing so, I kept the interactions in mind already and so I proposed a text-first–image-on-swipe interface (very experimental), fixed headers with additional information, reading progress bars, and bookmarks. See the result below.

Experiment

After reading a Nielsen Norman group article on how users read on the web, I decided to challenge the status quo and introduce a text-first approach. True, an image is worth a thousand words, but in the editorial scenario, this can end up in clutter. Instead, I brought the headline in the spotlight and gave the user the option to swipe-reveal the image and intro text. The scope of this project did not allow for user testing which would reveal if the design truly benefits the user or not.

Test it

  • item
  • item
  • item
  • item
  • item
item

Project Deliverables  >

item
item

Day 3
UI elements

item

Day 4
UI Design

item

Day 5
Micro-interactions
Presentation

Questions? Let's have a talk

This is a unique website which will require a more modern browser to work!

Please upgrade today!