Supahands

UI/UX, Front-End, Website, Branding



Supahands is an international multicultural outsourcing service startup based in Bangsar South, Kuala Lumpur. Supahands focus on providing clean and accurate training datasets to companies within the Artificial Intelligence and Machine Learning industries through image annotation, data tagging & categorization and data transcription. Our SupaAgents work on complex tasks such as preparing training data for machine learning algorithms. Supahands also launched our own tasking platform called Supahands Task Console that dissects data and automates the distribution of microtasks. From self-delivery robots to facial recognition, we’re spearheading an Asian-centric workforce that gives companies both the localization and diversity that they need to create truly global artificial intelligence systems.

As a Product Designer, I oversee 3 Supahands' products which are the marketing website, Workplace (Operation Management System) and Task Console (tasking platform). I am in charge of all Supahands' creative works including marketing collaterals, video projects, and posters. In the earlier stages of this project, I only focus on the design and the front-end was initialized by one of my colleague, then I took over that responsibility as well.











Background

Problem: Supahands business is changing from a B2C to a B2B company, the goal is to stop B2C clients from using and contacting Supahands and attract B2B clients instead. This is a huge step from Supahands and requires a total revamp of our branding and web pages to ensure that we are communicating the right message and attract the right users.

Team:

  • Me (UI/UX + Dev) - Continuously Working on this
  • Syith Mukhtar (UX + Dev) - Initial stages only
  • Suyin Voon (Marketing Copies)
  • Isaac (Product Manager)
  • Tools: Sketch App, Adobe Illustrator, Invision, Marvel App

    Discovery Phases: We run a weekly Design Sprints for each webpages. Means that in 5 days, everyone in the team sits together to define the purpose for each pages and uses cases of our potential users. Having people from different department is vital to obtain different perspectives and hammer down the right approach.



    Through this ideation process we narrow down our educated assumptions and solutions.


    A few wireframe versions were tested with users before we finalize the design.




    Solution: Based on the user testing results, I created a final design in Sketch and pass it to the developer. We've used UCD (User-centered Design) approach, this is why user's feedback is so important in shaping the final design.

    Outcome: New modern Supahands landing pages, New cleaner and more consistent visual language (Icons and illustrations)












    I applied a Parallax Effect for each headers to give the website a sense of depth.






















    Of course, I can't show all of my work on this page, but here are some of my illustrations that I used for the website and marketing collaterals. Almost all of the illustrations on Supahands.com are designed by me using Adobe Illustrator.




















    I hope you like it, and feel free to contact me for any questions.
    Don't forget to checkout the live version here.