MGM Management
CASE STUDY
Back Office for control the member get member app solution
The Challenge
The case study emerged as a demand from the business and marketing team of the client Assaí. Basically I have to design a back-office soluiton to give this team the freedom to edit de content and the buiness rules for the Member get member solution in app.
Solution Perspective
A section in they Backoffice focused on the management of the mgm on the app.
Stakeholders can: edit content of the Welcoming pop-up, business rules, change the detailed documentation about the mgm campaign, change images of the MGM and schedule the campaign period.
The process
Discovery
Stakeholders Interview
Validations with Tech Team
Design
UI Design based on the DS
Validations
Review and usability test with Stakeholders
Handoff for Developement team
Why this process?
Because the context of the project requires a more simple approach with the stakeholders making suggestions about they journey for this project.
What I wanted to achive?
A quick design solution based on the stakeholders needs designed together.
What is expected?
A easy to use solution based on the needs and journey that the users can work easily and quick.
Fields with clear informations to help the users quick remember what kind of information they need to input
Ease step-by-step process
Dashboard with the metrics of the MGM campaign.
Discovery
Stakeholders interview for Information Mapping
Who is the user?
Internal team of stakeholders related to Marketing and Business
Why this approach was selected?
Because the solution it’s directly related to a main funcionality of the app, that this team have participated in the approval journey. To the Back-Office, they just follow the main action they need to edit in the app, so the process was relatively straight foward, with quick adjustment points, interview the stakeholders and generate a sitemap/userflow solution based helped us to quick understand what is the main interest for this kind of user.
The interview
The process for this solutions was directly related to focus on quick wins with the main stakeholders operators of this solution.
This interview was focused on understand:
What they need for this functionality that is related to the strategy they want to follow.
The metrics this solution will help to impact
What problems we have to deal through this solution
What is the limitation from the business, marketing and tech perspectives.
After Stakeholders interview
After the interview, i’ve mapped the main vision of the project together with the P.O.
The overall soluiton needed to be adapted to follow some proposal I did based on some good practices of UX, like to break the journey in steps, and with validation of the dev team that understand the importance to save each step of the journey when the user need to create a new MGM event.
The Details of the Journey
The main solution it’s related to the need of the users to have a back-office solution to control the content of the MGM, has well the period of a MGM campaign, this means that they needed:
A flow that he/she can create and edit a MGM campaign
Each step must be directly related to the each flow of the app
Each step need to be saved to prevent any problem related to a external unexpected or non controlled situation.
A extra it’s the possibility to see the metrics in a simple dashboard format (MVP of it), but for the first version, they wanted to focus on a creation and edit of a MGM campaign.
Design
Drawing the interfaces
About the flow design
THe overall solution was based on the different flows that already existed on the system, maintaining the familiarity of each component based on the work reality of the client and the heuristic related to the familiarity.
The comoponent library
For this project, the overall solution already follows the design system structure of the Angular JS. The Figma community has a already library for usage, but needed some adjustments for the context of this project, but in overall aspect, various components are mirrored with the actual version o Angular that the dev team are using.
The usability test
The test was done quickly with the Figma prototype. The marketing and business unit walked through the solution to validate if the prototype proposal would resolve they need for that context, and everything went well with the approval.
The Handoff
The handoff was pretty simple, focusing in annotations and online meetings to better express the concepts, demonstrate with the prototype help they adapt the component from the library to the context of the code.
The Impact
The impact was directly related to the users' liberty to edit the content. This was the first solution to give them this kind of freedom. They didn't believe that this was possible, and we proved them wrong. With the right team and the right people, we can build anything we need.
Thanks for your time!
(Obrigado por seu tempo)
