Project Summary
The BandPro e-commerce website project aimed to increase website traffic, reduce bounce rates, and boost online sales for their high-end video camera equipment. The target audience consisted of film directors, lead videographers, and photography directors. Key goals included improving website engagement, enhancing product discovery, and addressing the challenge of limited inventory due to high costs.
Problem Summary
BandPro's major problem consisted of not keeping all high-end video camera equipment in stock due to their expensive nature. This led to potential customers encountering out-of-stock items when browsing the website. This problem hindered the user experience and resulted in missed sales opportunities. Additionally, there was a need to address challenges such as increasing website traffic and reducing the bounce rate to maximize conversions.
Solution Summary
To tackle the problem, the project went through several iterations from small to big.
- In the first iteration the focus was to approach all the smaller issues first such as changing the logic of the 'out of stock' button to a 'Request a quote' button to re-target those potential customers and have our professional salesmen help those customers.
- The second iteration was focused on optimizing the user experience and interface of the BandPro website. The latter included conducting an extensive UX research to gain insights into the target audience's needs, pain pointsfull as well as determining the right use of UI elements like the right color contrast, fix inconsistincies in design elements, correct user flow, and correct targets. We also conducted a few surveys through our mailing lists to get better insights on our current customers which lead to creating three personas—film directors, lead videographers, and photography directors—were created to guide the design process and ensure a user-centered approach.
Although this project was not completed we did see a 15% increase in foot traffic in making the small adjustments, as well as 8% increase in phone calls which resulted in leads or sales on our 3rd quarter.
-
Role
Lead developer, Senior UX/UI Designer
-
Team
Me (dev/designer), Marketing Manager, and IT Manager
-
Client
BandPro
-
Duration
About 1year (Four quarters)
-
Tools
figma
Magento
Photoshop
Illustrator
-
Website URL
www.bandpro.com
Read the Whole Use Case below
*Please note due to NDA agreements some of the actual information shared below might have been slightly or completely altered to respect such agreements.
The Beginning!
I came into this project after BandPro had already launched their website. After a quick group meeting with the Marketing Manager and IT Manager I came to the understanding of the objectives and goals for the website. The company wanted to keep using Magento as their Ecommerce CMS system so we kept using using this through my tenure at BandPro. We broke down the objectives and goals from small to big and also the ones with the highest impact. Therefore, to quickly mitigate some of the issues at hand we started in the development process to change the logic of the 'out of stock' button to be a 'call us now for inventory' button. The next step before making any further changes i wanted to see what our customers needed and not what we thought they needed.
Chapter 1
Empathize
After publishing all of our changes I wanted to do a full research and analysis to further solidify the changes we were trying to make. So for the second iteration we went deep into the Research step, in which reviewed the websites current google analytics, google adwords, created a competitor analysis and conducted some small interviews and surveys with some of our current customers.
Competitor Analysis:
I conducted a comprehensive competitor analysis to gain insights into the strengths and weaknesses of other e-commerce websites selling high-end video camera equipment. This analysis helped identify industry standards, best practices, and areas where BandPro could differentiate itself. It also provided valuable information about competitors' user experiences, product offerings, pricing strategies, and customer service.
for an example reference on the above please click here
User Interviews and Surveys:
To understand the needs, preferences, and pain points of the target audience, user interviews and surveys were conducted. A diverse set of film directors, lead videographers, and photography directors were engaged in one-on-one interviews to delve deeper into their experiences with purchasing camera equipment online. Surveys were also distributed to a larger sample of users to collect quantitative data and validate qualitative findings.
for an example reference on the above please click here
User Journey Flow
Chapter 2
Define
After the research was done I defined the Users Needs & Goals as well as all the key findings. With that we made our personas to further identify and create our necessary goals.
User Needs and Goals:
Through the research process, user needs and goals were identified. These included:
- Efficient Product Discovery: Users wanted a seamless and intuitive browsing experience to easily find the camera equipment they required. They desired robust search filters, clear categorization, and detailed product information.
- Alternative Options for Out-of-Stock Items: Users expressed frustration when encountering out-of-stock items. They desired alternative suggestions or the ability to request notifications when items became available.
- and Reliability: Users sought assurance of the authenticity and quality of the camera equipment. They emphasized the importance of trustworthy customer reviews, detailed specifications, and a secure purchasing process.
Key Findings:
The research yielded several key findings that guided the design process:
- Availability Impacting User Experience: Users were disappointed when desired items were out of stock, leading to a poor user experience. This highlighted the need to provide alternative options and improve stock management visibility on the website.
- Importance of In-Depth Product Information: Users emphasized the significance of detailed specifications, high-resolution product images, and customer reviews to make informed purchase decisions. Clear and comprehensive product descriptions were crucial for gaining trust.
- User-Friendly Navigation and Filtering: Users expressed the need for intuitive navigation and robust filtering options to quickly find camera equipment based on their specific requirements. A streamlined and efficient search process was a priority.
- Seamless Mobile Experience: Users increasingly accessed e-commerce websites through mobile devices. It was crucial to ensure responsive design and a seamless mobile experience to cater to the growing number of mobile users.
These key findings formed the foundation for the subsequent ideation and design phases, ensuring that user needs were addressed and user-centric solutions were developed.
Personas
John Lark
- Age: 45
- Gender: Male
- Location: Los Angeles, California
- Occupation: Film Director and Producer
- Interests: Cinematography, storytelling, film festivals
- Quote: "Every frame is an opportunity to tell a story. That's why I need the best equipment for my films."
- Motivations:
- John is driven to create visually stunning and emotionally impactful films.
- He seeks high-end video cameras and equipment to achieve the artistic vision he envisions for each project.
- Frustrations:
- John is frustrated when he cannot find the specific camera he needs in stock, delaying his film production process.
Sarah Petterson
- Age: 30
- Gender: Female
- Location: New York City, New York
- Occupation: Lead Videographer at a Media Production Company
- Interests: Travel videography, video editing, attending industry events
- Quote: "Every shot has a story to tell. That's why I'm always on the lookout for top-notch video cameras."
- Motivations:
- Sarah is motivated to create visually captivating videos that resonate with audiences.
- She seeks reliable and high-quality video cameras to capture the essence of each location she films.
- Frustrations:
- Sarah is frustrated by websites with complex navigation and slow loading times, as it hinders her efficiency when searching for video equipment.
Michael Nunes
- Age: 38
- Gender: Male
- Location: Chicago, Illinois
- Occupation: Photography Director at a Creative Agency
- Interests: Fine art photography, architectural photography, mentoring young photographers
- Quote: "Every click reveals a new perspective. That's why I need the best lenses to capture it all."
- Motivations:
- Michael is motivated to deliver exceptional visual content in his photography projects.
- He seeks top-quality camera lenses to showcase the unique beauty of each subject.
- Frustrations:
- Michael is frustrated when product descriptions lack details or when lenses he desires are not available, impacting the outcome of his photography projects.
Chapter 3
Ideation
After the research was done i conducted a few internal brainstorming sessions to develop some ideas and concepts that would help our users. This then developed further into Sketching and wireframes and later into prototypes.
Ideation
The ideation process involved brainstorming and generating ideas to improve the user experience of the BandPro e-commerce website. The following steps were taken:
- Brainstorming Sessions: I conducted brainstorming sessions with Marketing to generate a wide range of ideas and concepts. The goal was to explore innovative solutions to address the identified user needs and goals.
- Sketching and Wireframing: The most promising ideas were then translated into rough sketches and low-fidelity wireframes. This visual representation helped visualize the proposed solutions
- Concept Evaluation: I closely evaluated the sketched concepts based on the feasibility, alignment with user needs, and potential to solve the identified problems. Concepts that showed the most promise were selected for further refinement.
- Prototyping and Iteration: The selected concepts were translated into interactive prototypes. These prototypes were refined through multiple iterations, incorporating feedback from the several internal personnel in review sessions.
As the ideation process progressed, I explored various design elements, such as navigation structures, product listing layouts, search functionalities, and product detail page designs. They aimed to create an intuitive, visually appealing, and user-centric interface that catered to the needs and preferences of film directors, lead videographers, photography directors, and any other target audiences.
Research Synthesis
Brainstorming Sessions
Sketching And Wireframing
Chapter 4
Prototype/Testing
After the ideation was done I created more wireframes to first identify the right approach in solutions to our users problems, then turning those wireframes into prototypes to get a simulation of the functionality, and testing internally.
Testing
The testing process played a crucial role in validating and refining the design solutions for the BandPro e-commerce website. It involved iterative testing and feedback collection to ensure a user-centered and effective user experience. The following steps were followed:
- Wireframe Testing: Low-fidelity wireframes were created to represent the proposed design solutions. These wireframes served as a visual representation of the website's structure and layout. User testing sessions were conducted using these wireframes to evaluate the clarity and intuitiveness of the design, navigation, and task flows.
- Digital Wireframe Testing: The low-fidelity wireframes were then converted into digital wireframes using Figma. These digital wireframes offered a more realistic representation of the website's interface, allowing for more accurate user testing. Users were given specific tasks to perform on the digital wireframes to evaluate the ease of use, information hierarchy, and overall user experience.
- Prototyping and User Testing: Based on the feedback from the wireframe testing, interactive prototypes were developed. These prototypes simulated the functionality and interactions of the final website. User testing sessions were conducted using these prototypes to observe user behavior, gather feedback, and identify areas for improvement.
- Feedback Collection: User feedback was collected through various methods, including surveys, interviews, and direct observation. The feedback focused on usability, visual appeal, clarity of information, and overall satisfaction with the user experience. This feedback played a crucial role in identifying pain points, uncovering usability issues, and informing design refinements.
- Iterative Improvements: The insights gathered from user testing and feedback were analyzed and incorporated into iterative design improvements. Design iterations involved refining the interface, optimizing task flows, enhancing visual elements, and addressing usability issues. The updated designs were then tested again to validate the effectiveness of the improvements.
Please see below some of different Wireframes
Chapter 5
Development
After the testing and prototyping was done we naturally moved into the developing cycle. We however started from this point initially to fix some of the easier issues and later had planned to move into further development to implement all of our wireframes and prototypes.
Development
In terms of development, I was also responsible for implementing changes to the website. The website itself utilized Magento 2, employing PHP and LESS, along with MariaDB.
One critical task for the website was upgrading it to the latest Magento version, as we were approximately seven versions behind at that time. The highest priority, before initiating any changes, was to update the site to the latest version to address potential security vulnerabilities. However, this update posed challenges compared to other CMS systems, primarily due to older incompatible plugins. Running command lines often resulted in issues with different files. Despite these challenges, after numerous manual adjustments, the CMS was successfully updated to its latest version.
The subsequent priority was implementing quick changes aimed at improving traffic and user experience, such as transforming the out-of-stock button into a "call now" button. To achieve this, I delved into modifying the addtocart.phtml file and altering the PHP logic of the button to reflect the new text.
During the initial modifications, I identified two crucial gaps: A) the absence of a current backup of the website and B) the lack of a version control system. This realization prompted me to implement a bi-weekly backup routine for the website and introduce GIT/Github for version control.
Chapter 6
Delivery
After the development was done I made backups using Github.
Delivery
The final delivery process would have involved refining the design based on the feedback received during user testing. Then the high-fidelity prototypes would've been converted into a working interface and integrated into the BandPro website. Unfortunately, at this point I had decided to go live with my Wife in Japan and therefore I was not able to see this project get to this stage however all files were left to my successor for further refinement and implementation.