Orchestrated Design Challenge
UI design and research, front-end development
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.
Design system edits
Pen and paper
Orca Design System
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.
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.
- Built on Orca! Makes use of existing components as much as possible.
- Speaks the same visual language as a lot of gaming sites, especially Steam.
- Reasonably easy-to-understand code (eg, the CSS classes are descriptive, there's not too much nesting in the components and divs).
- Deploys easily as a live site.
- Requires manual data instead of pulling automatically from the .JSON file and iterating
Productover an array.
- Could do with child elements/components being input as
Propsinstead of using the actual component code, just for ease of use. This would require more time spent on refining the
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:
- Shift a lot of the components/code from
App.cssover to the
Productcomponent, so it can utilise the variables and global styles more effectively, and we can just use
Propsto input things like price and game title.
- Add a
ToggleButtoncomponent for the wishlist/fave feature. It would change state and content upon click.
- 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.)
- Change the implementation so that instead of the data having to be input manually, it will just pull from the .JSON file and render
Productcomponents for all the game items.
- Code for better responsive design using best practices, and test it on multiple devices.
- 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.
- See if there's anything we can do regarding load speed, and maybe put in an animation while it loads.