bp UX Digital Design
OVERVIEW
PROJECT • PRODUCT • PROBLEM • GOALS
Overview
bp is a global energy company on a mission to “reimagine energy” and provide the “fastest EV charging stations” to consumers.
Challenge
Many people experience anxiety and concern owning EVs due to weather-battery life, finding nearby charging stations, and range anxiety fearing being stranded.
Specs
Role: UX -UI Designer
Time: 48 hours
Platform: iOS Mobile App
Tools: XD, Photoshop
Approach
Cultural probe
Value proposition
Brainstorming
Potential Metrics: Usability Testing and A/B Testing
Results
Preliminary steps in user experience design process and ideation. bp EV mobile app wants to provide users with the easiest, intuitive experience for finding and using new EV charging stations.
MY ROLE & RESPONSIBILITIES
User Experience Designer • Information Architect • Interactive Designer • UX Writer
Developed User Persona based on empathy map and paint points. Created low - fidelity wireframes, high - fidelity mockups and interactive prototype for future Usability Studies and A/B Testing Iterations.
UNDERSTANDING THE USER
PERSONAS • PROBLEM STATEMENTS • USABILITY STUDY
Research Goals
We’d like to figure out specific difficulties users encounter when they try to complete the core tasks of finding EV charging stations.
Important Findings
Users pointed out that their main concerns were after purchasing their sustainable electric vehicles, they wanted to ensure they avoided running out of (battery) power by missing necessary charging based on inability to find fast EV charging stations.
bp's user experience task was to design wireframes and prototypes that address user's specific pain points using this metric "Find the closest charging station" as an objective for ideation brainstorming.
Design Thinking and Approach
First Phase of Design Iteration involved gathering research data and determining ethnographic research data such as an empathy map. From this step, I formulated insights as established pain points the user might experience following UX design empathy and ideation process to influence my design choices and elements.
DEFINE & EMPATHIZE
PAIN POINTS
First Phase of Design Iteration involved gathering research data and determining ethnographic research data such as an empathy map. From this step, I formulated insights as established pain points the user might experience following UX design empathy and ideation process to influence my design choices and elements.
Wireframes, Empathy, Design Thinking and Ideation
Phase Two of the Design Iteration involved using brainstorming designs using the user research problem statements, empathy map, and value proposition to create Wireframes in Low -Fidelity sketches or Digital Mockups. The low fidelity wireframes provided quick user flow iterations of navigational flow which would also be seen in User Journey Maps to solve pain points.
Low-fidelity to High-fidelity prototypes
Phase Three of the Design Iteration involved continued brainstorming of early designs from Wireframes to Mockups allowing customization however, this step should involve Usability Research, (Testing), Affinity Mapping, and Key Findings with prioritization levels to establish a hierarchy of design elements (High, Medium, Low) priority for design iterations.
Design Choices & Explanation
1. Created basic, high-fidelity mockups from the low-fidelity wireframes used for testing and usability studies. The Find EV Station onboarding screen was designed to address immediate user needs of finding local and nearby EV Charging Stations, in addition, these screens are the result of using research from the value proposition and SMART goals.
2. A Pop-up screen was designed for the users to find nearby EV charging stations using local GPS technology to add to favorites or settings for new EV cars where mobility, transportation, and technology are seamless.
Design Thinking and Ideation
Low-fidelity mockups of bp EV Station screens include the three screens, bp EV Stations, bp EV Stations Nearby, and Find bp EV Station Nearby with initial design elements for User needs. These Low-Fidelity screens were updated into High-Fidelity Mockups.
A Navigation Menu was designed for the bottom of screens for the Users easy navigation to check their EV battery life, and search menu options, screens, and features.
bp Charging Station Info screen provides the details of the EV station and
The Directions button would allow directions to the EV Station using GPS coordinate functionality.
After the High Fidelity Mockups were designed, a basic interactive prototype was created to get the look and feel of the mobile app for the user for further testing of elements and solving pain points.
Again please note that for this particular task, Usability studies were not required for certification.
High fidelity Prototype
First round of Ideation Design
After the High Fidelity Mockups were designed, a basic interactive prototype was created to get the look and feel of the mobile app for the user for further testing of elements and solving pain points.
Please note that for the particular task, usability studies were not required for certification.
2nd Round of Ideation
Here is a draft of my 2nd round of the ideation process of the high-fidelity prototype. This will be further defined as the update continues to be researched for the user experience.
Next steps and Takeaways
Next step would be to prepare Usability Research, (Testing), Affinity Mapping, Competitive Analysis, and Key Findings to evaluate insights and for A/B testing, Observations and Iterations of designs. Further steps, include Accessibility Testing and compliance.
Takeaways from this project allow me to see that design is only one facet of the overall UX Digital Design process. Usability studies allow for in-depth observations and studies providing detailed metrics and evaluations of data and design.
