The challenge
Catering to single use customers
Though the business has dramatically grown since 2020, overall conversions have plateaued. The CEO was open to ideas. The marketing director noticed a large number of customers were single-use. He had assumptions that he could better serve the single-use customer base by implementing a web-checkout feature. The idea was to remove the barrier of downloading the app, ultimately creating a more streamlined checkout process.
The marketing director was also unsatisfied with the overall tone the website was projecting. There were a variety of visual issues ranging from copy write, hierarchy, and color. With the world turning back on post-pandemic and potential partners reaching out to get more information on the business model, the director thought it was a good time to redefine the brand appearance of their site.
Our challenge was to validate the hypothesis that single-use customers preferred web-checkout over mobile app-checkout. Then re-charge the overall look and feel of the website.
A few screenshots of the original website:
The approach
Good Fast Cheap
The cheapest and most time effective solution the director and I came up with to test his web-checkout feature was to actually build it and test it among 20 popular stations across the city. The redesigned pages and web check-out feature were rolled out and tested together. Development was broken into parallel workstreams. I worked remotely in the Bay Area, on Miami time to sync up with the Chargefon in-house team. Each screen I designed was immediately implemented on a separate site used for testing, while I concurrently worked on the next design in the pipeline. I wore many hats during this project and was expected to work independently. Working backwards with a funding deadline and aggressive turnover created a pretty tense work environment with many coordination and time challenges.
Interviews
How different eyes view the site
After coming up with my list of critiques, I spent two days conducting usability tests with people who knew nothing about Chargefon or the business. I asked them to look over the website for a short period and then tell me what they gathered afterward. “What is Chargefon?” I asked. The goal was to see how different eyes made sense of the site.
Most people couldn’t answer correctly or even understand that the power banks were for smaller devices and not generator-like rentals.
These were some critiques I received:
Navigation redesigns
Integrating web-checkout
According to the Chargefon marketing department, there were two main reasons why the site was visited. To help customers locate the app and potential partners begin the sign-up process. Naturally, those became the first two buttons we implemented on the revised navigation bar. To add some visual balance to the navbar we grouped the navigation buttons Franchising, Partners, and Contact in the center of the page.
To implement the web checkout feature we ended up replacing the download now button in favor of the web-checkout button. The thought process here was that having it appear nice and big on the hero banner would eliminate the need for a dedicated nav button.
Navbar redesign :
The checkout feature of the app was already pre-established and mostly drawn from the payment client stripe, so creating these screens was a process of screenshotting the app and then making a web recreation for desktop and mobile.
Desktop & mobile recreations of existing checkout:
Landing page redesigns
“ZARAing” competitors
Originally there was no real direction for creating the new Chargefon theme. This stage of the project took up about 2 weeks. This was by far the hardest thing to do and I definitely came out of it respecting dedicated UI designers a lot more.
1st try. More experimental than practical :
The stakeholders were Unsure of what creative direction to go in and they gave me full autonomy to come up with a direction all my own in a day. I spent half the time just browsing through direct competitor sites and the design site Dribbble looking for inspiration. I had no product images to use so I made my own. I ended up coming up with a design that was a lot more experimental than practical. I went with a design direction that shared no design language with any other competitor site.
FAQ approved changes :
Only two things from the first attempt that moved forward; my font choice and Q&A layout. The font in comparison to the original offered a heavier, less elongated look. The improved Q&A section reorganized questions into two categories: technical and payment questions. This, instead of just being one long list.
2nd try. Better, but still giving off cheap vibes :
The second iteration did a better job at defining the product but the use of color felt cheap and the section elements felt empty. In this iteration product images replaced illustrations. I also attempted an all black logo. The new logo was shot down because the director had concerns about logo continuity.
The logo with the blue lightning bolt is used all across the company; on the company car, on the power banks, on the handouts, etc. Changing the logo here would mean changing the logo across everything.
3rd try. The stakeholders step in :
After two failed attempts at trying to just ad-lib a creative direction, the marketing director sat down with me to give me some notes on what he wanted. The style direction he was looking for adopted visual traits from companies like; Lime Scooter, Uber, and competitor Naki Power. The final result from these sessions ended up being what we ultimately moved forward with. This time around all colors and buttons were muted down. The contrast of simply making the section elements black and white, made it so that the color of the images really popped. I condensed large sections into small legible blocks. Overall this iteration ended up being the most professional looking and the one we moved forward with
Final landing page:
Field testing
Will people use web-checkout?
An incomplete version of the redesigned site was published temporarily on a separate domain, and tested amongst twenty popular Chargefon stations over the course of a weekend. The intention was to see how the new web check-out would affect conversions. We asked partners who hosted stations to replace the QR code stickers located on the stations that would send users to the original site and instead sent them to the redesigned one.
The results: We saw nearly a 15% increase in overall conversions each weekend. 63% of people choose the option of using the new web checkout feature instead of downloading the app.
Other screens delivered
Filling in the blanks
The weekend of testing proved the marketing directors hypothesis correct. Overall the new redesigned landing page and navbar layout was received far better than we could have hopped. The site wide changes still had to be approved by the CEO. With my remaining time I applied the same theme to two other key pages, to give the marketing director more examples to present during the approval meeting. Then with that I thanked my team and closed up shop.
Contact page :
Partners page :
Reflection
Personal takeaways
Reminder. Images always establish context.
Observing how strangers examined the Chargefon landing page was a reminder in regards to how people process information. As the interviewees scrolled through the site most paid attention to the visuals before reading any text. That finding greatly affected the final design and I hope it shows.
Always stay vocal and truthful.
Up until now I've never worked on a project that was directly similar to another. Every project I've done thus far has had unique circumstances and problems. During this project time was incredibly limited it was sometimes hard to find a good working pace wearing so many hats. In going about this project I learned to speak up when a work load became to immense. Anytime I did the opposite, it showed in my work.
