MY BeHappy

Dashboard Redesign

#userexperience #userinterface #dashboard

Dashboard Refactoring Case Study

The Customer

Our clients can use the service called MY BeHappy, created to solve the need to have an automated billing, accounting and payments system. From MY, our customers can access and manage they data, payment methods and manage their subscriptions among other services.

The Request

We created MY back in 2012. Since then and with numerous updates including bug fixing, new features and legal restrictions, interfaces became outdated. The design looked old-fashioned and the user experience needed to be more intuitive. So we wanted to make MY more accessible and appealing again.

The Idea

To make MY more pleasant and efficient to use, we needed to do a complete redesign of the customer area always from our customers point of view, reflecting on all our initial design decisions and improving the user experience.

The Challenge

Over the years we added some new features to MY acoording to the needs of our customers or rising regulations, sometimes not in the most logical way. To make the interface more intuitive again, we would have to start from zero and build the interface structure up again to design the optimal layout.

Our Work

Our Role

Since this was an internal project, we performed all the needed stages ourselves and invited some of our collaborators and customers into the process. This went from formulating the project goal to developing the new interfaces.

The Process

In our initial discovery stage, we performed different user research techniques aimed at creating a new information architecture. Information architecture is the art and science of organizing and labeling interfaces to support findability and usability. To get different perspectives on the ideal interface, we let our team create their own structure. We wanted to consider these heavy-users that spend most time in the platform from the beginning, to make their most frequent tasks even more efficient.
Our team created their optimal content strategy through card sorting. This is a technique typically performed with grouping sticky notes, but since we are a remote company we used an online tool for this. We placed all needed pages in OptimalSort, and then let everyone freely sort it in a way that they thought was best. From combining the result we could decide on the optimal structure.

Information Architecture

Information architecture is the art and science of organizing and labeling interfaces to support findability and usability.


To get different perspectives on the ideal interface, we let our team create their own Information Architecture. We wanted to consider these heavy-users that spend most time in the platform from the beginning, to make their most frequent tasks even more efficient.

Card Sorting

Card sorting is a method used to help design or evaluate information architecture. All information gets written down on post-its (physical or digital). For this project this information is all the existing sections of MY. Then, one person or a whole team can group information together and move things around, to reach an optimal redesigned structure.


This technique is nice to use, because it is cheap, quick and easy and you can involve anyone in the process. So you could do this with your team, partners and users.

mobile prototypes
mobile prototypes
mobile prototypes
We created the first form of a user interface in wireframes. We think a wireframe is a model in which we focus on the structures, prioritizing the location of items before spending time in visual artifacts. This enables us to only focus on the larger concept, and not minor details. We can use wireframes for quick user tests, to ask for feedback and open conversations with the client or our co-workers.

After finishing our ideal wireframe, we could start creating the final design. We typically start creating the UI in Sketch and then move it to Principle or Figma for the interactions. In this stage our designers can get creative, whilst being inspired by data-driven decisions. Only like that you can create experiences that are efficient for the users, relevant for the community and sustainable for the business.

Mobile-First Approach

Today all designs should be responsive, in order to function the same on any screen. Now, more than ever, we access content from very different devices such as smartphones, computers, different wearables and even TVs. The purpose of MY was to make it easier for our customers to access and manage their services and data, so we took that into consideration and adopted a mobile-first design approach. This is especially challenging for MY, because it shows a lot of data. How could we make sense of all this data on a phone screen that does not have a lot of space to work with?

MY is mostly used for quick check-ups, so we need to make sure that this is easy to perform on a smartphone, but also take advantage of bigger screens like in a desktop computer.

The advantage of starting with a mobile UI is that you are immediately forced to prioritize your content and only display necessary items. You have to make optimal use of the space by choosing the right content and interactions. Then when the mobile UI is ready, it is relatively easy to fit this same content and order in a larger desktop UI.
tablet view interface laptop view interface

The Results

A key aspect of our redesign is setting up a dashboard. In this home screen we placed all frequently used items, so the user would have everything at easy access. This is a big improvement from the old interface, where the user would have to visit different pages to perform the desired actions.


In the end we created a complete redesign of the sitemap of MY BeHappy and every separate page. We optimized the user experience, and provided a modern design.

MY BeHappy After Redesign
MY BeHappy Before Redesign

The Future

Right now we are considering multiple future options. We are planning to integrate an existing tool into MY to add project management features to MY. That way users would be able to check their starting date, current stage of the project and so on, and share links and documentation.

As you can see, a design only gets completed when you decide it's finished. We still have some options open, and are looking at different ways to further improve MY BeHappy for our customers. Don’t hesitate to contact us and share your thoughts!

Start your new project today!

I confirm that I have read and accept the Privacy Policy, Cookies Policy and Legal Terms.
Contact us Go top