Shopify UX Developer Challenge 2020
Movie awards webpage development for entrepreneurs

4 days, 2020
Html+CSS, Vanila Javascript, JSON, jQuery
UX Developer
My Role
Design Challenge
Through this solo UX developer challenge, I practiced and improved my UX development and front-end coding skillsets. Besides UI prototyping, I have the ability to craft technically feasible prototypes, which are ready for scalable front-end development. Although this project is based on a single webpage, I got a deeper understanding of the micro-interaction logic behind different user actions.
The Challenge from Shopify


We need a webpage that can search OMDI for movies, and allow the user to save their favorite films they feel should be up for nomination. When they've selected 5 nominees they should be notified they're finished.

We'd like a simple to use interface that makes it easy to:
1) Search OMDB and display the results (movies only)
2) Add a movie from the search results to our nomination list
3) View the list of films already nominated
4) Remove a nominee from the nomination list

Technical Requirements

1) Search results should come from OMDB's API
2) Each search result should list at least its title, year of release and a button to nominate that film.
3) Updates to the search terms should update the result list
4) Movies in search results can be added and removed from the nomination list.
5) If a search result has already been nominated, disable its nominate button.
6) Display a banner when the user has 5 nominations.
The Outcome

The Preview

I take the Shopify Polaris design language system as a reference in my UI development.

Next Step

I plan to use jQuery to add more transition animation for loading, list elements, notification banners, and the section displayed when there's no search result.

More coding projects...