An app to help you find charge points for your e-rides
Initial research and design suggestions for the beginnings of a start up
Client Project | 1 Week | UX/UI Designer & Product Manager | App | Group of 2 | E-skate & Map-tech
Introduction
ChargeHub is a mobile app designed to find free charging spots around London. It is created for e-skaters, which are quickly becoming a popular choice of electric vehicle.
E-skates have a limited range of miles that the devices can run on, so users will want to charge their devices at some point in their route to continue their journey.
ChargeHub comes in as a service to show skaters where they can charge their device for free.
Brief
ChargeHub needs an initial redesign, so they can use it as part of their pitch to investors, and to also hand-over the redesign idea to a design agency who will take over.
The User Goal
Users need a map to find charging port locations when they are out riding, that is simple and efficient.
Deliverables
- Competitive research, sketches & low to mid-fi wireframes, style guides, user journey, and screen flows.
- Prepare for hand-over to design agency.
My Roles
Project Manager
I hosted meetings with ChargeHub to work with the stakeholders, where I presented progress reports and relayed information back to my group for further designing.
UX/UI Designer
Conducted various research methods and interviews with users to gather insights and analysed data to use for designing the features, functionality and interface of the app.
Prepared recommendations and designs for hand-off to the ChargeHub team, so they could pitch their business to investors, and use material for a design agency to take over in the future.
Process
Brand Design & Research
- Spoke with ChargeHub about their ideas for the project, and the future growth of the app.
- Conducted market research on similar products to find out significant features.
- User interviews to gather insights.
Design
- Conducted design studio sessions to form a design solution.
- Many sketches and iterations of different pages, and discussed the user flow and what to be included.
- Wireframed low and mid-fi prototypes.
Idea & Recommendations
- Created recommendations for brand design, UI elements and concept screens of currently non-existing functions, as an idea for what the future growth could include.
Who I worked with & What we started with
I worked with 2 developers who were the creators of ChargeHub. They had already created a current app that performed the basic functions. Here is a video to show what it looked like.
Competitive Analysis
I conducted a competitive research after speaking to the ChargeHub team.
My aim was to scout out what features were being used and how similar apps worked. This was useful to understand what was currently relevant on the market and knowing what to design for the app.
I also conducted a few initial user interviews with the market research to see what the user opinions on the different products were.
Sketching out ideas & Design Studio
I started sketching out low fidelity ideas with my project partner. We thought about how users could find a charging port as efficiently and simple as possible.
I found the competitor and market research completed earlier really helpful. Getting a sense of what was already currently proven to work from repeated functionalities in the different apps and looking at top-rated apps helped our design by having a boosted step already.
Here are some key elements we were thinking about:
- Clear CTA buttons on the homepage
- Location information such as: number of plugs available
- Layout of how information is shown before/after selecting a location
- Competitors like Google Maps, Citymapper and Lime were commonly referred to during our ideation process
Iteration (Sketch → Mid-fi)
While designing between iterations, I had meetings with ChargeHub to discuss the designs and to see if they approved the wireframes, so my design team can continue moving through the iteration process.
Key Features:
- Images and tags so it’s more accessible to users
- Distance and duration for walking and skating
- Area where location information is using the bottom half of the interface, instead of a tiny pop up box from the original design. This is so it is easier to read and more useful information can be adapted in.
Final Prototype
These are the screens my team and I came up with at the end of our design sprint. We have yet to design the functionalities for users to add a charge-point and will require more testing to do so.
ChargeHub really liked the end designs, and will be developing these designs for their Alpha version. They are considering doing more testing and collecting a small reliable user base before starting the Beta version.
Recommendations
We gave type-face suggestions and a presentation of our moodboard to give suggestions for how the design could look like for the future progress and to also show what we based our current design off of.
I created a moodboard from different concept designs, ranging from:
Nike apps
- My team really enjoyed how the designs are usually very dynamic, have bold contrasting colour themes, and stark colour tones.
E-scooter apps
- My team noticed that these e-skate/scooter apps always had some variant shade of green. In our user testing, users noted the use of green and liked how it presented as ‘green energy’, because the vehicles were electric. So my team researched these varying shades of green to see what was most prominently used.
Dark mode
- I wanted to look at apps in dark mode, as I thought the dark colour scheme represents a more ‘cooler’ and ‘edgy’ look. I thought that these qualities may be interesting to have a look at, since ChargeHub is made for the e-skate community, where their products are developed recently and look as if they are from the future.
- The ChargeHub team thought this would look great on the app, but we had reservations about going fully dark mode, as we would need to test the accessibility on the colour first. So this may be something we invest on in the future.
White & black colour styles with a pop-up colour
- My team discussed how apps could portray their services in different ways. For example, we looked at Uber’s app and noticed that their monochromatic colour scheme gave their service a professional look, while it also created a sense of trustworthiness. This was something both teams agreed would work well for ChargeHub.
Concept Screens
My team and I designed concept screens to go with the final prototypes, because ChargeHub were looking to expand the functionalities of their app for the future.
We designed different screens with specific functions to give ChargeHub extra ideas of what they could implement in the future. We chose these specific functionalities, because during the competitor analysis we saw other apps, like the e-scooter industry had these similar functions, so we thought it could be fruitful for ChargeHub to consider these suggestions.
Next Steps
On-call for any extra designing of other screens/functionalities/user testing.
Network and meet with more skaters from the e-skate community to chat and see if I can get more user data.
What I learned
I am so grateful to be given the opportunity to work in the beginnings of an exciting road with ChargeHub. I worked with 2 developers who are the starters of this app.
It was my first time working in a group that wasn’t just UX & UI designers, so that was a very insightful and learning experience for me to be involved in the very beginnings of a project, through to the back-end developmental phase.
And not to mention how cool the one wheel looks like! I would recommend having a go at trying one of them if you ever encounter one!
Hope you enjoyed the read! Please consider leaving a like if you enjoyed what you read, learned something new, or simply scrolled to the bottom of the page!
You can read about other projects I’ve worked on here in Medium or you can view them in my portfolio!
