TRENDR


Challenge

A group of 4 web developers are looking for Usability and Visual Design feedback for their website application, Trendr.

Conditions
  • 2 feedback sessions with 4 web developers at General Assembly
Tools
  • OneNote, Axure, Illustrator, Material Palette
My Roles

Color scheme, logo, prototype

Solution

A clickable prototype that eases information density, presents screens in an order, and starts a visual design direction.


Design Process

Night 1: The Problem

Trendr is a website that allows you to browse the trending media for every country. Upon my first interaction with it, I give the team a Usability Test and inform them of 4 main issues that I had:

  1. The details take up too much space when I'm playing with the map and vice versa.
  2. I didn't immediately know where to start.
  3. I don't know the location of every country I might want to explore.
  4. The visual design is all over the place.

Fun Fact: The team could not integrate China.

I sketch out some rough Wireframes to help explain my suggestions. There is a bit of confusion and I realize that I need to make something a bit more high fidelity to show to them the next night.

The team then asks me about the Color Scheme, to which I jokingly reply, "what color scheme?". I explain that everything about the UI, including the map, must adhere to a set of colors. I suggest selecting an easy two-color scheme through the utilization of Material Palette.
By discussing a target audience, we decide on a youthful and fun combination of Cyan and Amber.

I decide that a color scheme without a proper Logo wouldn't be enough. I go a bit beyond and sketch out a few ideas, playing with the ideas of trending and growth.

Night 2: The Solution

The new Trendr logo in cyan.

The new Trendr logo in white.

The new Trendr logo in black.

I present to the web developers a Prototype created in Axure that eases information density, presents screens in an order, and starts a visual design direction.