Phase 1 Project: Creating a Better User Experience

Creating a Meme List Generator and Meeting Project Deliverables

For our Phase 1 project in Flatiron School’s Software Engineering Bootcamp was to create an app on a single webpage that pulled data from an API and utilized 3 event listeners. After browsing some free API options, our group decided to create a meme list generator that would populate a list with meme template names. The list would be searchable for specific meme templates and load the image file of meme templates selected from the list.

So our group set off to create the first version of our meme list generator, focusing on making sure we met all the project deliverables. It didn’t take too long to create the app, but it didn’t have a great user experience. The page would load the meme list with a search box at the top and would load the image of any meme you clicked on or searched, however if we take a look at the example below we’ll notice a few things that make it difficult to use or confusing…

The first version of the meme list generator.

The search function is case sensitive and requires an exact match query, so if you were trying to load the “Gru’s Place” image using the search bar then “gru’s place” wouldn’t work. It also did not return search results based on the user input/query, making the list of memes cumbersome and difficult to navigate. The meme list itself loaded each meme name element as plain text with no indication that clicking them would load meme images/

To an user outside our group it might not be apparent what our app does. So after we had the core deliverables completed our group wanted to take time to improve the user experience of the app, because what good is an app if the user has a hard time using it?

Adding Search Functionality: List Filter

The first thing our group focused on was improving the search bar functionality. We wanted the search bar to return a list of meme name elements relevant to the user input and that wasn’t case sensitive or exact match.

Search filter functionality added to the page and the list elements were now displaying as clickable elements.

To achieve this we created a new function that would check the user input in the search bar and show a list of meme names that partially matched. Our group referenced this guide from w3schools.com to help create the new search function that filters the meme list.

The meme name elements were now also hyperlinks wrapped in <a> tags, which distinguishes them as clickable compared to the previous plain text.

Styling the User Experience

Now that the page had more functionality the user experience was better, but our group still wanted to make the page look clearer and more sophisticated. Referencing the styling from the w3schools filter guide we applied new styles to the styles.css file to create a sleeker meme list.

Search bar was styled to be more prominent and the list elements were styled to look like buttons.

The search bar was now much more prominent on the page and the list elements looked like actual buttons, providing visual queues for the page’s functionality of filtering the meme list and clicking on memes to load their image.

While it may be easy to meet the exact deliverables for a project, it definitely takes some extra effort to make it feel fully functional and user friendly.