Image for post
Image for post

Responsive eCommerce website

eGen electric scooter

We’ve been assigned to deliver an MVP design for eGen, providers of new generation electric bicycles and scooters.

Tools: Photoshop, Illustrator, Sketch, Adobe XD

Image for post
Image for post

Working in the UI team with Ibukun and Ayo, collaborating with the UX team with Andrea, Valentina and Holden.

A number of deliverables were required for the project, including:

  • Research insight and online survey
  • Personas and scenarios
  • User journey and sitemap
  • Inception design
  • Moodboard
  • Style Tile and Style Guide
  • Iconography and UI Patterns
  • Low and mid-fidelity wireframes (desktop and mobile version)
  • High fidelity mock up
  • Prototype of design(s)
  • A final presentation to the client
  • Review and evolve the brand identity and tone of voice within user experience design
  • Increase sales conversion within an e-commerce function
  • Create a responsive website on desktop and mobile to optimise SEO, branding and user journey
  • Add key features such gather information and test ride
Image for post
Image for post

After a first phase of research and online survey from the UX team what emerged was that the existing website wasn’t really used from the user and there was an absence of conversion with an high bounce rate.

Other key elements that emerged are visible on the final affinity diagram, like target audience and USP of the company.

Image for post
Image for post
The storyboard was realised by Holden
Image for post
Image for post
Starting from the information given at the kick-off meeting with the client, I developed the Inception design with the UI team

Starting from the why with the UI team we worked to identify the general mood that we wanted to convey with the final prototype.

Some words that came out were: competitive, captivating, professional, quiet, high quality, fun and sustainable.

We moved then to analyse the colours including that attention to environment and professional feeling.

Movement needs to be functional implicating the ability of the scooter to bring you smoothly from A to B.

The shape is rounded, contextualised in a space that is minimal and fresh.

All this elements combined gave the final inception design that we analyse to produce the final moodboard.

Image for post
Image for post

Electric scooters mean attention to nature but also addressing that modern and tech side that was so appealing for the user.

We worked with pictures that conveyed that impression, saying to the user “you can commute in peace of mind with us, enjoying your travel and helping the planet at the same time.”

Image for post
Image for post

With the Style Tile first and Style Guide later, elements that would be presented in the final mock-up emerged. I worked on graphics to explicate the power/energy of the scooter in the best way going through different iterations. The buttons are modern and rounded.

The iconography is rounded and solid at the same time with simple icons.

The final colour palette is giving a sense of professionalism (grey and dark blue) and a remind to a clean environment through light green-blue.

Image for post
Image for post
Final Logo on the right compared with the existing one on the left

Working in the UI team we presented 3 different logos.

I opted for a version that is modern and strong, playing with the emptiness given by the name of the brand.

Image for post
Image for post
Personal version of the logo proposed for E-Gen

During the final decision we agreed for the logo created by Ibukun. The main reason is readability, to reach potential customers that don’t know E-Gen yet, and similarity with the previous logo to keep near existing customers. It’s also flexible as the “E” can be used as a stand alone symbol.

Image for post
Image for post

Starting from the given wireframes we presented a responsive website on this project with two breakpoints.

The experience needed to integrate that element of accessibility (support always available on landing page) and fun that we added with recognisable elements and an appealing help me choose section on the landing page. to

The user can customise his experience through six simple steps, identifing the best Egen solution that fits his needs. The presence of call to action help the user navigate safely along the route and a progress bar show the remain length for the completion.

Image for post
Image for post

A comparative page with the possibility to see different models was requested on top of the product page to give the customer a 360 degree overview of the product. That’s why we decided to combine the two pages in one experience, customisable by the user with filters and compare feature. All the elements will be translated in solid and modern graphics contestualised in a minimal and fresh space.

Interactive user journey

Image for post
Image for post

To customise the experience of the final user and increase the level of engagement I worked on refining the “Perfect ride” section on the landing page.

With a step by step number of questions the user was able to identify the best scooter that was meeting their needs.

The main challenge was to rearrange the content for a core experience of the user: we needed to reconsider image size, icons presence and how to present visually an e-commerce payment on mobile without it being overwhelming for the user.

Image for post
Image for post
Image for post
Image for post

Written by

UX/UI designer in London

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store