Platypus
Startup working with human resource software
Business Case

Platypus is a Copenhagen based startup working within HR. Its focus is to help companies make good hires and retain talent.

The Challenge

Platypus was in an early stage of development. They had a low fidelity proof of concept prototype that was used to successfully secure a round of pre-seed funding and early stage users.

This next iteration should greatly enhance the experience for early stage users with an easy to use interface, and continue to get new companies to buy into the product.

There are 2 core parts of the product- an in depth user profile completion process, and a dashboard to visualize and interact with the data collected from users.

Project Scope & Objectives

With a 3 month deadline the product needed a range of functions:

» Secure second round of funding

» Keep existing clients happy and excited for upcoming features

» Continue to sell the product to new companies

» A replacement to sending information to users via a PDF attached to an email

» A user creation interface that would work on mobile and desktop

» A multi-screen dashboard displaying data gathered during user onboarding process

» A more robust working product with an improved User Experience and User Interface design

» Less clicks and more condensed information presented on fewer screens

» An inhanced way to visualize the data– the core aspect of the product

ABOVE: Data visualizations on a dashboard, and a mobile view of signup process

The Outcome

✓ A new round of funding of over 1 million krone

✓ A signup flow including multiple levels of information that worked on mobile and desktop screens

✓ An entire new way to filter through data– eliminating the need for complicated dropdown menus

✓ A new way to visualize the data that was easier to understand

✓ A product presented on fewer screens, yet showing the same information

✓ HTML and CSS broken into modular components and properties for easy reusability

✓ CSS Grid coded for easy completion of all future layouts

✓ Emails (instead of PDFs) coded for use during the onboarding process

The Team

CEO & Cofounder Nico Silvestri

COO & Cofounder Daniel Bowen

CTO & Cofounder Philippe Murison

Data Scientist Aleksey Zotov

Frontend Designer & Coder Marci Papineau Gottlieb

UX Designer Zsanett Vigh

My Role

Delivered production ready code of user interfaces based on weekly KPI's.

Helped set weekly goals.

Participated in weekly meetings– sometimes as the presenter of new features.

Contributed to making the founders ideas come to life. As a coder, I was aware of how difficult or easy a feature was to create. Some of the great ideas that were discovered needed to be put on hold because of time demands.

Wrote HTML code with inline CSS for emails being sent to users. Emails can be tricky to code because they need to be written in an extremely old type of html, and there is a lot of standard CSS that doesn’t work.

Skills Utilized

» UI Design
» Product Development
» Rapid Prototyping
» Responsive / Mobile First Code & Design
» Frontend Development writing HTML and CSS
» Coding and Designing Directly in the Browser

Tech Used

» HTML & CSS » CSS Grid » Git » PHP » D3 » Visual Studio Code » Adobe XD

The Process

Weekly Product Meetings Once a week we met with the team to review what we were working on, and voice opinions. We spoke about features in progress, features for the upcoming week, and features we wanted to pursue, but at a later date. These features were put into a Trello board to keep track of.

UI Research Constantly looked for inspiration for great UI design. Steve Schoger’s digital book, “Refactoring UI” is always particularly helpful. His visualizations of typographical hierarchy principles are simple and effective in guiding users around a screen. [ If you're curious, you can see a few of his tips here ]

ABOVE: A sample of cards in the dashboard

Finding a replacement to selecting through multiple dropdown menus The early prototype used dropdown menus that were difficult to navigate and use. I wanted to replace them. During research I came across a Medium article, “Improving the Usability of Multi-selecting from a Long List.” It had data showing that by using alternate ways to visualize selections, one could acomplish longer retention times and higher success rates of task completion. [ Read research article, "Improving the Usability of Multi-selecting from a Long List" here ]

RIGHT: A new way to select multiple levels of information presented in a clear and easy to use interface– replacing multiple dropdown menus

Data Visualization Research Looked into how to visualize data that was easily understood.

Coding Research Looked into different ways to code dashboards. One of the things I knew from the start was that I wanted to create a grid that would make it easy to build new screens, and keep them consistent. I chose to use CSS grid which worked really well for this task.

Coding Built pages and screens writing HTML & CSS– working closely with the backend developer and UXer.

Rational for Design Solutions

Desktop First Dashboard Wait, what did I just say?! I saw Søren Engelbrecht, Senior Mobile Strategist at A.P. Moller - Mærsk give a talk, "Mobile When Necessary." This changed my idea of mobile first ALWAYS. Søren's story spoke of Mærsk's large shipping company and their digital needs. Some work needs to be caried out while working on a multiple large screens with multiple levels of complicated information. They will never be able to do this on their cell phones on the way home from work. So NO to mobile design. But, other things are done almost entirely on a small device while workers are out on shipping docks. So mobile first, and maybe even mobile only. It makes perfect sense of course.

Research with the Platypus founders, who have years of experience working in HR, said they didn't use their phones for complicated hiring work, as there was too much information to see at once– in order for it to make sence of it. So, with this in mind, we went with a desktop first principle for the complicated information of dashboards.

Mobile First Signup and User Onboarding Interface On the other hand, when users are signing up for the product, they are often NOT at a computer screen. So phones were the highest priority. The design and code was written for a mobile screen first, and then optimized for desktop.