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