Loading Stories...
Solid Edge SP
Solid Edge SP is a design management solution for Solid Edge® software users who notice that, as the volume of their data grows; using Windows folders and network drives is limiting their ability to complete their design projects efficiently.
Solid Edge SP addresses this issue by providing easy vaulting and retrieval of Solid Edge files and related design data, along with a visual approach to manage linked documents, product structures and projects.
2+
Years of Development
12+
Developers
1
UX Designer
Scope of my work
1. Product Research
Stakeholder Interviews
Interviewing internal stakeholders to gather insights about business goals.
User Interviews
Questionnaire was prepared and meeting was set with user to understand qualitative data such as their needs, wants and behavior.
Competitive Research
To understand industry standards and best practices.
2. Product Definition
User Personas
Fictional characters that represent the different user types for your product. i.e. Contributors, Administrators, Approvers, Reviewers…
Empathy Map
A collaborative visualization was created to articulate what we know about particular ‘user type’. This helped to create a shared understanding of user needs, and aid in decision making.
Value Proposition Mapping
Visual Map was created to represent wants, needs and fears of our user and figuring out, how the new product or service answers them. This framework ensured that there is a fit between the product and market.
3. UX Story
UX User Stories
With structure: “As a [user] I want to [goal to achieve] so that [motivation].”
Problem Statement
How might we create a Microsoft Sharepoint based application that helps in easy vaulting of complex design data through Visual Approach.
Low Fidelity Prototyping
Low-fidelity paper sketches of the product possibilities were created using think out loud protocol.
4. Ideas Generation
Brainstorming Ideas
Session was kept informal and worked well as participants were allowed with out of box ideas. This generated both practical and impractical ideas.
Affinity Map
These diagrams helped to organize information into groups of similar items and to generate qualitative data or observations.
Priortization Matrix
Simple prioritization method was used i.e. “effort vs. impact” matrix, alternatively known as “value vs. complexity”. Then it was divided into four areas, i.e. Aspiration, Big Win, Small Win and No Go.
5. User Journey Map and Information Architecture
User Journey Map
How do user actually use our application and the functionalities?’ formed the basis of user Journey Map.
Information Architecture
Information Architecture IA to define site content, hierarchy and functionality.
Navigation Model
Map included collection of user interface components and patterns that helps visitors find information and functionality.
6. Design
Sketching
Drawing by hand on a piece of paper, on a whiteboard. And brainstorming sessions.
Wireframes and Testing
To visualize the basic structure of a pane, basic structure and visual hierarchy.
Prototype and Testing
Actual interaction experience (the look and feel with low-fidelity (clickable wireframes) to high-fidelity (coded prototypes).
7. UI and Visual design
Graphic and Imagery creation
Icons, Splash Screens creation. Checking in to TFS with Visual studio.
Dialogs
Creating XAML dialogs, side panes in Visual Studio(and Blend) and checking in to TFS.
Workflows WSP Creation
Default Sharepoint user workflows were created and corresponding WSP(s) were checked in.
8. Validation and Testing
Testing Sessions
Including moderated/unmoderated usability testing, beta testing, and A/B testing.
Surveys
Capturing both quantitative and qualitative information with open-ended questions like “What part of the product you dislike?”
Analytics
9. Release Readiness
UIQC
Localization Testing
Testing the UI on different locales for trimming issues, display issues and key(s) checks.
Design Process
Application development was rather long-term process, involving internal and external stakeholders, planners, existing Solid edge customers, a designer, developers and QA team members.
For UX design, I tried to incorporate Double Diamond design model with four stages i.e. Discovery, Definition, Development and Delivery. These stages worked as a map to organize the thoughts in order to improve the creative process.
User Persona
User Persona were created for each group of users; to include behavior patterns, goals, skills, attitudes, background information, as well as the environment in which a persona operates.
Types of personas were: Contributor, Manager, Reviewer, Approver and Administrator.
“If I had a way to share projects and collaborate in real time, that would make my engineering workload so much easier to handle”.
Empathy Map
A collaborative visualization was created to articulate what we know about particular ‘user type’. This helped to create a shared understanding of user needs, and aid in decision making.
The four quadrants were Hears, Sees, Says and does, & Think and feels. How he thought and felt was based on observations as to how he behaved and responded, his suggestions and conversations etc.
Value Proposition Map
Visual Map was created to represent wants, needs and fears of our user and figuring out, how the new product or service answers them. This framework ensured that there is a fit between the product and market.
How might we create a Microsoft Sharepoint based application that helps in easy vaulting of complex design data through Visual Approach.
Problem Statement
Brainstorming Ideas, Affinity Diagram and Priortization Matrix
Brainstorming was done to generate ideas and to solve clearly defined user problems. Team brainstormed in controlled conditions and a free-thinking environment, to generate ideas to answer ‘How might we’? sort of questions.
Brainstorming Ideas
Affinity Map
Priortization Matrix
User Journey Map
How do user actually use our application and the functionalities?’ formed the basis of user Journey Map. Visualization was created for users relationships with application over time and across different commands and sites.
All the touch points and channels were highlighted between user and the application. This actually sorted many of our common functionalities.
Information Architecture
The content was organized, structured, and labeled in sustainable way. The goal was to help users find the complex information and complete the tasks in most effective way.
Hierarchial Site Map
Navigation Map
Iconography and Other Graphic Work
Command Functionality
Complex PDM functionalities required discussion with stakeholders for understanding and then working on graphic.
Ethonography
It was important to understand the commands from Mechanical Engineers perspective
Finding the Metaphor
Metaphors really help to sort otherwise complex PDM fuctionalities.
Recognition by Recall
This was about understanding experience about known software like Windows and create the icons accordingly.
3D Skeumorphic Icons
Development for Insight XT was started on Sharepoint 2010. Thus, initially around 400+ icons were created to match Sharepoint 2010 UI with detailed 3D graphics, shades and shadows to achieve realistic look and feel.
Flat Icons
But later. Microsoft released Sharepoint 2013, which consisted of flat icons and new UI. Thus, I modified all those 400+ icons to match new flat Windows look and feel.
Access level of User types
All user types were granted access level based on their work. Table also defined clear ownership.
UX Priorities
Progressive Disclosure
Complex PDM functionalities are made simpler to use by using methods like Progressive Disclosure and Omni-Channel UX.
Lesser Server Calls
Downloading, storing, sharing and retrieving data takes up energy. Thus workflows, interactions were designed to reduce sever calls and thus reducing data consumption.
Sustainable Design
Findability: Web page is focussed on making the content as accessible and easy to locate as possible.
Performance optimization: Lighter controls, minimal UI, non-graphic heavy makes webpages faster to run.
Information Architecture
For Data Management and SE CAD application(s) it is very crucial to structure and organize information to make it easily navigable for the user.
80/20 Rule
Generally 80% of user time is spent on 20% of Features. Thus the most frequently used commands, features formed main ribbon and menu(s). The secondary ones were included in drop down(s), sub menu(s).
User Engagement
Fast loading pages helped in user engagement. At locations that took time, enough status messages were thrown in to keep user aware.
Recognition by Recall helped in making user feeling familiar with otherwise difficult workflows.
MVP
My last decade years experience of software products help me to understand how to follow Minimum Viable Product (MVP) method to develop UX+UI in iterative way with each passing release.
Localization
Helped localization teams across globe on getting the UI localized. Weighing impacts of requested last minute UI changes on product stability, localization and approving/rejecting the same at extreme end of development cycle.
...And the Application UX
Landing Page/ Dashboard Design
It provided preview of the most crucial information for the user at the moment he is looking at it, and an easy way to navigate directly to various sites of the application that require users attention. This was ‘Dynamic operational dashboard’ which provided data changes across organization clearly; and also show assigned tasks and their current status.
Constraint
User actions are limited by only showing applicable commands and thus avoiding workflow errors.
Mouse Click Study
Content layout was done with help of Mouse click study on prototypes.
Flexibility-Usabilty Tradeoff
Most of the panes were fixed with no unpin, move option reducing flexibility but increasing Usability.
Performance Impact
Lesser display of info on default results in lesser server call and thus better performance.
In-House Site
It provided preview of the most crucial information for the user at the moment he is looking at it, and an easy way to navigate directly to various sites of the application that require users attention. This was ‘Dynamic operational dashboard’ which provided data changes across organization clearly; and also show assigned tasks and their current status.
Progressive Disclosure
Folder structure is collapsed on default to avoid showing over display of info. User can expand it as he/she wants.
Information Architecture
Ribbon commands were grouped based on their usage pattern, common functionalities for best user interests.
Information Layout
All the dialogs and related UI were moved to side pane for seamless experience of main canvas where user will perform most of functions.
Recognition over Recall
Most of UI elements like Ribbon, RMB menu support, Sub-menus, Command tooltips and tool messages were designed like MS Office for user familiarity.
Search Site
Workflow 1 : Uploading model to Solid Edge SP and opening it
Most important thought behind development of Solid Edge SP was to provide easy data management application to manage mechanical files.
Thus, first step was to provide easy upload of ‘unmanaged data’ to our ‘managed’ application.as
Upload mechanical file to Solid Edge SP
Dialog UX
Browse dialog to select the location to upload:
Destination folder selected:
File is uploaded to Solid Edge SP and checked-out
The file is downloaded to local cache and worked from there. Thus there are lesser server calls. Considering mechanical files are heavy files, lesser upload/download encourages efficiency.
Now user clicks 'Open to Solid Edge SP' to navigate to the application where it is stored.
File is opened in Solid Edge SP
Workflow 2 : Handling and managing Data in Solid Edge SP Client
Solid Edge SP User experience was designed using Microsoft Office standards, providing a fast learning curve through Recognition by Recall. The interface provided easy visualization of product structures and many design relationships by leveraging SharePoint capabilities.
Content Browser
RMB menus and Ribbon Command UX
Preview/ Property Card
Open in Relation Browser
Relation Browser
Thumbnail View in Relation Browser
Indented Metadata View
Workflow 3 : Creating Change Requests and Notifications
I have designed and detailed user experience for creating ECO, ECR(s); status messages and related changes.
SESP- DocController Workflow
Doc-controller(Test Engineer) creates Engineering Change Request(ECR)
Change Management Page
New ECR Dialog
Then, SESP automatically generates Item Number.
New ECR created
'Active Object' is reflected in ribbon
Linking the problematic part to ECR
Search Criteria's
Search Results
Adding Further filters
Confirming the Part
Linking the Problematic Part to Active ECR
ECR and Linked Part on the Page
Creating ECR Document
ECR Document
The part and document is now shown at ECR node.
Dashboard
Creating New Task
SESP-Approver Workflow
Approver Dashboard
Change Management Page
Reviewing the model in Solid Edge
Approval and Creating ECO (Engineering Change Order)
Creating New Task for Engineer
User Persona: SESP Contributor
Task and Details Reflected on Engineers Dashboard
