An Example

Helping users view and edit their 2D and 3D design files online

My roles included UX, Visual and Research Collaborator


Challenge: Usability and efficiency suffers from fragmented UI, conflicting visual elements


Our challenge was to redesign web-based software for 2D/3D drafting applications. We identified significant challenges early on. Most users struggled to complete their work efficiently because the existing product displayed functionality on top of their drawing files without a clear information hierarchy. In addition, novice users were challenged and slowed by the outdated interface and visual design, a non-intuitive command structure, and difficult navigation and search tools.


Plan & Solution

Once we understood the challenges, the initial prompt was to redesign the product. We started from understanding our users and the research results guided us to design solutions.


Capturing User Behavioral Needs and Pain Points

We interviewed 30+ users, with less than 5 years experience in construction/architecture field, observing how they work and perform frequent tasks. After a focused series of interviews, we created a light persona set. Three core users were identified, each with competing goals and needs.

Our target persona is an engineer or design contributor who accepts a base drawing and adds line works on top of the drawing.

Then we created user journey maps to help to visualize and communicate users' complex workflow and their three main pain points as they perform their works.

1. Difficult Design File Preparation: users must perform multiple steps in order to prepare their design files for drafting.

2. Steep Learning Curve: AutoCAD is rich drafting and design software that includes many features and tools. Navigating this complexity often slows novice users and leads them to inefficient steps to perform tasks.

3. Uncoordinated Collaboration and File Sharing: collaboration requires each user to create a personal copy of the project file and merge their changes together afterwards.

With a deep understanding of our target users, we aimed to build a simple, intuitive and functional product that displays specific toolsets only when the user needs them. The target users are young engineers and professionals working in the construction industry. At this stage, building a product roadmap is essential when prioritizing tasks.


General UI Redesign: Identify the best UI strategy and placement of tools and contextual Properties.


Based on the product roadmap, there are different design goals for each two-week ‘sprint’. For this sprint, we aimed to solve one of pain points "the steep learning curve." We planned to create the basic approach for the User Interface (UI). The team explored multiple design options to address three essential questions:

Which option has fewer steps?

Which option is simpler?

Which option hides low value content?

We conceived design options that hide and display functionality and content. After brainstorming and creating design mock-ups, the team discussed progress and selected 3 final options for consideration.


For each concept we sketched out the mockup and built working prototypes, we run user tests with our target customers based on three hypotheses. These hypotheses help to verify if users can easily find the toolsets and perform the tasks.

Hypothesis 1: Users move their mouse directly to the measure tool when asked to measure an object.

Hypothesis 2: Users learn to switch to the print mode quickly when asked to print out their drawing file.

Hypothesis 3: Users close toolset containers quickly when asked to minimize the tools.

18 subjects were participating in the tests. We gave each two design prototypes and asked them to conduct tasks. We considered their spoken feedback as well as the time expended on each task. We collected and analyzed these experience measures to inform our new design.

We decided we are building a customizable side panel containing toolsets that allows users to turn on and off.


High-fidelity Assets and Specifications

Once the final design solution is validated through testing, we plan we create high-fidelity assets and work closely with software developers to achieve our vision. We also started to work on design details, like how the various toolsets are displayed on the panel; how to work with data-heavy contents.


At this point, we move onto the next stage in the product roadmap, but continue to verify our results with the implemented design.


A sample of how the final design look like

Results

We created an unified User Interface, reorganized the information architecture, and built a modern UI component library to replace outdated designs. We worked closely with the development team to plan the project roadmap and milestones.

Our target users provided positive feedback to our team. They liked the clean, professional UI. It helped them to reduce the learn curve and now it is much easier for them find the tool that they need.

Lessons Learned:

Building reliable, cloud-based software that simplifies complex professional workflows is not an easy task and requires a great deal of effort from many players. One important lesson is how engaging with customers early and often helps the team to make steady progress on such a long-term project. I learned to deliver different types of assets in various media to reach our design goals.