Fluently is a professional human translation services market place startup. I worked there from October 2015 to February 2016. As first employee, my responsibilities spanned the entire stack, but my focus was UI/UX design and front end build. While working there I reimagined UIs and UX for:
the landing page
translation project creation flow
translation project management
translator’s public profile’s (think domain specific LinkedIn profiles)
translator onboarding and profile creation and editing
site wide UI features such as navigation and notifications
All this was designed in the browser targeting the last two versions of the major browsers. In the course of my time there I moved the company away from an over-reliance on the visual style of the angular material framework and created a new, sleek, enterprise friendly visual style which was enforced with modular SASS and reusable angular directives. A directive first policy was adopted and angular controllers were phased out to future proof the angular 1.x codebase with a view to migrating to angular 2.0. I left the Fluently before this migration took place.
Below are selected screenshots of my the site taken in the month I left the company:
My last project before I left Head I created an internet connected leg brace that would monitor the angle of the knee as the wearer walks throughout the day. This was with an aim to have a large amount of leg movement data post Lola’s (Head’s UX Director) knee operation. Starting with a standard leg brace, I created the necessary hardware from some basic electrical components and a Particle Photon (like an Arduino but better).
The brace reported step data (time and min/max angle of leg during step) to an API which I also created for this project. The brace also had an exercise mode. When activated, it would report live angle data to the API which was visualised on the brace’s accompanying web app. Think Nike+ for your post knee op recovery.
This project required the creation of a bespoke API (built in Node.js and MongoDB), an an accompanying web app, built using Angular 1.x. The hardware itself required a custom circuit designed by me. The Photon was required to read and write from an SD card and make a web socket connection with the API. Both of these required modifications of existing Arduino libraries before they were usable with the Particle Photon platform. The brace also required custom housing. The components for this were designed by myself and a colleague in Blendr before being 3D printed.
Generator Cardboard is a yeoman generator that scaffolds out a web app that’s Google Cardboard ready. I’ve been working on virtual reality web apps for Google Cardboard at work and found that while there were many blogs to get people up and running, there was no yeoman generator to scaffold out the tedious boilerplate code each app requires. So I built one.
Version 1.0.0 of generator cardboard (the current version at the time of writing) offers some basic configuration. The user can choose whether to include Twitter Bootstrap, SASS and Modernizr and choose whether to build out a simple virtual reality scene built with THREE.js or whether to have no VR environment built. Regardless of configuration, once run you are left with a project directory structure which serves a landing page for you Google Cardboard VR experience which launches the experience into fullscreen at the tap of a button.
I intend to continue development to incorporate a helper library (that I haven’t yet written) which aims to provide a simple API to set up Google Cardboard compatible VR environments. This will make initial setup of an app as simple as possible without occluding any of the power of THREE.js.
I’m using GitHub pages as a homepage proper for the project which you can view here. I also keep a demo page available so you can see what the generator spits out by default.
The code is open source, hosted on GitHub and you can view it’s npm package page here. I’m very keen to receive feedback from new and experienced VR developers alike. If you’ve got any comments tweet me @jeshuamaxey or open and issue on GitHub.
Werd is the simplest way of getting text onto a screen that I could think to build. The idea came to me when I wanted to say something to my friend sitting next to me, but couldn’t speak too loudly as we were in an audience. I just wanted to type my thoughts and have him read my message. In that moment all the text editors on my laptop would have been too cumbersome to open and required me to fiddle to make the font size large enough. Thus, werd was born.
Werd is incredibly simple. I set myself the task of making it in a single file and at the time of writing it comprises a 149 line index.html file. That said, werd does sport some features (though that’s stretching the definition somewhat).
Cartrl allows you to save all the products you like in one place. Think of it like a visual bookmarking tool for things you’re thinking of buying. No more tabs hanging onto your browser window for dear life! That’s the idea anyway.
In reality, it only ever reached the proof of concept stage with only 6 days of development time given over to it. In that time I built a chrome extension (downloadable here) and a site. Using the extension, you’re able to save products from around the web into a single shopping cart, your Cartrl. The site displays all of your saved products, allowing you to quickly review them and return to the site to checkout if you decided to buy.
The site is a MEAN stack; specifically, I used the brilliant Angular Fullstack yeoman generator to quickly scaffold API end points and angular directives, services and controllers. The extension is an combination of angular app and jQuery scraping scripts. The code is currently in private GitHub repos, but I expect to make them publicly available soon.
Below are some screenshots showing how a product can be saved to Cartrl.
Mute is a simple web app which shows you all the people on Twitter you have muted, functionality Twitter does not offer itself.
Mute was built in a single day; I set myself a strict deadline to see how well I could use the skills I claim proficiency in, rather than learn new ones. The back end is built in Node.js using the Express framework and uses the Passport library for Twitter authentification. The front end is templated in Jade and uses Twitter Bootstrap. The app is hosted on Heroku. All of these technologies were chosen to reduce development time to a minimum. A longer blog post about Mute is in the works.
Mute is live and can be found here (please allow a few seconds for the page to load: low traffic + heroku hosting = long load time). All the code for Mute can be found on GitHub.
Ferret is a proof-of-concept app for journalists which helps find the first relevant tweets about a breaking news story. Ferret graphs the number of tweets for a given search term and allows you to retrieve only those tweets sent in a time period you choose, most often just before the explosion of noise on twitter drowns out the rare, relevant tweets. Ferret (originally called ‘Low Pass’) won the Build the News Hackathon. It was further developed over two weeks by myself and one other developer, hosted by the Times digital team.
I was responsible for the entire front end development of Ferret. For this I used Google’s web component library Polymer. The front end codebase is incredibly modular and DRY as a result. Polymer and web components are incredibly nascent technology and while building a proof-of-concept, cross-browser support was not a priority.