BPme
UX+UI / VISUAL DESIGN / BRANDING
A bp station on your cell phone
“BPme is more than an application, it is the new digital door to the BP world. BPme is the answer to the needs of our Mexican consumers; It is part of our strategy to have a more personalized offer and to provide them with greater comfort and practicality ”. It is the only App in Mexico that will allow the billing of any of its service stations, regardless of whether they have different social reasons. Another important feature is that BPme will allow me to consult the history of consumption safely, thanks to data encryption.
BPme is a platform from which you can bill your fuel and locate gas stations launched in 2018, recently renewed for its launch in 2021, which aims to evaluate user performance for future expansion and global standardization.
DESIGN PROCESS
Understanding the Application and Users
The focal point of our approach was the billing system, acknowledged as the most crucial aspect of the application. To tackle this challenge, we undertook a thorough process to comprehend how our users engaged with the application. This analysis included a deep dive into the ATIO system, serving as an intermediary between billing operations and gas station points of sale.
Furthermore, we delved into studying the needs of the end-user, aiming to understand their expectations and experiences with the billing system. This phase was essential in designing solutions that aligned with user expectations and enhanced process efficiency.
Adapting to Regulatory Changes
During this critical period, we faced an additional challenge: the government's shift to the CFDI 4.0 billing system. This change not only required adjustments in data capture but also mandated compliance with more intrusive government requirements.
In response to this transition, we explored strategies to implement necessary changes without overwhelming the user. Striking a balance between meeting new governmental requirements and ensuring that the user experience remained unaffected was imperative.
Innovation in Design and User Experience
This period of change wasn't solely about adapting to new regulatory requirements but also propelled innovation in design and user experience. We committed to not only complying with new regulations but also enhancing the interface and original user experience.
We explored creative solutions to smoothly implement these changes, ensuring that users not only complied with legal requirements but also enjoyed an improved and more efficient experience.
This analysis phase was not just a technical understanding exercise but also an opportunity to strengthen our client relationship by providing solutions that addressed both regulatory challenges and end-user needs.
Ideal Design Process
Emphasizing the "ideal" here is crucial, given the frequent need to streamline the process due to high demand and the rapid turnaround required for design deliverables. It's important to note that not all steps in this process are mandatory, especially for features leveraging existing UI components and mirroring other aspects within the product.
1. Project Brief and Requirements Assessment
-
Gather comprehensive insights into project requirements.
-
Understand the specific demands of the feature in question.
4. Ideation and Brainstorming
-
Engage in creative sessions to generate a variety of design concepts.
-
Encourage team collaboration and diverse perspectives.
2. User Persona Refinement
-
Review and refine existing user personas to align with the new feature.
-
Identify any unique user characteristics tied to the feature.
5. Wireframing
-
Create low-fidelity wireframes to outline the basic structure and layout.
-
Focus on functionality rather than aesthetics at this stage.
3. Research and Benchmarking
-
Conduct in-depth research on design trends related to similar features.
-
Benchmark against industry standards and competitors.
6. Prototyping
-
Develop interactive prototypes to simulate user interactions.
-
Validate the flow and functionality of the design concept.
User flow
Ideal Design Process
This "ideal" design process offers a comprehensive approach, but the flexibility to adapt based on project constraints is always considered, particularly when working on features with existing UI components or tight timelines.
7. Usability Testing
-
If time permits, conduct usability testing on the prototype.
-
Gather feedback to refine and optimize the user experience.
10. Finalization and Handoff
-
Finalize the design, addressing any remaining feedback.
-
Prepare design assets and documentation for development handoff.
8. High-Fidelity Mockups
-
Translate wireframes into detailed, high-fidelity mockups.
-
Incorporate visual elements, colors, and branding.
11. Collaboration with Development
-
Collaborate closely with the development team during implementation.
-
Address any design-related queries and provide support.
9. Design Review and Iteration
-
Present the high-fidelity mockups for team and stakeholder review.
-
Collect feedback and iterate on the design based on input.
12. Quality Assurance (QA)
-
Participate in QA processes to ensure the design is faithfully implemented.
-
Address any design-related issues that may arise during testing.
DATE
August 2020 – Present
ROLE
AGENCY
RESPONSABILITIES
Senior UX/UI Designer
Apex Systems
-
Creating a new design for the whole product on V2.
-
Designing a new logo for the app.
-
Creating new vectorial assets for the UI system.
-
Designing a product application.
-
Integrating vendors into the app;
-
Creating the UI system for the V2 and 3.
-
Creating the UX for the V2 and 3.
-
Working on UX improvement of successful product design.
-
Building usable demos to test usability prior to development.
