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
The Team
Working in the UI team with Ibukun and Ayo, collaborating with the UX team with Andrea, Valentina and Holden.
Key deliverables
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
Results
- 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
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.
Storyboard
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.
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.”
Style Guide and Style Tile
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.
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.
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.
Mid-fidelity prototype
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.
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
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.
