EV logo
Loading...
EARL VARONA
Facebook icon
LinkedIn icon
YayImages Search page

YAY IMAGES

Search Page Design

Project Overview

About the client

YayImages is a small start-up company based in Oslo, Norway looking to change the way people use stock images online. They provide subscription-based services where their members could easily stream and/or download stock images.

Summary

Since the search page is YayImage’s main service page, it is the most important page of the site. It is also packed with features and functionalities that some users might or might not need when using the service.

Objective

Design the search page using all of the features and functionalities and make it easy to use for our target users.

My role
  • User Experience Designer
  • Interaction Designer
  • Visual Designer
  • Front-end Developer
Tools
  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator
  • Pen and paper

User Personas

During the discover phase, we’ve determined that although we would love to target all users, focusing on a few would be more ideal in developing our base. With this in mind, I’ve developed the two main user personas to help us determine our focus on the types of users we would like to target first.

Female user

Alice Henry, 24

Freelance Designer
Puerto, CO

Bio

Alice is a freelance graphic designer who just recently graduated college. She specializes in print designs like flyers, brochures, and posters. She’s a creator and loves to experiment with new design concepts on her free time. She’s pretty up to date and pretty skilled with design technology software like Adobe Creative Suite.

Goals
  • Wants to quickly find a high quality image for design
  • Wants to be able to save images in a folder for future use.
Frustrations
  • High quality stock images are very expensive
  • Hard to find a specific stock image
Male user

David Wei, 31

Marketing Specialist
San Jose, CA

Bio

David is a marketing specialist for a small marketing agency. He’s been in marketing for many years so he understands the value of time, quality, and frequency when it comes to managing a campaign. He’s not a designer but understands some design concept especially for email, social media, and website content.

Goals
  • Wants to find an image for marketing campaigns quickly
  • Wants to be able to edit the image on the spot
Frustrations
  • Understands some design concepts but it’s not his primary skill
  • Doesn’t own any complex editing software

Requirements

After creating the user personas, I reviewed the features and functionalities that the search page needs to have and then I organized them according to their importance and complexities. This allows me to determine how to effectively group them to reduce the clutter and redundancy of the tasks and to also improve the page’s tasks flows.

Search Features

Visual search
Textspace search
Color search
People search
Vector search
Orientation search
Photographer search
Category search

Search Functionalities

Download image
Stream image
Favorite image
Save image
Edit image
YayImages search page user task flow

User Task Flow

The merging of the user personas and the search page features and functionalities led to the development of the user task flow. In here, I was able to isolate each of the tasks and organized them in steps to show their process in linear form. This resulted to the development of four main task flows.

Page Tasks Map

After the user tasks flows were developed, I created a task map that combined all of the tasks flows into one. This map helped me understand how the users would interact with the search page and how to efficiently design for those interactions. Since there is only one search page that serves all types of users, it is important that the tasks map is properly organized and designed.

YayImages search page page task map
YayImages search page sketch wireframe

Sketch Wireframe

Sketching with a pen and paper helped me to quickly develop a wireframe for the search page. With the tasks map, and features and functionality list, I find it easier to draw and experiment with the layout on paper first before creating it digitally. Overall, this process saves me plenty of time.

Digital Wireframe

After I feel confident about my sketches, the next step is to convert it digitally. Having a low fidelity wireframe makes it easier for me to duplicate certain elements and share my work for review. For this project, I wanted to focus on simplifying the features and functionalities of the search page to make sure that they flow naturally.

1

The search page consists of so many useful search filters but we understood that not all users will be using them. Since some of these search filters are often utilized while some are not, I created two different sections as two different access points for the filters. The filters on top provides the easiest access to the most utilized filters. Doing so could help not overwhelm users with search filters.

2

The All Filters section holds the complete set of search filters. It can slide open to reveal them or keep them close (as the default) and out of the way.

3

Individual image results can be selected to provide the image details or hovered with a mouse to reveal additional functionalities. Action steps like the image download, save to folder, and favorite an image can be taken this way to shorten the process. Also, the similar image (visual search) feature are added in here to save the user time of dragging and dropping the image to the visual search filter. This button also allows the user to keep ‘diving in deeper’ using this feature.

4

Using a continuous scroll functionality instead of the pagination will help improve the user’s experience in browsing through hundreds or even thousands of image results.

YayImages search page digital wireframe 1
YayImages search page digital wireframe 2
5

The image title and meta descriptions are displayed on top to improve its searchability for the users.

6

The end goal for this page is to get users to use the images. Since there are typically three ways to use the image, it made sense to create action buttons for each of those ways. Streaming is to use the image on another website and the user would prefer to link it instead of downloading and uploading it. Digital is to use the image digitally and downloading it first is necessary. The quality of the digital version would be 72x72 dpi. Print is to download the image’s highest quality, which is 300x300 dpi. Both Streaming and Digital have the option for the user to edit the image using the website’s editing framework.

7

Additional information about the image is displayed in tabs so they’re not taking too much space but at the same time, they’re easily accessible.

8

Search functionalities like displaying similar images, adding the image in the user’s folder, and saving the image in the favorites are also available in this page/modal.

9

Search suggestions are displayed at the bottom to help user find the perfect image.

Visual Elements Design

The brand’s goal is to create the identity that targets young designers, marketers, and content writers. The use of muted gray with the cool colors like the different shades of blue as the primary color could make the brand feel more modern, trendy, and clean. Also, adding the yellow and green colors as the secondary (or supporting colors) in the website could help make the brand feel more fun and friendly. In addition, using san serif for typography adds support to the brand’s identity by keeping the site looks clean and modern.

Color Palette

YayImages search page color palette

Typography

YayImages search page typography

Iconography

YayImages search page iconography

User Interface Design

Search Page Design

The search page UI design is the merging of all the elements. The goal is to design the page that simplifies its complexity and not overwhelm the user. The use of muted gray colors blends the elements together while subtle dark gray and blue highlights the action buttons. The use of icons more than text increase the recognition speed, as well as the use of tool tips on hover (not shown on picture) adds additional information and control to the user.

YayImages search page design

Visual Search Filter

The visual search filter provides the user the option to search using an image.

YayImages search page visual search filter

Orientation Filter

I think using icons with text instead of radio buttons improves the look and feel of the interface. The challenge here is use of the appropriate icons.

YayImages search page orientation filter
YayImages search page image details

Image Details

The image detail section has two design versions: modal (below) and page (not shown). They’re both very similar in design but have different purposes. The modal version is for the user that is doing an active search while the page version is for the page index (results that are shown in search engines results like Google). The use of modal is to reduce page reload to make it easier for the user to jump in and out of search details without losing his/her placement in the search result field. The main idea is to help the user find what he/she is looking for and move him/her quickly to the next task.

All Filter

The all filter section holds all of the search filters of the page. It is minimized on default to keep it out of the user’s way but visible enough that the user knows where it is.

YayImages search page all filter

Image Hover

The image result displays action buttons on hover. Its purpose is to shorten the process and keep the user moving.

YayImages search page image hover

Photo Editor

A big part of the search page’s functionality is to give the user the ability to edit the image on site. This can be very significant because it could save the user time and cost of purchasing an image editing software license. The focus on this design is to simplify the interface. I think the biggest challenge in my part is to either find or design appropriate icons for each of the editor’s functions.

YayImages search page photo editor

Take Away

Since the search page has so many moving parts, I find it challenging to design it efficiently from the start. On top of that, I have my own sets of assumptions and expectations coming in the project that I couldn’t help but apply when I tried to understand our target users. These sets of assumptions and expectations can be both good and bad in the discovery phase of learning our user’s behavior or experiences. In other words, I can never truly see the user’s perspective but I can only imagine how they would feel or react to the interface. Although we had many positive feedbacks from the users for the search page, I believe more user testings are needed to learn more about any user’s frustrations that we didn’t hear about. This is an on-going process of testing, discovery, and making changes that slowly improves the overall usability of the search page’s interface.

Marica Degnan

His attention to detail and willingness to go the extra mile in making sure the job is done correctly...

Marcia Degnan

Creative Director & CEO, Vivid Creative, LLC
Jan Ole Kjellesvig

He has done a tremendous job and every piece of design we receive is very well thought through.

Jan Ole Kjellesvig

Founder & COO, Yay Media AS
Dave Anderson

Earl has a great design sense. The visual communications he creates for clients are fresh, engaging, produced strong results..

Dave Anderson

Marketing Director, Yay Media AS
Hino Banzon

His designs are effective and elegant and he’s always thinking about the User.

Hino Banzon

Product Developer, MTRO App
Oddbjorn Sjogren

On several occasions we have given him a vague idea of what we are trying to achieve and he has come back with truly unique and great ideas.

Oddbjorn Sjogren

Founder & CTO, Yay Media AS
Walter Ramirez

I found him to be an extremely dedicated and caring individual and one that is adaptive to many situations...

Walter Ramirez

UX/UI Designer, Specialist On Call
Linda Laegreid Johannessen

He’s trustworthy, and has a great personality, making him a pleasure to work with.

Linda Laegreid Johannessen

Founder & CEO, Yay Media AS
Yun Choe

It was a pleasant working with Earl. He was always very responsive and we are very pleased with his work.

Yun Choe

Office Manager, Oak Endodontics
Ashanthi Mathai

Earl worked very collaboratively with my team and delivered a high quality product.

Ashanthi Mathai

VP of Marketing, Specialists On Call
Anonymous male profile image

He quickly grasped the nature of our business and was able to translate that information into our unique web design...

Ricardo Hunter

President, Head Injury Rehabilitation & Referral Services
Paul Klinger

Earl is the best! He explains things in ways that even I can understand...

Paul Klinger

Director, Sevenoaks Retreat Center
Jeff Feiertag

I’m consistently impressed with the quality of his work.

Jeff Feiertag

IT Coordinator, MCFRS
Arthur Magida
Quotation mark icon

He was especially careful to get a sense of the tone I sought so it would reflect my sensibilities and personality...

Arthur Magida

Author, The Nazi Seance