ASME.org Redesign & E-Commerce
Date:
February 28, 2019
Redesigning the overall digital experience
ASME (American Society for Mechanical Engineers)
ASME (American Society for Mechanical Engineers) is a world-renowned, member-based professional organization focused on serving the technical, educational and other programmatic needs of the engineering and technology communities on a worldwide basis. ASME generates approximately $115 million annually from the sale of products and services and provides a wide range of mission-focused programs and activities.
Redesigning the overall digital experience for ASME constituents on ASME.org. As part of the ASME Unified Digital Architecture project.
DATE
Sep 2018 - June, 2019
CLIENT
ASME in house
ROLL
lead UX designer
Process
1.
Understanding the problem
Our objective is to redesign ASME.org and improve its e-commerce functionality. The primary goals of this redesign are to update the user experience, optimize the site’s content and functionality with a responsive design that works globally, and provide industry-standard load times. Additionally, we aim to enhance the e-commerce capabilities and improve product discovery and access to increase conversions and generate leads.
To understand the project better, let’s explore the “Wh” questions:
What are we trying to build?
We are undertaking the redesign of ASME.org and its e-commerce platform.
Why do we need to build it?
The current website is unresponsive, lacks user-friendliness, and lacks consistency. Hence, a redesign is necessary to address these issues and improve the overall user experience.
Who is the user?
The target users of ASME.org include current and prospective members, college students, early-career engineers, project managers, corporate executives, researchers, and academic leaders.
How are we going to build it?
The development process will involve a combination of in-house resources and external vendors. Collaborating with both internal teams and external experts will help ensure a successful redesign and optimize the website’s e-commerce capabilities.
2.
Discovery / Research
We were tasked with finding a way to incorporate new technologies and improve the digital user experience. which had been incrementally updated through the years. Due to the nature of these past updates, the website hadn’t been reviewed as a system in its entirety.
ASME know there’s an issue, but can’t quite pinpoint where it is coming from or which pieces play a part in it. Our role in the Discovery Workshop is to help them either redefine the problem or discover new ones, and present a fix that they may not have considered without the proper analysis.
Discovery Workshop
The Discovery Phase is the second step in the UX process and where foundational user research occurs. The goal during this phase is to learn as much as possible about ASME business, objectives, users and competitors.
Goals of the Discovery Workshop:
Identify users & their journey
Determine the business/user needs
Bring together stakeholders
Define the project scope
Personas
The personas were important to analyze the behavior of the users that accessed the site, its preferences, and demographic data. Which page every person else accesses etc.
With a clear idea of ASME users. We created 4 main personas as amalgamations of all Stakeholder Interviews, allowing us to give them human backstories, needs
- Current and prospective members.
- College students – early-career engineers.
- Project managers – corporate executives.
- Researchers – academic leaders.
- Volunteer.
3.
Analysis
After we aligned on the business goals, We performed both quantitative and qualitative research on ASME.org. We started by assessing customer surveys and chat logs, which gave insight into the Voice of Customer (VOC)- meaning their goals, expectations, and frustrations.
By applying user behavior monitoring software to ASME.ORG and conducting a deep dive into Google Analytics, we were able to see where users were dropping off most frequently and which pages had the lowest traffic. A task analysis also revealed user flows, user goals, and pain points in navigating the website.
These findings gave us direction for the key parts of the portal to focus on, including information architecture and discoverability. All of the combined research helped us to prioritize our focus of building the new site.
The Summary of findings of discovery analysis
- Better integration with other online tools and easier maintenance of ASME CMS to reduce resource utilization.
- Improved flexibility and the ability to spin up new content and support new initiatives without heavy production workflows.
- Implement responsive design for mobile access — including new page templates
- Improve the site’s overall usability and navigation
- Enable better self-orientation, the organic discovery of products and content, and intent-based journeys
- Provide a robust product catalog and online ordering environment to improve conversions — drive more e-commerce revenue
- Add new digital marketing capabilities in line with IOP goals
- The site isn’t mobile friendly
- Homepage lacks balance; difficult to scan the page and understand what ASME does
- No clear communication of who we are and what we do
- Difficult to find anything — even if you know what you’re looking for (user intent)
- Shopping process confusing and difficult to complete, not based on best practices for e-commerce UX
- Need to elevate products in navigation and eliminate “Shop” label
- Navigation difficult to use; content is often buried deep within side navigation; too many links within page content
- Product pages lack the ability for upselling and cross-selling, including across units
- Each unit needs an overview page that enables easy access to critical information (shortcuts vs. deep clicking)
- Each product area requires unique sort and filter functionality for product listings
4.
Prototyping
Site map
The old version had an excess of pages, a distribution of deficient content, and a lack of categorization where contents with the same subject were of different places. In this stage, we decided to make a sitemap so we could understand better the user’s paths and the platform’s structure.
Mega Menu Concept
- Improve navigability of the site and enable self-orientation
- Elevates all products to the highest level of navigation
- The user can visually compare navigation choices
- Supports grouping
- Potential to use images or icons
Wireframes
Based on these studies, we set out to construct wireframes. This process was carried out with the participation of various business units in the organization to validate and align the navigation flow of the new hierarchy of information.
There was an alignment with the Brand Experience team mainly in the tone of voice and brand identity, once a new brand guide had been developed. Throughout the creation process, we always start with the mobile-first concept, mainly because it is the main part of our access.
5.
UI Design
6.
Validation
Usually, the validation phase starts when the high-fidelity design is fleshed out. A product is validated by stakeholders and end-users through a series of user testing sessions.
ASME Usability Testing
We conducted usability testing during the development of the new ASME.org website.
Unmoderated usability testing
Unmoderated usability testing is recommended: When the main focus of the study is a few specific elements, rather than an overall review. Remote studies are great for gathering data on an element or widget or findability. Also when with the project is finalized it’s recommended to use this and run an unmoderated test to gauge how it performs “in the wild”
Moderated usability testing
Moderated usability testing is recommended: During the design phase – when the design hasn’t yet been fully developed. The moderated test is great to find the potential issues of the working prototype. By watching participants’ reactions to the prototype, gathering baseline data that can save them from spending a lot of design and development time on.
Iteration, Approach
Similar to how agile approaches development, it’s recommended to use an iterative approach. Each iteration will result in a testable prototype for usability testing. Data from tests will give us important feedback to take into consideration for the next iteration. Each iteration will use a different usability testing method, based on the method recommended for that iteration.
