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.



Disclaimer: For confidentiality reasons, user flows and metrics are simplified and slightly tweaked.











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.





    The figure above shows the user journey for our new website. Our main goal with this redesign is to increase awareness, describe our service better and increase client purchase.

    We are also updating our FAQ pages to reflect our new service as a lot of our visitors come here to learn more about the service. It has become very apparent to us that most of our visitors don't really understand what do Supahands actually do. This is of course a huge problems since our website is the first thing they visit to get more information.

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

    We changed our tagline to fit the business better, added a few new sections that explain the process of using Supahands, explaining how Supahands can be integrated into their business.

    Additionally, we are displaying all four service verticals with in-depth explanation. These types cards can further be clicked to lead the user to a landing page specific to the vertical type which also includes examples and use cases.












    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.