Meritt is my latest side project and it all started in late 2018.
This study will focus primarily on application experience to identify friction points in the professional development process within corporations and how to make the user experience more enjoyable for the everyday user.
The research process was done through several methods where the visual hierarchy and the user interface were constructed based on the results of the interviews of our target group. I am responsible for all its UI, research, UX, prototyping and had the mentorship of Diego Magnani.
The idea
The idea came after a friend came up to me and said he was very unhappy with the company he was working because he was there for a long time already and never had a chance to be promoted.
In fact, that company did not have a defined career plan for its nearly 200 employees because the hierarchy that already existed there was so strong within its organizational culture that it did not allow the growth of new and young talent. As a consequence, most of the employees were always very unhappy, unmotivated, and this had often been translated into mass layoffs.
So I came up with the idea of helping him by creating a simplified and gamified feedback app for businesses.
The problem
________
The end of the linear career plan and the future of people management.
Until 2018 (and still in 2019 I believe), in Brazil, companies that maintain career plans are very rare. Many companies simply do not have defined career management for their employees. Especially those that have an old-fashioned and cascading culture. If they promise that in two or three years the employee will be a leader or a manager, and they do not comply, they will have a disgruntled employee.
Often one hears: "So-and-so must earn more" or "he or she can be promoted". What are these based on? Employee time is no longer a deciding factor for a raise or a promotion. We live in a moment where meritocracy prevails. Those who are better able to be promoted will grow, not the oldest in the company.
Companies with more visibility, big companies that everyone would like to work on, are hiring people expecting them to produce too much in too little time. On the other hand, without seeing advantages, the best professionals will not choose to stay in these companies without at least having a real growth opportunity. In this context, a more solid and defined career plan based on merit would greatly help both sides.
Goals / Challenge
__________
Be a collaborative platform between the company and its employees that evaluates and optimizes professional development with the purpose of generating promotions and bonuses through meritocracy.
OK but how?
The concept behind the platform created will allow the evaluation of performance and professional development with maximum efficiency and transparency through regular feedbacks and gamification with its managers and superiors. This will ensure that all employees have a clear view of their evolutions and contributions to the company's strategic goals from quarter to quarter. In addition, it will help create a feedback culture that will enable alignment across all parties, optimizing organizational performance.
In the end, it is hoped to highlight and give greater visibility to the best people based on their merit, where performance evaluated along with a more holistic view of managers can contribute to compensation and salary review decisions favoring career management and greater engagement of employees to the company.
Users & Audiences
Once defined the problem and its goal, the next step is to know who your user is and their pains. Therefore, the user’s research is very important to structure the whole idea of the project. But before I did a little plan to organize my ideas and keep me focused as follow.
Research Plan
Goals
• Identify the employees' pains in relation to managers and vice versa;
• Identify how I can optimize the work environment through the product;
• Identify how I can optimize the work environment through the product;
Methodologies
• Interviews with users
• Online surveys
• Online surveys
Hypotheses
• We expect to find difficulties to locate friction points in the professional development process within corporations.
Research
My intention with this initial research was to conduct interviews with employees who were part of the same company, and thus identify the main difficulties in relation to the career management within that corporation.
For reasons of confidentiality and legal implications, I omitted the name of the company on the subject.
So I put together a small questionnaire and then recorded 7 audio interviews for qualitative data. Then, with the same questions, I put together a questionnaire online for quantitative data. I got 21 replies in total from within the same company.
For the quantitative, I decided to be more comprehensive and do the online's research in groups and social media communities to see the differences in results. Those questions were chosen to know the demographic, behavioral characteristics, needs and dreams/goals of the employees. In these, I had 31 answers in total.
The interviews were essential to guide the project in the construction of the user's personas.
Qualitative Research
First two different questionnaires were done. One for the subordinates and another for the leaders group and it was also done with several employees of different areas of the same company. The interviews were recorded in audio and then transcribed.
Quantitative Research
The quantitative research was done online through slack groups and social media communities. The questions for both leaders and subordinates were mixed in the same questionnaire and as their choices were made they followed different paths with different questions.
You can also check the full research results by clicking the button below.
Research Results
In the end, the results of the surveys served to validate the hypotheses previously made. However, I noticed that there was almost general dissatisfaction with the way the company managed the careers of its employees. Leaders also did not feel comfortable and believed that more efficient and 360-degree feedback needed to be deployed as quickly as possible.
Finally, I was quite surprised to hear how people could collaborate when we set out to listen to them. I felt they wanted to expose everything wrong that was happening to them at that moment. They said they could hardly find people interested in wasting 5 minutes talking about their careers. With that in mind, my ability to observe, understand, and feel empathy directly affected my choices and design paths, information architecture, and new features that were yet to be created.
Processes
User Persona
A ‘User Persona' helps to establish a thin line linked to real needs and expectations that involves the concern not only that people can use something, but that they like to use it and, above all, that the experience as a whole is relevant for them. In addition to guiding the development of the product, they can assist in the development of strategies, voice tone used in communication, creative line for visual productions and etc ...
With the aim of the project and the still fresh interviews in mind were identified patterns in the responses that enabled me to create two personas types as you can see below:
Benchmark Analysis
Once I knew the pains and motivations of our users through User Personas, I had a brief idea of the path I could take with our application. At this point, I felt the need to benchmark its competitors to see how the problem, the same or similar, was being solved by them.
Benchmark is always something very important in all projects as you can:
• Identify the threats and the delivery of competitors' products and services
• Build consensus on a quality baseline with stakeholders
• A strategy to overcome what already exists
With a wide search on the Internet and apps stores we found the following main competitors:
Click the image below to see the full Benchmark Research.
Usability Heuristic Analysis
Usability Heuristics is a fast and efficient method of analyzing a product, service, or interface and accessory performance. On the market, there are numerous ready-made heuristics, which may be very specific to particular types of projects or may be more comprehensive. The most well known and used heuristic is by Jakob Nielsen and his 10 heuristic usability principles.
A well-designed Usability Heuristic Analysis can provide information about project quality and identify any issues of concern or that may hinder its development. It also serves to identify immediate needs that can lead to excellent improvements.
So I did it for:
• Smartleader
• Runrun.it
• Papo Reto
• Ponto Mais
• Smartleader
• Runrun.it
• Papo Reto
• Ponto Mais
Click the image below to see the full analysis
Ranking Results: 1º Runrun.it / 2º Ponto Mais / 3º SmartLeader / 4º Papo Reto
Empathy Map
The purpose of the empathy map is to deepen the knowledge about the user personas and to discover what they think, how they act and what their needs and desires are in relation to the research object, which can be a market, a company, a service or even a product.
This is done through an exercise of empathy, putting yourself in the place of the user of that experience and imagining hypotheses about your thoughts, feelings, and attitudes.
So, with both personas in mind I did this:
User Stories
Once I have identified the goals, needs and pains of our personas above, it is time to apply the technique of user stories. A user story is a short phrase that encapsulates a need or a part of the functionality in the language of the end user. It summarizes what is the requirement or purpose and the reason for it. This also means that the requirements are presented in a user-centric way.
The user story is something that forms the basis of Agile projects. Rather than a traditional functional specification document Agile projects have a list of functionality comprimised of user stories called a product backlog.
How do I create a user story?
Fortunately a user story is extremely easy to create once you have done the initial thinking behind it.
What should a user story contain?
One good sentence structure could be like this:
'As a user I want to be able to <functionality/goal> so that <motivation/reason>
You can check those for the project down below (click to see it full):
Card Sorting
Card Sorting is a widely used tool in the information architecture stage. It serves to understand the mental model of how people group content and resources or how they interpret the meaning of those groups (labeling / taxonomy) in a way that makes sense to them and thus increases the user's ability to quickly locate within a system. It is a fast technique, with relatively low cost, especially when applied through online tools.
Card Sorting is also a great way to generate an understanding of how the user thinks, how he would like to find information in a grouped form and what names would be best for those groups or resources.
So, there're basically two types of card sorting:
OPEN - Participants receive cards without pre-defined grouping. Then they are asked to gather the cards into groups they deem most appropriate and give each group a name.
CLOSED - Participants receive cards and an initial set of pre-set groups, and the task is requested to place the cards in those groups.
My intention at this stage was to do an open type and then try to learn more about the random groupings and taxonomies made by each selected person. For this, we use an online tool called 'Optimal Workshop', where the person can remotely use the kanban method to drag cards, group them, and finally provide the most convenient names (taxonomy). The tool was used with 7 people and the cards with the features were created with the user stories made previously.
You can check the results below:
Card Sorting Results
A large number of cards with similar names and their subjectivities may have confused people, disrupting a clearer and direct taxonomy. For this reason, there was a great variation in the names of categories and the taxonomy was a little confused. After all, I managed to extract some grouping insights that I will use to make the MVP home map site.
Visual Sitemap
After spending a good amount of time organizing the information obtained from the taxonomy’s card sorting I was able to make my first visual Sitemap.
Visual Sitemap is a skeleton of a future website/app with precisely structured information about it. Usually, it contains information about the structure of pages, tasks for developers as well as the project’s content.
My model was also based on the two personas previously made, so each persona would see one application a slightly different from the other. In fact, just some additional features were added so that Paula (manager) could have better control of her subordinates.
User Flow Overview
To get a clearer idea of navigation, I decided to build these User Flows. They were divided into one user flow for each dock's tab. So there were five that I called A, B, C, D and E.
If you want to see it in more details just click in the image below.
USER FLOW A
USER FLOW B
USER FLOW C
USER FLOW D
USER FLOW E
Wireframes
After all these processes, we finally come to the part of gathering this information and applying directly to the construction and design of the product. The Wireframes.
A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used to define the hierarchy of items on a screen and communicate what the items on that page should be based on user needs.
The easiest way to think about a wireframe is in terms of building a house. Before you apply all the paint and furnishings the architect needs to draw the floor plan. He needs to make sure the spaces in the house function well and that they are where the occupants would expect them – no good having a kitchen in the master bedroom or a light switch behind the toilet!
Wireframes can stretch from a low fidelity pencil sketch to high fidelity and fully annotated diagram and all that comes in-between.
For this matter, I decided to make my wireframes already in a high fidelity model to save processes although it takes longer to complete them.
Rough Sketches
But before that, below are some of the mess I created with the first models.
High fidelity wireframes in depth
Now I will show the wireframe in hi-fidelity and each separate part of the app. For being more familiar I decided to start this first model for the IOS system and iPhone Xs.
Main (Action) Menu Button
The first thing I thought of for the app was its main menu button and I wanted it to be something new, different and it also had to be the big highlight item on the whole screen.
The main idea behind this button is that it would act as a main (action) button and though "morph" into different states according to the screen the user will be using at the moment.
Main (Action) Menu - Active
When the main menu is activated, some buttons appear above the previous screen on a blackout screen.
Newsfeed, Golden Pool, Surveys
The first home button consists of 3 tabs:
• The Newsfeed tab is just like any other social media we already know except it would be exclusive to people at the same company. The intention with that is to let people of the same company see the badges acquired with the others' points, as well as their updates and thus gain more visibility within the company.
• The "Golden Pool" tab is the main area where everyone wants to be. It will work like a ranking area where there are several groups/pools of different levels. The higher the level the greater the visibility and the chances of being promoted.
• The Survey tab is where employees can ask something to the HR or simply discuss about a certain subject or vice versa.
All screens
Now I will show all screens in a logical and vertical sequence. If you want to see it in more details just click 2x in the image below.
Branding
Monogram
After having spent a lot of time up to this point with several UX processes and also with wireframes, it's finally time to apply my knowledge as a designer to build a visual identity.
I always like to start thinking about the idea of first creating a striking symbol (monogram). Monogram is a motif made by overlapping or combining two or more letters or other graphemes to form a symbol. Therefore, I believe that a brand or idea well represented in a well-constructed image helps a lot in the acceptance of the product as a whole for the user.
For Meritt's monogram, I wanted the symbol to be unique, strong, modern, vivid in color, easy to memorize and somehow represent user growth in the company. So, with the help of Fibonacci's proportions and its golden ratio, I built a monogram of the letter M.
Gradient Palette Colors
If you are wondering about the gradients above, all I have to say is that I love gradients. I'm in constant search to get inspirational colours and until now (2019) gradients with vibrant colors is still a trend. Also, my background idea was having enough colours to fit the official color palettes that will be used in the app interface in the future.
Lettering
Looking back at the monogram and its rounded shapes I wanted to find a font that also had its round base so it would not look completely different.
Searching the internet I found a font called "BDP Birgula" that seemed interesting to me. Despite being a very round font, it had square ends and was very thick. At first, it bothered me a bit but I decided to try anyway.
So I adjusted some ends to be rounded and left others as squares and I also cut the leg of the letter E. I just thought this would make the font more unique. Well, then I adjusted its thickness by taking 3 pts of inside's edge and I also made the spaces between letters equal the thickness of the leg of each letter. Finally, I believe the overall 'handmade' font was more in agreement to be used with the monogram I created before.
Logotype - vertical
Well now let's put it all together and see what happens. Lol.
Joking aside, after a few adjustments, such as word width, its distance from the monogram and the addition of the bluish-gray color, I believe we have our first vertical logo.
Vertical, horizontal, icon app, positive, negative and reduction
Now let's apply our logo in different versions and also make the reduction to see how it behaves.
Project in progress ... to be continued :)