UI/UX design + front-end development

Orchestrated Design Challenge

UI design and research, front-end development

Challenge details

Challenger: Orchestrated.io (as part of the application process!)

Date: October 2019

Role: Designer, developer

Challenge: Design and implement a games list based on data in the .JSON file provided. Write a short report on the process, with notes on any limitations and highlights.

Tasks

UI design
UX design/research
Rapid prototyping
Mockups
Front-end development
Design system edits
App deployment

Tools used

Pen and paper
Adobe XD
Atom
Bitbucket/SourceTree
Orca Design System
Create-React-App
Netlify

Process

Step 1: Figure out the tools

Usually, I proceed straight to UX/UI research, doing wireframes/sketches, and then mocking up the UI. This time, I wanted to check if it was possible to use Orchestrated's existing design system to build some parts of this. I found the repository on GitHub and set up a local clone on my machine. I also tested the deploy process on Netlify. Once I was satisfied that these tools worked, I proceeded to mocking up the interface.

Step 2: Research and prep for UI work

I researched Steam, GOG, and other online game stores to see how they laid out their games lists. I had a reasonable idea of what I wanted, but it was useful to pin down UI elements by looking at what could be regarded as common practices.

I then drew up a rough sketch on paper to block out the elements I needed to include. I was operating on some Material Design-centric principles about surfaces, so it was important that the most important elements were on "top".

Step 3: Design system tweaks + UI mockup

I wanted a dark colour scheme for the micro-site, so I needed to tweak the design system colours. I also did this in advance of creating the mockup so that I could source colours properly.

Then I quickly drew up the mockup in Adobe XD. (I already had some kits prepared so it was fast, and the Repeat Grid system helped a lot.) I changed some minor things from the brief , for example "Add to Wishlist" had too much text and it made the whole UI look more cluttered. I also added operating system icons since that's pretty important for gamers to know.

First draft mockup
Second draft mockup with an extra game to check the second row

Step 4: Development

This mini-app is build in React, with a fair bit of custom CSS added on to the design system I was using. I worked in a local environment and used the Orca Design System I pulled from GitHub. I tracked (most of) my changes via SourceTree/Bitbucket, although once I got really deep into the code/was rushing I skipped a lot of commits. (This generally wouldn't happen for an actual project - I take version control very seriously!)

I created a new component for this (Product) which was riffed off of the Card component. I used this basically as a container for each game item, then worked within it using existing components and straightforward HTML and CSS.

I tried a couple of complex things here (experiments?) since I wanted features like toggle functionality for the Fave button, and multi-page functionality for the app, but I decided to leave those for future iterations.

Step 5: Deployment

I used a manual deploy on Netlify since automatic deploys from my repository stopped working the morning of my deadline.  So I built it on my machine and just directly uploaded my build folder.

Highlights/limitations

Highlights

  1. Built on Orca! Makes use of existing components as much as possible.
  2. Speaks the same visual language as a lot of gaming sites, especially Steam.
  3. Reasonably easy-to-understand code (eg, the CSS classes are descriptive, there's not too much nesting in the components and divs).
  4. Deploys easily as a live site.

Limitations

  1. Requires manual data instead of pulling automatically from the .JSON file and iterating Product over an array.
  2. Could do with child elements/components being input as Props instead of using the actual component code, just for ease of use. This would require more time spent on refining the Product component.

Additional notes

In the interest of time, I didn't get to implement solutions that would have been more general. Here's what I would want to do to improve this draft in future iterations:

  1. Shift a lot of the components/code from App.js and App.css over to the Product component, so it can utilise the variables and global styles more effectively, and we can just use Props to input things like price and game title.
  2. Add a ToggleButton component for the wishlist/fave feature. It would change state and content upon click.
  3. Go over the design system again and review the colours, type, and possible UI refinements. (For instance, in the middle of development I realised it would have been better for me to change the grey colours as well.)
  4. Change the implementation so that instead of the data having to be input manually, it will just pull from the .JSON file and render Product components for all the game items.
  5. Code for better responsive design using best practices, and test it on multiple devices.
  6. Run more accessibility tests. I ran basic contrast tests on the UI elements using an Adobe XD plugin but it would be good to check navigation and screen reader accessibility as well.
  7. See if there's anything we can do regarding load speed, and maybe put in an animation while it loads.

Final assets

  1. UI mockups: first draft, second draft
  2. Live site
  3. Code: repository (doesn't have all the commits yet! will push those through soon!), zip of my local dev folder

Thanks for reading! If you have any questions, please feel free to email me.