Design to Improve Urban Transportation
Redesigning existing site to Communicate product Benefits And to increase consumer purchases in web app form
Client: Hoverboard Technologies
Industry: E-Commerce, Technology, Transportation
Project Type: Web app design
Duration: 3 Weeks + In Progress
Hoverboard Tech is an e-commerce company specializing in personal electric vehicles. It's goal is to better educate the public about the benefits of its electric skateboard products and sell the highest quality personal electric vehicles on the market.
Affinity mapping from user surveys and interviews.
Problem
"How am I wasting 30 minutes traveling just 2 miles?”
Most commuters rely on public transportation or their cars to travel. Public transportation can be delayed or can break down. Cars include expensive insurance rates and constant maintenance. Commuters are desperate for a quicker, more efficient way to travel short distances, but they are not informed or knowledgeable enough of the options. Personal electric vehicles are still a new, evolving invention that the everyday commuter would not be familiar with. An unknown invention is not a desirable product.
Methods:
- User Research
- Competitive Analysis
- Affinity Mapping
- Empathy Mapping
Competitive Analysis
Boosted Board - More site visits than other personal electric vehicle companies; web app designed.
OneWheel - Emphasized community forums and industrial vibe.
Persona
I developed an user persona to reference my designs and usability test screening.
Site map redesign to organize the information architecture.
solution
Educating the consumer and presenting a seamless purchase flow
Hoverboard Tech's web app will allow users to become fully informed about the electric skateboards they are purchasing and how it compares to other modes of transportation or other personal electric vehicles. The mobile site will excite them to take more control over their commute methods through Hoverboard Tech's products.
Methods:
- Competitive Analysis
- Card Sorting
- Usability Testing
Site Map
With the development of our site map, I focused on the MVP in regards to the e-commerce flow to purchase.
User Flow
I verified the user flow to usability test the 1) Board page 2) Product page 3) Cart page 4) Shipping page 5) Billing page and 6) Confirmation page.
Deliverables
Key research findings, persona, low fidelity wireframes, prototype
We focused the design on 1) informational content and 2) a simplistic pathway to purchase that allows users to be both informed shoppers and educated brand advocates.
My role was principal UX designer with additional specification on content strategy and visual design. I worked closely with the client and developers with constant focus on the information architecture and user feedback.
Tools:
- Sketch
- Invision
- Procreate
Iterations
1. Switching the navigation to represent the cart to the right and menu to the left, best practices of other web app navigation.
2. Rewrote the copy of the landing page and brought down the call to action button so it would not overlap with the running video.
3. Included space for press mentions since the product has not undergone any reviews (consumers appreciate reviews).
4. On product page, included carousel of product photography and below it the product specifications. I wanted to keep the Add to Cart button within site of the product page (consumer does not have to scroll down to click it).
Mid fidelity wireframes, still undergoing usability testing and iterations.
Results + reflections
Finding web app real estate for the information the client wanted to convey was tricky; we had to prioritize the key points of the product and why users should purchase it. We tried to keep the content exciting and understandable for both users familiar with the industry and users who have never seen the product.
Bringing users into the process at each milestone helped us iterate a better web app. Next steps would include improved information architecture and design of the Support and Blog pages.