Fluently.io

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:

Fluently's landing page - Feb 2016
Fluently’s landing page – Feb 2016

 

Creating a project step 1: Naming, uploading source files and selecting language pairs
create-brief
Creating a project step 2: Creating a project brief
create-team
Creating a project step 3: Reviewing your translation team
create-checkout
Creating a project step 4: Checkout

 

Project management: A customer's project dashboard
Project management: A customer’s project dashboard

 

profile-edit
A translator’s profile edit view
A translator's public Fluently profile
A translator’s public Fluently profile

RoboLola

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 finished smart leg brace sat on my desk
The finished smart leg brace sat on my desk

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.

Some screens from the web app. From left to right: Live exercise setup / Real time flexion data visualisation / Post exercise debrief / Exercise log
Some screens from the web app. From left to right: Live exercise setup / Real time flexion data visualisation / Post exercise debrief / Exercise log

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.

After I left Head this project was featured by the magazine Runner’s World and IDG Connect.

I alse wrote a ton of blogs for this project which are linked to below

A Yeoman Generator for Google Cardboard

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.

Two questions and you're on your way building a google cardboard compatible virtual reality web app
Two questions and you’re on your way building a google cardboard compatible virtual reality web app

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

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

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

Using the local storage HTML5, werd remebers whatever you wrote in it the last time you closed the page. It also has the option to change text colour (hint: check the javascript terminal). Finally, you can toggle between all caps and mixed case lettering by clicking the on werd in the bottom left of the screen.

I used no libraries, opting instead to brush up on my vanilla javascript skills. This took me the grand total of about 20 minutes to make.

Try werd here. Checkout the code here.

Cartrl

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.

CartrlIcon

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.

Clicking the Cartrl icon opens a popup allowing you to add a product to Cartrl.
Clicking the Cartrl icon opens a popup allowing you to add a product to Cartrl.
Clicking 'Add to Cartrl' brings up a dialog where you could edit details about the product
Clicking ‘Add to Cartrl’ brings up a dialog where you could edit details about the product
Finally, the site allows you to review and quickly return to your saved products
Finally, the site allows you to review and quickly return to your saved products

Mute

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.

logo

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

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.

I wrote a blog post following our winning the original hackathon. There is also a post on the Times Development blog about our first week working at The Times.

Ferret can be demoed here and its source code is available on GitHub.