PROJECT TYPE
Academic Design Challenge
Project Overview
TIMELINE
2 Hours, November 2023
MY ROLE
UX/UI Designer
TOOLS
Figma
Dribbble
Adobe Photoshop
PROJECT BRIEF
During my cohort at BrainStation, my class was given a scenario where Client A required an improvement to the functionality of their e-commerce platform. Since their website has gained significant attention in the last year, it is understood that users may not be completely aware of all the brand has to offer, as they now have over 100 products.
The objective was to provide users with seamless search capabilities, allowing them to easily locate products or browse by category. To achieve this task within the 2-hour time limit, I focused on designing a robust search, filtering, and sorting system to meet the specific needs of the client for a good search results page.
DESIGN METHOD
Atomic Design Structure
In UX Design, the atomic design methodology breaks down interfaces into smaller, reusable components called atoms, molecules, organisms, templates, and pages. Atoms represent the smallest elements, such as buttons or input fields. Molecules combine atoms to form more complex components, which, in relation to this challenge, would be the search bar.
Here is my process.
Source: Atomic Design by Brad Frost
STEP 1: CREATE A SEARCH COMPONENT IN FIGMA
To begin, I first set out to create a search bar component using Figma. This component required an input field, an icon, and a label, as well as presenting what it would look like in default, active, and focused states.
Here, I have created three variations of the same search bar.
The default state indicates no specific user interaction and maintains its initial appearance upon first encounter. I have included a placeholder text to signify inactivity and used a light grey border, background, and muted hue for the icon to blend with the rest of the interface.
The focused state demonstrates what happens when the user clicks or hovers over the search bar. Here, the border and icon become a prominent blue and thicker shape, signalling that the element is being interacted with, although it may not yet have received keyboard input focus.
The active state now portrays the search bar as having been clicked on or having received keyboard interaction. In this state, I have replaced the placeholder text with a text cursor and shifted the icon to the opposite side to represent an ongoing keyboard action.
STEP 2: SEARCH FOR INSPIRATION
Now that I had my search bar designed, I wanted to get some ideas of what my full results page could look like, so I looked on Dribbble for inspiration.
I took notice of how some placements of the search bar worked for some sites better than others, depending on the menu links within the navigation bar. As well, it was interesting to see the different placeholder texts, where some were as specific as possible to help users understand the interactions, while others were simple enough.
STEP 3: CREATE A SEARCH BAR FOR DESKTOP AND MOBILE
With my UI inspiration ideas in mind, the next step was to further add to my designed search bar.
This time, I chose to include several items in my component, including history, search by voice/ camera, and clear this search.
I personally liked placeholder texts that stated “what are you looking for” over “search,” as I found it both casual and specific enough for the user to understand its function.
I chose to have Client A’s e-commerce business be related to skin care. Thus, the search history includes various products or ingredients typically related to skin care. The user also had the option to search using a microphone or camera.
Once the user finishes typing their search (or, in this case, selecting a previous search), a ‘clear the search’ option becomes available.
STEP 4: CREATE A SEARCH RESULTS PAGE
The final part of this challenge was to design a search result page for the search bar component I made. The key deliverables required to complete this challenge were to create either a desktop or mobile version of this page, incorporate both filtering and sorting functionalities to allow users to organize results based on what the product is, and present 4-6 search results.
Since I chose to focus on a skin care e-store, I named this site Lumia Skin. Following a user's previous interaction of selecting a previously searched item, once doing so, the page then sends them to a page that is most similar to the one originally typed. In this case, the user is sent to the page featuring all the moisturizers.
The user can then sort the findings in order of relevance (alphabetically), customer ratings, or price from lowest to highest and vice versa.
The user can also filter the findings based on skin types, category, formulation, or price range. Currently, the skin type feature is the only functional one. In order to make this filter effective, I utilized variables to help, where I assigned one for each skin type and set only the selected one as true and the remaining as false. This way, all other products disappear, and the one attributed to the specific variable of the user’s selected skin type remains and shifts to the first position.
Finally, I incorporated display options for the listings. This allowed users to view the products in either grid view or list view.
FINAL PROTOTYPE
KEY LEARNINGS
As interesting and engaging as this challenge was, managing everything within the two-hour time limit posed its own set of difficulties. Some key considerations for future similar tasks include:
Strategically prioritize which parts of the design to work on first.
Implementing components immediately after realizing the need for multiple versions, thus saving time on repetitive adjustments for each variant.
Opting for easier solutions over experimenting with complex concepts to avoid unnecessary time consumption.
NEXT STEPS
Although this challenge does not require additional features, one part that posed a challenge was enabling users to select multiple options for the skin type filter. I could not find the solution in time, so this is something I will be learning how to implement properly and potentially fixing later on.
And That’s All She Wrote!
Thank you for taking the time to read my Designing for Search case study! Feel free to check out my other case studies or reach out if you have any inquiries! ☺️