Mlabs Mobile App
Creating a mobile app based on a responsive platform with Web View technology.
Mlabs Mobile App
Creating a mobile app based on a responsive platform with Web View technology.
Mlabs
Mobile App
Creating a mobile app based on a responsive platform with Web View technology.
About the Case Study
The Company
Mlabs is a Brazilian social media management platform that helps small businesses and agencies to manage all their social media accounts in one place.
My Role
I worked in a cross-functional team, composed of 5 people: designer, product owner, tech-leader, and two developers.
As a Senior Product Designer, I was responsible for understanding our users, work on the craft design interactive and visual experiences, and co-leading product experiments with the Product Owner.
Duration
Our cross-team worked on this project for 3 months, from May to July 2020. After this period the company change all product teams and I went for other initiatives.
Disclaimer
This documentation was created with a simple purpose, to show what I have done and can do working as a Product Designer.
I changed some visual aspects to demonstrate how my design skills are now, respecting the company’s Design System and Visual Concept and Branding. And I also changed some information to keep the company’s data private.
About the Case Study
The Company
Mlabs is a Brazilian social media management platform that helps small businesses and agencies to manage all their social media accounts in one place.
My Role
I worked in a cross-functional team, composed of 5 people: designer, product owner, tech-leader, and two developers.
As a Senior Product Designer, I was responsible for understanding our users, work on the craft design interactive and visual experiences, and co-leading product experiments with the Product Owner.
Duration
Our cross-team worked on this project for 3 months, from May to July 2020. After this period the company change all product teams and I went for other initiatives.
Disclaimer
This documentation was created with a simple purpose, to show what I have done and can do working as a Product Designer.
I changed some visual aspects to demonstrate how my design skills are now, respecting the company’s Design System and Visual Concept and Branding. And I also changed some information to keep the company’s data private.
Product Thinking Process
1. Problem definition
The product owner led this phase. We defined the problem with the cross-team and could think about some possible solutions.
2. Concept
The Product Designer led this phase. To evaluate the direction we will follow, I created some possible directions for the product and shared those with the cross-team.
3. Product Solution
The Product Designer also led this phase. In this phase, I created a high-fidelity interactive prototype to discuss with the cross-team. I also present to the design team in order to find some UI tweaks.
4. Pre-Experiment
The Leader Tech led this phase. We could see a demo and help de QA with design and interactive feedbacks. We also involve the marketing director to discuss the product launch strategy.
5. Full Launch, Retro, and Results
The product owner led this phase. In this phase, we could follow the results of the feature on the market, understand all the metrics and summarise what we can learn with that to the next steps.
You are going to see more detail about any phases of this case.
Product Thinking Process
1. Problem definition
The product owner led this phase. We defined the problem with the cross-team and could think about some possible solutions.
2. Concept
The Product Designer led this phase. To evaluate the direction we will follow, I created some possible directions for the product and shared those with the cross-team.
3. Product Solution
The Product Designer also led this phase. In this phase, I created a high-fidelity interactive prototype to discuss with the cross-team. I also present to the design team in order to find some UI tweaks.
4. Pre-Experiment
The Leader Tech led this phase. We could see a demo and help de QA with design and interactive feedbacks. We also involve the marketing director to discuss the product launch strategy.
5. Full Launch, Retro, and Results
The product owner led this phase. In this phase, we could follow the results of the feature on the market, understand all the metrics and summarise what we can learn with that to the next steps.
You are going to see more detail about any phases of this case.
1. Problem Definition
The product owner led this phase. We defined the problem with the cross-team and could think about some possible solutions.
At that time mLabs was the best platform on the Brazilian market, but didn’t have a mobile app. We saw in the NPS feedbacks a lot of users asking about when will be the mobile app lauch.
The company had sine dificculties with strategy and technology trying to lauch the app in the last two years from that time and had gived up of this challenge for some time.
How Might We
How might we create the Mlabs mobile app for small businesses and agencies to use the mobile app as the desktop platform, where and when they need it?
We believe that “Create the mLabs Mobile App with Web View technology will be less complex to the development and also useful for the user needs, so we are going to up our NPS score and have fewer complaints about that.”
1. Problem Definition
The product owner led this phase. We defined the problem with the cross-team and could think about some possible solutions.
At that time mLabs was the best platform on the Brazilian market, but didn’t have a mobile app. We saw in the NPS feedbacks a lot of users asking about when will be the mobile app lauch. The company had sine dificculties with strategy and technology trying to lauch the app in the last two years from that time and had gived up of this challenge for some time.
How Might We
How might we create the Mlabs mobile app for small businesses and agencies to use the mobile app as the desktop platform, where and when they need it?
We believe that “Create the mLabs Mobile App with Web View technology will be less complex to the development and also useful for the user needs, so we are going to up our NPS score and have fewer complaints about that.”
2. Concept
The Product Designer led this phase. To evaluate the direction we will follow, I created some possible directions for the product and shared those with the cross-team.
After that, I did some foundation research, which you can see in more detail below.
2. Concept
The Product Designer led this phase. To evaluate the direction we will follow, I created some possible directions for the product and shared those with the cross-team.
After that, I did some foundation research, which you can see in more detail below.
Foundation Research
The company didn’t have a UX Research Ops to help in this case, so I did some desk research, and online interviews were enough for the next phase. You can see more details above.
Desk Research
To do the desk research, I chose to study about Web View technology, web responsiveness and about how to use mobile notifications in this kind of technology.
User Interview
To do the user interview, I create a screener account of diversity, regions, and purpose in the platform use (small business and agencies). I used the Intercom Form tool, similar to Hotjar, to invite the user for the research, and that works well. I run the research online with Zoom, recording the audio and doing the summarize the insights with Google Sheets, in order to be easy to consult and share with the team.
With the research, I could understand why small businesses and agencies like to have an mobile app instead of the responsive version of the platform. In general the platform didn’t works on mobile phones. So we had more than one problem to solve.
Insights
The most exciting piece of information that I found in the research was:
The users wanted to feel secure about their scheduled posts. They want to see the Calendar, and if something happens or their client asks for some change, they could change it on the mobile phone instead of coming back to the office or computer to make the change.
Foundation Research
The company didn’t have a UX Research Ops to help in this case, so I did some desk research, and online interviews were enough for the next phase. You can see more details above.
Desk Research
To do the desk research, I chose to study about Web View technology, web responsiveness and about how to use mobile notifications in this kind of technology.
User Interview
To do the user interview, I create a screener account of diversity, regions, and purpose in the platform use (small business and agencies). I used the Intercom Form tool, similar to Hotjar, to invite the user for the research, and that works well. I run the research online with Zoom, recording the audio and doing the summarize the insights with Google Sheets, in order to be easy to consult and share with the team. With the research, I could understand why small businesses and agencies like to have an mobile app instead of the responsive version of the platform. In general the platform didn’t works on mobile phones. So we had more than one problem to solve.
Insights
The most exciting piece of information that I found in the research was: The users wanted to feel secure about their scheduled posts. They want to see the Calendar, and if something happens or their client asks for some change, they could change it on the mobile phone instead of coming back to the office or computer to make the change.
Some Possible Directions
Direction 1 – Create a Light App with just Scheduling Post and Calendar
The first direction was to make a light version of the platform, with only the Scheduling Post and Calendar features. Different from the desktop platform, the idea here was an “emergency mobile app.” So if something goes wrong, you can use the mobile app.
Direction 2 (recommended) – Create an App based on the actual responsive platform.
The second direction was to correct all the responsiveness problems we had on the desktop platform and turn it into the mobile app with the Web View technology.
In this way, we will need to involve other teams, and some of them could not conclude their responsiveness corrections in a short time. So we will not have the same desktop features on the first version of the app.
Direction Choose
The cross-team and I defined that the second option was the best thinking in tech feasibility, business constraints, and usability. So we choose that direction.
The stakeholders also saw that with an opportunity to correct all the responsiveness problems.
Some Possible Directions
Direction 1 – Create a Light App with just Scheduling Post and Calendar
The first direction was to make a light version of the platform, with only the Scheduling Post and Calendar features. Different from the desktop platform, the idea here was an “emergency mobile app.” So if something goes wrong, you can use the mobile app.
Direction 2 (recommended) – Create an App based on the actual responsive platform.
The second direction was to correct all the responsiveness problems we had on the desktop platform and turn it into the mobile app with the Web View technology.
In this way, we will need to involve other teams, and some of them could not conclude their responsiveness corrections in a short time. So we will not have the same desktop features on the first version of the app.
Direction Choose
The cross-team and I defined that the second option was the best thinking in tech feasibility, business constraints, and usability. So we choose that direction.
The stakeholders also saw that with an opportunity to correct all the responsiveness problems.
3. Product Solution
The Product Designer also led this phase. In this phase, I created a high-fidelity interactive prototype to discuss with the cross-team. I also present to the design team to find some UI tweaks.
You will see above some detailed information about:
- Responsiveness and Usability Study
- Information Architecture
- Design System
- Interactive Prototype
- Pages Highlights
3. Product Solution
The Product Designer also led this phase. In this phase, I created a high-fidelity interactive prototype to discuss with the cross-team. I also present to the design team in order to find some UI tweaks.
You will see above some detailed information about:
- Responsiveness and Usability Study
- Information Architecture
- Design System
- Interactive Prototype
- Pages Highlights
Usability
Responsiveness and Usability Study
I mapped all product areas in the responsive version, carefully documenting all flows. So the problems that I found could be analyzed and prioritized with the RICE methodology, taking into account technical difficulties and user experience.
That work involved all teams because I found problems in all areas of the product. After markup, each one was responsible for correct their respective product problems. That was great collaborative work.
Information Architecture
User Flow Diagrams
I created a user flow diagram. This tool help me to think about content and interactions.
Usability
Responsiveness and Usability Study
I mapped all product areas in the responsive version, carefully documenting all flows. So the problems that I found could be analyzed and prioritized with the RICE methodology, taking into account technical difficulties and user experience.
That work involved all teams because I found problems in all areas of the product. After markup, each one was responsible for correct their respective product problems. That was great collaborative work.
Information Architecture
User Flow Diagrams
I created a user flow diagram. This tool help me to think about content and interactions.
Previous
Next
Design System
Some designers and I created the mLabs Design System, which is based on Material Design.
In that process, I needed to study a lot about that, to guarantee that what we are going to do would improve a lot the designers and developers operation.
Design System
Some designers and I created the mLabs Design System, which is based on Material Design.
In that process, I needed to study a lot about that, to guarantee that what we are going to do would improve a lot the designers and developers operation.
Interactive Prototype
The interactive prototype is in Figma, you can follow the link in a desktop visualization: mLabs Mobile App Interactive Prototype on Figma (Desktop Visualization)
Interactive Prototype
The interactive prototype is in Figma, you can follow the link in a desktop visualization: mLabs Mobile App Interactive Prototype on Figma (Desktop Visualization)
Pages Highlights
The prototype was an easy phase. I could design the onboarding pages and redesign the login page, but I couldn’t change the web view because the app responsively loads the web platform.
Onboarding
Pages Highlights
The prototype was an easy phase. I could design the onboarding pages and redesign the login page, but I couldn’t change the web view because the app responsively loads the web platform.
Onboarding
Login and Overview
The onboarding, overview menu, and login were some of the sections and components that I needed to make from scratch.
Other sections were only responsive web platform view.
Login and Overview
The onboarding, overview menu, and login were some of the sections and components that I needed to make from scratch.
Other sections were only responsive web platform view.
Login and Overview
The onboarding, overview menu, and login were some of the sections and components that I needed to make from scratch.
Other sections were only responsive web platform view.
Scheduling Posts
One of the important user needs which we identified in the research was to edit their posts on the mobile app.
The Scheduling Post feature was something that needs to be easy to change or create any post.
Scheduling Posts
One of the important user needs which we identified in the research was to edit their posts on the mobile app.
The Scheduling Post feature was something that needs to be easy to change or create any post.
Scheduling Posts
One of the important user needs which we identified in the research was to edit their posts on the mobile app.
The Scheduling Post feature was something that needs to be easy to change or create any post.
Calendar
The Calendar is one of the most important features for the mobile context. The users like to follow and change their posts if they need.
What I did here is to prioritize a daily visualization, easy to see, and click to more details.
Calendar
The Calendar is one of the most important features for the mobile context. The users like to follow and change their posts if they need.
What I did here is to prioritize a daily visualization, easy to see, and click to more details.
Calendar
The Calendar is one of the most important features for the mobile context. The users like to follow and change their posts if they need.
What I did here is to prioritize a daily visualization, easy to see, and click to more details.
4. Pre-Experiment
The Leader Tech led this phase. We could see a demo and help de QA with design and interactive feedbacks. We also involve the marketing director to discuss the product launch strategy.
There was nothing so much to show in this phase but it’s important to align with developers and the marketing team about how we will measure the success in this project. So they can help us to collect and analyze the data and launch this feature in the best way.
4. Pre-Experiment
The Leader Tech led this phase. We could see a demo and help de QA with design and interactive feedbacks. We also involve the marketing director to discuss the product launch strategy.
There was nothing so much to show in this phase but is important to align with developers and the marketing team about how we will measure the success in this project. So they can help us with metrify and launch this feature in the best way.
5. Full Launch, Retro, and Results
The product owner led this phase. In this phase, we could follow the results of the feature on the market, understand all the metrics and summarise what we can learn with that to the next steps.
You can see above some of the metrics, learnings, and next steps of this case.
Metrics
We collected:
- Play Store Downloads: More than 50.000;
- Average Review on Play Store: 3 / 5
- Downloads in the Apple Store: More than 20.000;
- Average Review on Apple Store: 3.2 / 5
Learnings and Next Steps
A lot of users downloaded it in the app’s stores. That was a great thing, but after months the users start to be unhappy. That happened because of the series of problems that were appearing on the mobile version.
A next step could be to improve and correct those bugs and redesign the app.
5. Full Launch, Retro, and Results
The product owner led this phase. In this phase, we could follow the results of the feature on the market, understand all the metrics and summarise what we can learn with that to the next steps.
You can see above some of the metrics, learnings, and next steps of this case.
Metrics
We collected:
- Play Store Downloads: More than 50.000;
- Average Review on Play Store: 3 / 5
- Downloads in the Apple Store: More than 20.000;
- Average Review on Apple Store: 3.2 / 5
Learnings and Next Steps
A lot of users downloaded it in the app’s stores. That was a great thing, but after months the users start to be unhappy. That happened because of the series of problems that were appearing on the mobile version.
A next step could be to improve and correct those bugs and redesign the app.
Credits
Cross-functional Team
Product Owner: Manoel Eleutério
Designers:
- (Me) Doug Lazarini
- Douglas Ito
Tech Lead: João Bonjovani
Developers:
- Rafael Rubert
- Victor de Campos
- Jean Campos
Design System Guild
Product Designers:
- Douglas Ito
- Felipe Borges
- (Me) Doug Lazarini
Developer: Danilo Vaz
Credits
Cross-functional Team
Product Owner: Manoel Eleutério
Designers:
- (Me) Doug Lazarini
- Douglas Ito
Tech Lead: João Bonjovani
Developers:
- Rafael Rubert
- Victor de Campos
- Jean Campos
Design System Guild
Designers:
- Douglas Ito
- Felipe Borges
- (Me) Doug Lazarini
Developer: Danilo Vaz