Task
- Create a responsive website on desktop and mobile to optimise SEO, branding and user journey on current website.
- Review and evolve the brand identity and tone of voice within user experience.
- Primary goal is to maximise sales conversion (at least 1 in 10) within the e-commerce site.
Tools Used: Sketch, Illustrator, Photoshop, Adobe XD, Keynote
Target Devices: Desktop and Mobile (iOS)
Timeline: Feb 18th to March 8th ( < 3 weeks)
The Client:
eGen is a market supplier of high quality electric scooter and mopeds. They aim to provide practical, reliable, environmentally friendly transport solutions for all; for commuting, domestic and leisure — at highly competitive prices. After the kickoff meeting with the client (Andy Perkins, eGen Stakeholder), we figured out eGen needed a complete rebrand that is in line with their high quality of products, for users to feel excited and trust the brand.
Role: Analysed the research and designed the user interface. Worked with a team of UX researchers to get user data.
Process
For the research phase, we made surveys, conducted interviews and analysed the google analytics of the client’s current website.
Interviews
Interviews were conducted with potential users who have purchased electric mopeds/scooters in the past. This provided great insight into the a typical user journey to discover where value can be added. Below presents a few quotes from the interview.
The main take away from this was that if you not an enthusiast for electric scooters with a love for stats, you place a lot more importance on other aspects such as: cost, maintenance, comfort, reliability and features. Users sometimes get overwhelmed with selecting a particular scooter/bike which led to the creation of an important feature for the site called “help me choose”.
Google Analytics
In terms of google analytics, we got important information and insights on the current user and their journey. In this case, the average duration of a user was 01:30 minutes with bounce rates of over 75% on the main pages. For e-commerce sites, a bounce rate of lower than 40% is recommended.
Competitor Analysis
From the competitor analysis, it was clear that certain features were missing from optimising the user experience on the website.
User Persona
As a result of the customer interviews and prior research, two distinct personas were formed which help guide reasoning behind certain design choices. Their pains are quite different which is important to remember for every single design and/or decision made. Adam (from the persona) can be characterised as a tech enthusiast and “first adopter” therefore cares about stats. On the other hand, Nick doesn’t care about stats and is more concerned about comfort, ease of use and would benefit hugely from the “help me choose” feature.
Affinity Diagram
All the information from research was collected and an affinity diagram was made to align all stakeholder’s needs. The affinity diagram below shows the breakdown of information about the customers from interviews, the client and their USP (Unique Selling Point). It was realised that customers wanted to view how the images suited their lifestyle hence why it was decided “life style” images would be a significant part of the new website.
Storyboard
Storyboards used below are used to visual represent key touchpoints within the user experience to further build context and empathise with users. Sometimes as a designer it might be hard to empathise with a user that is not you and this is where storyboards can help.
Journey Map
A journey map was used to identify the various interactions and touch points customers have with eGen. Problems at these touch points were identified especially with the current website and therefore opportunities for improvement were therefore analysed.
Key Features
After completing and analysing the research, a list of MVP features were identified. Since the primary goal of the project was to increase sales conversion, it made sense for the key features be identified through the lens of a sales/marketing funnel as shown in the image below.
- Awareness of the brand would be increased through better SEO which is achieved primarily with an optimal responsive design.
- Interest would be increased on the site with a consistent and fresh brand identity and the use of lifestyle imagery.
- Consideration: showroom for the products with the ability to compareand a “help me choose” feature to user decision making process easier.
- Intent is generated with a clear way to book a test drive
- Evaluation is where there was the most significant room for improvement. The features that would help users evaluate products include: Moped configurator, Reviews, easy to understand features and specs, FAQs and charging frequency calculator.
- Purchasing the item is the main call to action, so a simple and easy checkout process is key.
Design Inception
The design inception sheet is one of the first steps in UI design which is understanding the “why”, the “mood” and “visual language” of the design.
Why: Rebranding to increase online presence and improve sales conversion.
Mood: To excite and captivated users about the idea of purchasing the electric scooters.
Visual Language: Space around elements are important to give a fresh and uncluttered. Shapes are curvy and streamlined instead of being blocky. Professional and natural colours such as light blue and silver are used. Movement would be smooth, functional and active.
Mood board
How can we convey a visual interpretation of task to the client at an early stage?
A mood board is one of the visual deliverables in a UI design process. It is generally a collage of images, font inspirations, colour, design inspiration or patterns + textures that visually interprets the emotions/feelings we want users to feel through with using the products.
In this case, from the initial meeting with the client, a major takeaway was that the responsive website should be exciting and captivating whilst still being environmental and sustainable. Interface should be as simple and clean as possible to avoid any confusion/distractions. Being fresh, premiumand modern.
Style Tile
A style tile is a collection of visual elements such as a colour palette, typography, button style to help communicate the visual language to stakeholders. It bridges the gap between a mood board and a high fidelity wireframe. It is also very useful in getting feedback at an early design stage.
The idea of Atomic Design is adopted to maximise the speed of the design process. It meant creating a system of pieces which come together to create elements and templates that can be used over and over again. Atoms are the fundamentals as shown in the style tile below which includes colour palettes, fonts, individual elements (i.e buttons, headers etc) and anything else that could be combined with other atoms to create a molecule.
Typography: Monserrat was the typeface chosen as it is ideal for modern web designs displayed on various devices. It is less formal than futura with geometric simplicity, a nice large x-height (making it clearer to read) and has more character than Helvetica or Arial. It also has a wide variety of font styles (18 to be exact) to choose from thus making it versatile.
Colour: Blue (especially lighter blue) is calming, the turquoise gives off a tranquil sense and trustworthiness. The darker blue also demonstrates professionalism. Silver was chosen as a colour to give a professional feel to the brand that is soothing, calming and purify. It gives a sense of safety, which is important to a transportation brand. Red would be user sparingly as an accent colour which stands out on the page to draw the user’s attention especially for the call to action (CTA). It is important to note the red used wasn’t jarring as it was desaturated to avoid negative connotations (such as danger).
Iconography: The icons used were “filled” as oppose to “outlined”. This is to give this icons more visual weight to avoid them being lost on the main landing page which describes key information such as the website’s USP.
New Logo Design
The logo design was a significant part of the branding change. The new logo process began by researching e-gen. Electric generation is what “e-gen” is shorten from and other keywords were mind mapped to generate associations and spark ideas.
Sketching then began playing around with the “e” and coming up with abstract ideas. Word mark and pictorial logo designs were explored.
The four strongest ideas with further digitised as shown below. The first one focused on sustainability with the “e” being placed within a leaf-like background which was placed in different orientations. The second one explored with the current logo still having the power button with the horizontal line being nudged upwards to make it look more like the letter “e” and avoid confusion with the letter “G”. The third one had a letter “e” to demonstrate connected location points. The fourth design in comparison to the second is more of the letter “e” which is also reflected vertically and horizontal to get the letter “G” giving it more cohesion. Letter forms share certain elements to make them a family. The team decided to take the fourth design forward to optimise.
The spacing and alignment between the “e” and “Gen” were adjusted as shown below to determine which looks optically balanced in which the team decided on (D).
The “e” also works in the different brand colours and can be used as a lone symbol as shown below.
In comparison to the old logo (shown below), the new logo is modern, flatand simple. It is not very drastic from the previous logo so current customers would still be able to associate with the brand. The letters are curved to give them a streamlined feel which is associated with modern means of transportation. The big “e” can be used as a stand alone symbol within the brand identity.
Low Fidelity Wireframes
Rough sketches were done by hand to demonstrate ideas for features based on research and user needs.
Mid Fidelity Wireframes
Mid fidelity wireframes were made in Sketch after user testing on layout and flow.
The product page includes the following feature based on the user needs which include:
Features of the product: specs/information of the product
Lifestyle imagery: Use context of the product
Charging frequency calculator: Gives user context to how often bike is charged.
Book test drive: test the bike to know if they like it before they buy.
Buy option: Main call to action for the user.
Usability Testing
The mid fidelity wireframes were prototyped and user tested; below shows some changes based on the testing.
- Fig. 1: On the landing page, the users were was not immediately sure what was being sold on the website. To solve that, a section with the latest product was added (titled “introducing…) to make it clearer.
- Fig. 2: Following testing, users wanted more information about eGen as a company instead of just electric scooters as a whole. Therefore, “why e-Gen” highlighting their USP was introduced.
- Fig. 3: The “lets find the perfect ride for you…” feature was updated with imagery giving more context, a better description of the feature and also a progress bar so the user is aware of how many questions left they have to answer.
Fig 1: A “book now” button is now added just under the “order now” button after a user expressed how “booking a test drive is probably the most important thing for me after I have found a bike I like”.
Fig 2: Following the importance of booking a test drive as expressed by the users, this section was brought higher up the page due to its significance.
Fig 3: Users felt the FAQ section looked more like a chat area. This section was redesigned to a more traditional FAQ section to avoid confusion.
User flow
An efficient user flow was created to visualise the customer journey from viewing the home page to purchasing the product and all the steps in between such as product comparison and booking a test drive.
High Fidelity Prototype
Desktop Version (Design Decisions)
The desktop version was the first priority as google analysis showed 95% of traffic was through the desktop site. I also started creating the desktop version before the mobile using the graceful degradation method because i could always remove elements that are not needed for mobile instead of having to create new ones for the (larger) desktop version.
The high fidelity desktop version below describes the 5 major changes made to the product page I designed as a result of further user testing. The major one was grouping the inputs together when the user customises their scooter shown in change 1 below.
Another change from user testing was allowing the user to “order” or “book test drive” only after fully customising the scooters. This meant the “order” and “book test drive” button is greyed out until the user finished the necessary customisation.
Mobile Version (Design decisions)
The challenge with mobile was the desktop version could not just be scaled down because of the button sizes and readability issues. It needed to be adapted for smaller screens .
Other high fidelity mobile and desktop screens
"help me choose" section
Video Demonstration of Prototype
Final Website Prototype
Web Link: https://xd.adobe.com/view/da8c3fed-81bc-41d2-5a23-150068fceea4-acbd/?fullscreen
Mobile Link: https://xd.adobe.com/view/ad373441-b518-418c-4cfc-eb2974fa69c2-db06/
Next Steps
If there was more time during the project, a section such as “getting to grips your scooter” and training video on product page would be added as this was requested from potential users during testing.
360° imagery would be added within product page to give a more unique in-depth and immersive view of this scooters.
Also it would be interesting to see how their sales conversion increases as a result of the re-branding and website redesign.
Conclusion
The Client (Andrew Perkins) was very pleased with the outcome of the projects after it was presented to him and “looks forward to implementing the prototype”. The project was challenging yet rewarding especially working to such a tight deadline ( <3 weeks) and seeing the final results. With the final results, i feel the initial target goals are achieved. The eGen website is now fully responsive therefore has improved SEO, Streamlined its Information architecture, revamped branding and UI that connects with the target audience.
Overall, I really enjoyed working on such a unique project. One of my major learnings was the creation and sharing of brand guidelines (which contains reusable visual elements) during the project especially whilst working with other designers on similar screen designs as not only does it allow for consistency, it speeds up the design process. In designing for mobile with a smaller screen, I found out i had to question every element i included due to the smaller real estate.
