UNSOLICITED REDESIGN FOR REDMOND PIE - A TECHNOLOGY NEWS PLATFORM

🗓️2020

I have given myself a tremendous challenge by rebuilding entirely the UI for an amazing technology news platform.

OVERVIEW

I have chosen Redmond Pie's website to rebuild thoroughly its UI. Been eager to put in practice all the stuff I have learned, to sketch all the ideas I have and to try, by the end of this road, to have significant takeaways regarding my thinking and designing process. Pushing myself into this adventure and gain the confirmation that I need: chosen this out of passion and beat the way with 99% hard work🙂.

As this is my first real assignment and my journey so far was about learning and do side projects, I want it to reveal the best out of my knowledge. I did the unsolicited redesign in the same manner I would do a paid professional work. This implied the following:

• Did my research 🕵🏻‍♀️
• Understood the flow of the live website and identified pain points🤔
• Came up with concerns and figure out trade-offs for various solutions 🧐
• Be creative 🙂

Note: I do not work for Redmond Pie, I have not been in contact with anyone that is working or worked at Redmond Pie or have information about their concerns, user data research or any other kind of useful information. I do not have access to their private data or their internal goals.
The UI is strictly my own, all that I am presenting on this page is my personal work.
I am certainly not suggesting that Redmond Pie should adopt my redesign and change their current UI.
The purpose of this unsolicited redesign is to apply and improve my skills by sharing my process of working, expose my thought process, justify my decisions and provide an amazing outcome.

WANTED TAKEAWAYS WHEN COMMITTED TO THE CHALLENGE

REGARDING THE REDESIGN ITSELF

• The most obvious is to add my first project to the portfolio I am shying creating and to give the best out of the knowledge I have so far

• To design a more friendly and intuitive user interface and furthermore, to give a unique and recognisable feeling to the website

• To design with user empathy in mind (HCD)

REGARDING MY KNOWLEDGE AND PROFESSIONAL SKILLS

• Design a complete deliverable in Sketch, including prototyping, and learn to make animations in Principle

• Create and validate design solutions

• Communicate my thinking and designing process by framing properly in words the entire process

• Apply some of the UX principles and deliver something intuitive to use and engaging

MY ROLE

• Visual and Product Designer

WHO IS REDMOND PIE?

Since the year it was launched - 2008, Redmond Pie is one among the best and reliable news platform with main focus on technology. Core news and reviews are about both software and hardware products and services from Microsoft, Google and Apple. In addition, they also write about general World Wide Web and do reviews about all sorts of new things tech related.

UNDERSTAND EXISTING AND SET UP A PLAN

I began by surfing Redmond Pie website intensively, explore every button, every link, go into every single page the navigation buttons are linked to and take notes. I wrote down every thing that crossed my mind.

My intention was to fully understand the way the site is built and try to surmise some of the reasons for the way things are at the moment.

After that, I decided over the pages I want to redesign (landing page, article page, category page), the multi-state screens and responsive UI design I want to implement (web, tablet, phone).

SKETCH AND WIREFRAME

Once I have decided on how the content would be displayed, I went through several iterations on paper and do the basics, before feeling confident enough to dive into the next phase.

After finishing with pen and paper, went into Sketch and create medium-fidelity wireframes. This way I was able to better comprehend the concerns I have to keep in mind so to solve them and the further research I have to do. All the questions that followed made me take a step forward towards the UI solution I was going to implement.

STARTING THE REDESIGN AND OBTAIN HIGH FIDELITY MOCKUPS

CHOOSE A PERSONALITY

My first thought was about the feeling I want the redesign to communicate, that being reliable, techie, proof based information, futuristic. I want the UI to convey the feeling of smart, nerd, high-tech.

Also I want it to be clean and simple, intuitive to browse through, considering the amount of heavy text and other elements such as category, pictures, dates and so on. Do not want the user to feel overwhelmed about the amount of content and lack of comfortable browsing.

On this note, I wanted to let the rationale be the guide and make associations.

To sum up this first detail, I came up with two free fonts: Rajdhani and Acumin Pro. Keep in mind that I kept my choices restricted to free fonts.

HIERARCHY AS GUIDELINE

When landing on the page and surfing through top news, I do not want that every element to compete for the user’s attention. In addition, considering it is a news site, the quantity of content is high enough and the page should not feel noisy, harsh, chaotic and ambiguous.

LATEST NEWS

I chose to make the latest news bigger so it covers approx double space in relation to the other top news. The headline, author and label are on top of the image. The rest of the news displayed (also new, but not last) are given the same amount of importance.

POPULAR STORIES

When landing on the page, looking from left to right, after seeing the primary content (latest news) and secondary content (the other top news), a tertiary content can be spotted, that being Popular Stories. Is deemphasized by design meaning is not supposed to capture the attention at first, but is still on top of the page suggesting is valuable information. The popularity of the stories may determine the user to engage and read them and for that the category is not supposed to be placed anywhere else.

Keeping the same guidelines in mind about hierarchy and that not all elements are equal, the headline and the category are sufficient to be displayed as details for the Popular articles.

Designing by these rules of thumbs is obvious that the page should be breathable, scannable and easy to go through, so no reason to cram irrelevant information like date or author for every piece of article. Did my best to keep it dewy-eyed.

ENHANCE THE ENGAGEMENT

MORE STORIES

Moving forward, I want to introduce a breakpoint in the manner in which the content is displayed. Introducing a different approach so it is obvious for the user that he is browsing through another section of the site. He does not have to think "Is this another section? May I have to look for the title of the section to see where am I?". Therefore, displaying the More Stories section on another background color helps implying this feeling effortlessly.

YOU MIGHT LIKE THIS. GIVE IT A TRY

In order to keep the reader engaged with the site, a new part with stories to be read is available in You May Also Like section. The suggested articles are displayed in a different manner so that once more the user comprehend effortlessly that he is browsing to another section of the site.

Bearing in mind the hierarchy guidelines which I followed that I specified earlier, the quantity of information displayed about the article is limited. This means that the title and the label are enough for the reader to remain engaged, the date is not a concern anymore keeping in mind that he is on the bottom of the page.

GROW THE COMMUNITY

SPLIT BY MEANING

Having the findings of the researh I did about the site content and following them as a guideline, I classified the stories in three main classes with suitable subcategories.

CHOOSE A SECTION

The category the article is part of acts like a label - supportive content, shouldn’t steal all the attention. Title is the focus. So to create the best visual hierarchy, the headline represents the primary element, followed by the category, which is clear but not obvious, and then, by case, the author and date.

TOO MUCH WHITE SPACE

The easiest way by which I implemented a clean, simple and breathable design was through giving every element more space. Similarly to hierarchy guidelines, space between elements should mirror conceptual spacing. I used spacing along with alignment to convey a neat feeling.

STYLING TEXT

On a general note, hierarchy is once more the guiding line in regards with styling the details (titles, labels, dates, categories) and the body text.

This section is linked to what I have already explained in Choose a Personality paragraph. Most restrictions are related to body text and this requires that it must be eligible, legible and simple. The goal is an undemanding experience when reading.

Using Rajdhani typeface in the details implies the techie and reliable feeling. Letting the rationale be the guide when browsing the site.

DO NOT HAVE TO FILL THE ENTIRE SCREEN

What I had in mind when deciding the widths for various devices was linked to two aspects:

• the UI design needs to be responsive, considering the vast options of screens available, so that is easy and fair to browse using different widths. Primarily for the developer who will implement the design and also for the feeling of the app that needs to remain the same. A smooth experience is the desired outcome.

• making the site intelligible, easy to comprehend and not busy.

In a nutshell, I wanted to give each element the space it needs and avoid using, when available, the entire canvas, or cram things and overload the page with too much details.

A fact I noticed on the live website, is the amount of ads. The guidelines from my design are in accordance with the business need of advertising.

ENOUGH TALK, MORE FACTS

After the detailed process I had explained, it is only fair to show the final result and website's flow and touch. Enjoy!

EXPLORE THE GENUINENESS

FOLLOW THE GUIDELINES

Note that the zoom in effect is just for a better view of the explained section.

EXPLORE AND DECIDE

FOUND THE RIGHT ONE

THAT’S A WRAP!

Note: To maintain the authenticity feeling of the actual site, the content from the redesign I made is from the live website (titles, author names, text body articles). Here you can find the article I redesigned.
The photos are from Unsplash.