SUNT
a UX DESIGN INTERNSHIP project
CLIENT
SUNT
TEAM
Two UX Designers
MY ROLE
Research, libraries, prototyping, design
DURATION
6 months
“How might we create an intuitive onboarding to land investment funds and new users?”
Client
SUNT is a company with a platform focusing on increasing the dialogue between buyers and suppliers in order to allow for more transparent and sustainable procurement. To achieve this, they are using transparent ratings and reviews in order to help you get as much on an informed decision as possible before investing. The name SUNT is an abbreviation of the words Sustainable and Procurement, taking the first two letters of the first and the last two letters of the second word, thus creating the name based on their core vision.
The ultimate goal of the journey they’ve embarked on is to create a “Trustpilot” of sorts for the public sector and public procurement, primarily within Sweden. Why? By simplifying the procurement process while making it more transparent, informed and efficient makes the entire process more accessible and sustainable.
Target Group
This project has two main target groups to put it in broad terms, those who are looking for products and services and those who offer them:
Buyers are the ones who are in the market for other people’s services to help benefit their needs. This group has a need of knowing what actors are within the field of their concern, who they are, what other people say as well as how do they really perform.
Suppliers on the other hand are the ones who are offering their services within the public sector. This group aims to find new clients, land contracts and increase their reputations by putting their best foot forward. By being available, more accessible as well as having their strengths and potential weaknesses highlighted, they are aiming to gain a boost in revenue, contracts as well as reputation. To achieve this boost however, they must ensure great performance every time, which just creates further incentives to strive for quality.
My Role
I was recruited as one of two UX designers, where we were put tot he task to bringing their idea to life. This role, however, consisted of waring a myriad of hats, including but not limited to: researching, creating design libraries and style guides, conducting interviews, planning ahead to create material to land investment funds, work side by side with programmers, prototyping and more.
The main initial Challenge
Right from the start it became apparent that the scope wasn’t quite set. Was it an onboarding that was the desired outcome? Create a website using an existing platform? Create the foundation of a new platform from the ground up that was to be installed on client machines, or something accessed through the could? The list goes on and the indecisiveness was apparent, however, due to the nature of the start-up we could start by experimenting just to see what could potentially work out while waiting for clarifications of questions we had regarding purpose, visions and brand.
Design Approach
As the organisational structure as well as user journey have been established and identified, the next step was to create designs based on these blueprints to have something concrete to build on. One of the charming aspects of working with a start up is that even though there may not be the clearest of directions at times, one can quickly make 180s in the early stages in order to by process of elimination identify what is desired and what isn’t. Another perk is that one can have deep yet creative and light hearted conversations with the founders as to what they think could work as to before UX Designers got into the picture.
These early stages were characterised by rapid prototyping, sketching and conceptualisation through mini sprints. They took place both in groups as well as individually, using figma or pen and paper - everything to get as much gathered as possible to make it easier to sort out what were positive elements and what were things that could be left behind.
Design Language
Since there were no design language, style guide or brand book in place there were practically no real limitations as to what could be used as the foundation of our design language. This resulted in more research as to what could be a good fit for the platform and its purpose, namely through competitive analysis, applying colour theory and iconography to build the aforementioned style guide and brand book from the ground up.
Colour Theory
Even though pastel and dark/night mode have both seen a rise in popularity in recent years much due to the fact of more colourful hardware as well as the rise of OLED technology, neither were settled upon when deciding on the colour scheme. Colour theory were applied in this decision process as to what colour suits in what situation, what do they represent and most importantly, how does one feel when subjected to it. However, this took a bit of a back seat role as the colours in the new brand book came directly from the client themselves (even though in meetings they didn’t quite know why they settled for it).
The shade of green (teal), typically representing growth, balance and safety were found in the top layer of the old logo of the company.
The blue, representing stability, trust and confidence, were found in in the footer of the first version of their website, and got darkened just a little bit to increase the contrast and impressions it conveys.
The remaining shades of colour (grey backgrounds, red, yellow and clear green) were selected because of their familiarity to the user. The grey background shades are common in apple based systems, and the status colours are used as status indicators (i.e. available/online, idle/away and busy/offline) on various platforms.
Iconography
The iconography were in the same fashion as the colours, with a solid focus on familiarity and simplicity. By utilising recognisable and well established icons as a foundation for navigation and interaction, it was simple to create the foundation for the icons that would become present. When the icons and the colours were selected, it then became q much simpler task to bring the icons to life through prototyping, allowing them to feel alive and responsive before handing them over to investors and developers.
In terms of iconography there is one icon that is important for the image and branding of a company, or any organisation to various extents for that regard, and that is the company logotype. This was one of the first icons that were created from scratch, allowing for an identity to be generated - very much to the client’s excitement.
It started with importing the old logo, created as a fun distraction some time ago in powerpoint, and making it editable by recreating it in Figma (the tool being used in this project).
While turning the converted design into a blueprint, all distracting visuals were stripped off in order to create it as clear as possible where every line were highlighted - providing a greater insight as to exactly how it was created.
By removing asymmetrical lines and cluttering text, the clarity and simplicity of the logo could be improved. In addition, the logo was snapped onto a grid system, aligning every angle and line onto a grid to ensure no deviations happened. Lastly, dots were added at the intersections of the inner lines to illustrate the networking nature of the platform.
The last step was all about fine-tuning the dot and line dimensions while making sure it still followed the new grid, as well as applying the company colours to the logo. In addition, a version where the graphic itself is white wit the company colours as the background were created as well as an alternative depending on the use case.
Iterate, Iterate, Iterate
The structure and platform itself, were something that slowly evolved over time as the style guide and brand book slowly took shape. This was, however, not necessarily a journey straight from A to B, but much rather a projects with a lot of experimenting, changing directives uncertainties that had to be explored and/or resolved.
Moving forward the team had regular meetings with the client, who were more than happy to help, provide incremental deadlines for investor presentations and sharing their thoughts on what could be done differently or what to further elaborate upon - with in and of itself had its’ fair share of pros and cons. The pros being the informative stream of insights and indications that we were on the right track, with the potential pitfall of them finding rabbit holes and change their minds from one day to the next - that allowed us to explore more perspectives which proved to be invaluable in the long run.
Overall during the project, the product went through three major design changes, due to new problems emerging as the structure and user needs were solidifying at a steady rate. The changes weren’t too fundamental per se, however, as new desired functionalities were identified, some navigation had to be adjusted which had a snowballing effect. Although, as this was the nature of a start-up, and that (somewhat thankfully) no developers were involved at this stage, we could swiftly regroup and reconstruct the layout and navigation systems.
Investment, development and time
As previously mentioned, investment deadlines were a reoccurring theme throughout this project, which was important for several reasons. First and foremost, it was to land additional funding from future users who saw potential in what they were seeing, second was to provide enough material to win funding competitions, third was to have a solid sense of progression and constant a constant clock ticking away before developers were brought into the mix - and by then there should be enough to hand over, which I am more than pleased to say there were more than enough of.
Outcome
When this project came to an end, the platform had transform from a napkin pitch on a ppt slide to a platform in its’ soft launch alpha state. Much due to some delays from the development side of things but with additional iterations ready to be handed over for version 1.1, 1.2 as well as 1,3 - each focusing on a new function and element in addition to the MVP.
The platform, which I will do my best to describe without giving away too much information, has the following functionalities:.
Search, in order to find fields of work, locations, companies etc.
Sorting, sort the lists/results by location, name, rating and more
Profile, a place where you can make your presence on the platform, allowing for you to find what you’re looking for and others to see your history
Rating, a in depth rating system with not just the classic 1-5 stars, but additional 6 factors and ability to leave comment regarding expectations, time management, outcome and more
Read invoices from previous clients of the actor you’re looking to buy from, in order to have as clear a picture as possible
Contact companies through the built in messaging system, email shortcut of phone provided.
Organisation pages, look up ratings and reviews from others of an actor you’re looking into hiring. This page also provides a brief overview, location and contact information on top of the built in messaging services.
A “help me” bot allowing for users to quickly ask for help or guidance in order to get the most out of the functionalities of the platform.
Some additional features were added as well that would be best explained through pictures. However, as this is a closed platform for the time being, and an NDA is present, I am not confident enough to share more details regarding the final result in addition to the images already provided.
A Mixed bag
Sometimes when you enter a project at the very early stages, it can be a bit harder to perform at your full potential, especially if the directions given are changed from one day to another. However, the outcome despite that ended up with all parties satisfied and happy with how it turned out. The owners had a product that they were happy with, the developers hadve been able to deliver something that they were happy to work with, investors were happy to put money into this project and future users were by the end of my time at the company already happy to start using the platform. This being said, I think it ended up rather nice considering the shifting nature of this project due to it being a start-up with no initial sense of direction when it comes to design, user journey or approach.
My Takeaways
On a personal note, I felt like time really did fly on this one. It was fun to work with, always some new mystery to solve and problem to crack. Sometimes a real roadblock occurred and a deadline started to remind itself of its presence but it all turned out nicely. I honestly didn’t expect it to be so fun to work under a tight time frame, but it all comes down to the people surrounding the project as well. Being able to learn how developers work and actually be allowed to sit in on their meetings and soak all information in was just amazing. And wha tI will never forget was how the project landed funding from national investment funds, all by using project files that I alongside of my UX partner had created. That was a moment that I won’t forget anytime soon.