Search Page Design

Project Overview

About the client

YayImages is a 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 download stock images through their website.

Summary

YayImages needs to develop its feature-packed search page, so its users will find it easy to use and not overwhelm them. This is a crucial page since the majority of its user interaction will primarily happen here.

Objective

Design the search page with the required features and functionalities. Make it easy to use, accessible, clean, and visually consistent with the brand identity.

My role

User Experience Designer
Product Designer
Front-end Developer

Tools

Adobe Photoshop
Adobe Illustrator
Pen and paper

User Personas

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

Alice Henry, 24

Freelance Designer
Puerto, CO

Bio

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

Goals

Wants to find a high-quality image for design quickly.
Wants to be able to save images in a folder for future use.

Frustrations

High-quality stock images are costly.
Hard to find a specific stock image.

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 concepts, 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

He understands some design concepts, but it’s not his primary skill.
He doesn’t own any sophisticated 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. Reviewing the requirements allows me to determine how to effectively group them to reduce the clutter and redundancy of the tasks and also to 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

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. Here, I was able to isolate each of the tasks and organized them in steps to show their process in linear form, which resulted in the development of four main task flows.

Page Tasks Map

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

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.

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 separate access points for the filters. The options on top provide the most convenient access to the most utilized filters. Doing so could help not overwhelm users with search filters.

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.

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, a similar image (visual search) feature is added in here to save the user time of dragging and dropping the image to the optical search filter. This button also allows the user to keep ‘diving in deeper’ using this feature.

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

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

The end goal for this page is to get users to use the images. Since there are typically three ways to use the picture, 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. The 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.

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.

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

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

Visual Elements Design

The brand’s goal is to create an identity that targets young designers, marketers, and content writers. The use of muted gray with 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) on the website could help make the brand feel more fun and friendly. Also, using san serif for typography adds support to the brand’s identity by keeping the site looks clean and modern.

Color Palette

Typography

Iconography

User Interface 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 components together, while subtle dark gray and blue highlight the action buttons. The use of icons more than text increase the recognition speed, as well as the use of tooltips on hover (not shown on picture) adds additional information and control to the user.

Visual Search Filter

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

Orientation Filter

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

Image Details

The image detail section has two design versions: modal (below) and the 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 engine 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.

Image Hover

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

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 of 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.

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 valuable in the discovery phase of learning our user’s behavior or experiences. However, I understand that 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.

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

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

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

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

Hino Banzon

Product Developer, MTRO App

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

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

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

Linda Laegreid Johannessen

Founder & CEO, Yay Media AS

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

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

Ashanthi Mathai

VP of Marketing, Specialists On Call

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

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

Paul Klinger

Director, Sevenoaks Retreat Center

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

Jeff Feiertag

IT Coordinator, MCFRS

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

YAY IMAGES