Redesigning WIDAR,
A Creative 3D Scanner
& Editing Mobile App

Challenge

Before I joined the team at WIDAR, the 3D scanner/editing tool was a collection of disjointed features lacking a cohesive UX flow. With a growing user base from the global market, the company faced usability challenges that are evident through user feedback emails.

My Role

I initiated a complete redesign of the app so that it seamlessly integrate with both the Japanese and global markets, as well as fix all of its usability issues. I directed & mentored a junior designer in the process as well.

Within the product team, I advocated an enhanced collaboration between design and development through a sprint approach and regular check-ins. This improved workflow accelerated our team’s overall iteration process.

Role
UX/UI Designer

Responsibilities
UX/UI Design, UXR, Design critiques

Team
1 Product Manager, 1 Junior Designer, 4 Developers

Year & Timeline
2022-2023, 6 Months

Design Process

User Testing

To have a deeper understanding of the problem space, we conducted two rounds of onsite usability tests with 7 participants total. The primary objectives were to assess challenges navigating the app and uncover any further usability issues.

Problem Definition

Here are the key insights derived from user interviews and my own design assessments. I systematically documented design issues for each screen and conducted Figma critiques to gather feedback from other team members. The primary challenges identified include:

Unclear page structure

The majority of the users don’t know where to start with the app and how to perform certain tasks.

Lack of guidelines

Many screens lacked descriptions or guidelines, and the words and phrases used didn't resonate with users. This made it challenging for new users to independently learn how to navigate and use the product.

Design Inconsistency

The absence of a clear hierarchy among desired user actions can cause confusion, making it difficult for users to prioritize and follow intended sequences. This lack of structure hinders their ability to identify key actions.

Gathering Existing &
Revising User Flow

Our team then got things organized by putting information in a clear order. We took a closer look at what was already there, making sure we understood how users experienced the app before. We then quickly revised each of the user flows and held weekly design critiques with the design, development and marketing teams to get their feedback regularly and make sure we’re all in the same page.

Design System & Rebrand

I revamped the visual identity of the app to address user feedback. One main concern from global users is the prevalence of red UI components, which they associated with warnings or errors.

I introduced a palette dominated by purples, pinks, and gradients: inspired by the evolving trends of Web3 and the Metaverse. I went for a look that conveys a trendy and futuristic ambiance that will hopefully be universally appealing to our current and future users.

I then made a component library on Figma to uphold uniformity throughout the redesign process. This library has also been useful for expediting prototype creation for our enterprise projects.

Outcomes

Since WIDAR is filled with complex features, I created and narrowed them down into three specific user journeys. This helped in refining the overall structure and enhancing user guidance.

Seamless Onboarding

This streamlined flow is designed to guide users seamlessly through all of WIDAR’s core features, from scanning and editing to posting in the community. In the prior setup, users were directed straight to scanning immediately after signing in, which causes frustration due to the scanner's learning curve. This often resulted in users leaving the app without exploring other valuable features.

To address this, I revamped the flow, providing users with the choice to scan, edit, or create a collage upon their first use after signing in. These essential features, including the community and profile, are now conveniently accessible in the navigation bar. This adjustment significantly increased user retention and the volume of published work in our app.

Guided Experience

I implemented clear and accessible tutorials and guidelines throughout the scanning & editing journeys to enhance its usability. The improved flow has empowered users to effortlessly complete their tasks and share more work within our community.

Effective Share & Monetization Pathway

Previously, the app's monetization flow was pretty puzzling. The paywall had unnecessary image slideshows, and the timing of surfacing it on different flows was all over the place. This makes it confusing for the users to figure out which features were premium and which weren't. I initiated an improvement for it and designed a simpler flow with straightforward paths for users to subscribe and pay for premium features.

Reflections

This project is my first dive into product design so I still think that I still have plenty of room to improve my processes. Given more time, I’d like to revisit our UI components so that they’re more consistent with one another. Overall, this experience deepened my interest in UX design. Looking ahead, I aim to engage more in user testing and explore areas like accessibility. Here are my key learnings:

1. Embrace the Power of Simplicity
As designers, the allure of trendy and unconventional designs can be strong. However, it's important to ask “why” and “how is it benefiting the users in terms of functionality”. It’s cliche, but our main objective is to deeply understand the user’s challenges before crafting a design that effectively addresses those needs.

2. Strategic Prioritization for Core Features
Crafting a strategic plan to launch an MVP is very important. This approach helps narrow down and prioritize the important features that will create the most impact. I’ve learned that this ensures a timely delivery of a high-quality product.

3. Embrace Early and Continuous Feedback.
It's human nature to prefer praise over criticism, but seeking feedback early and consistently is key. Keeping stakeholders and users in the loop and testing solutions at various stages can save substantial time and prevent unnecessary rework.

View All Projects