ChargeHub
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.
Client Project | 1 Week | UX/UI Designer & Product Manager | App | Group of 2 | E-skate & Map-tech
Brief
Project Scope
ChargeHub needs an initial redesign, so they can use it as part of their pitch to investors, and to hand-over the idea to a design agency who will then take over.
Deliverables
Prepare for hand-over to design agency.
Competitive research, sketches & low to mid-fi wireframes, style guides, user journey, and screen flows.
My Roles
Product 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
Understanding
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
Idea & Recommendations
Iteration
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.
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.
The User Goal
Users need a map to find charging port locations when they are out riding, that is simple and efficient.
What we started with
Competitive Research & User Research
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
Design Studio session to brainstorm different ways to show information.
Another example of some sketches for layout design. Using different features like tags and icons to help with navigating.
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.
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
Type-face suggestions
Moodboard for brand design
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.
Conclusion
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!