Lumin Project: Mastering UI for Hard-to-Please Customers

In today's digital age, where information is the lifeblood of productivity and collaboration is paramount, managing documents can often feel like a cumbersome chore. Traditional methods can be riddled with limitations, hindering the free flow of information and creating frustrating barriers to teamwork. Enter Lumin, a revolutionary document platform designed to break down these silos and empower users.

Lumin goes beyond merely viewing, editing, and sharing PDFs. It interacts effortlessly with cloud storage, allowing you to view your papers from anywhere, at any time. This greater independence from location-based constraints encourages information interchange and breaks down geographical barriers. But Lumin's influence goes well beyond convenience. It promotes openness and accountability by providing secure digital signatures, which ensure the legal enforceability of contracts, agreements, and other important documents. This degree of security fosters trust and confidence in the document management process, making Lumin a useful tool for both enterprises and people.

While outstanding financial metrics, such as Lumin's predicted annual sales of $12.9 million with a projected increasing trend, demonstrate the company's success, Lumin's actual worth comes with a deeper mission. It is about empowering people, protecting their right to information access and secure cooperation, and creating a more inclusive digital world. This dedication to user empowerment is reflected in our thorough User Interface (UI) design. We don't simply construct user-friendly platforms; we design them with accessibility features at the forefront, delivering an inclusive experience for all.

Intrigued by how Lumin's UI design engenders user confidence and drives wider adoption? Dive deeper into our detailed paper, where we explore the strategies and practical examples employed to build a truly user-centric and inclusive platform.

Leveraging Google Material 3 Design Principles for Design System and UI/UX Design

Over the past two years, we have applied the principles of Google Material Design 3 in building our design system and UI/UX design.

To optimize the organization and management of the design system between teams within the same project effectively, improve the design handoff process to developers, and enhance the interactive user experience of the product.

Here’s how the Lumin team has implemented Google Material 3 Design Principles:

Material Design provides a set of standardized rules and components, which helps to organize and manage the design system easily:

Previously, the design system with the design team was just a set of simple guidelines/components. Now, with the latest rules and organization methods using variables from Figma, the design system has become more detailed, with consistent elements that can be shared among multiple designers, resulting in improved UX and accessibility.

In the past, designers would randomly use various colors based on their preferences, leading to inconsistencies between teams. (Designer A liked color 40, Designer B felt their design suited color 60, and Designer C used color 10). Overall, the UIs would lack uniformity, and the color scheme might have insufficient contrast and be unsuitable in some cases.

With the new system, the colors will be standardized, named, and their functions, contrast, and usage guidelines will be clearly defined. This provides a detailed and clear set of conventions for designers to use the right colors for the intended design purpose.

The design token design will be applied to the following basic components.

In the previous workflow, after the design was completed, the developers would need to manually view the design files and pick the color codes/specifications to build the CSS.

Now, the design team can use a plugin to export the design as a JSON file, which the developers can use directly, reducing the workload for the development team. The token values will be accurate and scientifically organized for convenient u

Craft a multilingual and multicultural design interface to cater to a global audience

In the realm of user experience (UX) design, addressing the cultural and linguistic nuances of diverse user groups is paramount. As designers, we may not always share the same geographical, cultural, or industry background as our target audience. This can pose significant challenges if we fail to consider these factors when crafting our designs.

Creating a product without understanding the cultural and linguistic subtleties of our users can lead to usability issues and, in severe cases, even offend or alienate certain groups. For instance, I recall designing a basic file storage app for students in the US market. Our team lacked a UX writer, and the product owner was not American. Despite conducting online research and user interviews, we still made cultural and linguistic blunders.

American English has distinct vocabulary and writing conventions compared to British English. We ended up relying on our marketing and customer support teams in the US to review the app’s language. Fortunately, with the advent of online tools and AI-powered solutions, language barriers have become less of an obstacle.

As for cultural considerations, Western users generally prefer a minimalist approach with clear and concise buttons. Our initial designs, influenced by East Asian aesthetics, incorporated excessive details and colorful banners, potentially overwhelming users. To address this, we implemented feedback mechanisms, such as prompting users to rate and review the app after completing key tasks. Each month, we review these feedbacks and refine the app accordingly.

Optimizing the user interface to ensure compatibility with mobile devices

Optimizing the Lumin Document List interface for seamless responsiveness across platforms, from desktop to mobile, is critical for a smooth and consistent user experience.

Unlike the vast desktop environment, mobile devices have a restricted screen real estate. The objective is to have a consistent appearance and feel throughout the online and mobile versions, reducing the requirement for substantial bespoke design by the development team. The goal is to make sure that all content, element sizes and call-to-actions are easy to reach and use on mobile.

Given the wide range of mobile device sizes, the designer should work with the Product Owner to collect data on the smallest device specs used by consumers. This data will assist the team in identifying the most frequently used features, allowing them to optimize the mobile design by removing extraneous pieces.

The design process should begin by adapting the layout to the smaller mobile devices, ensuring that all critical features are visible without a broken layout. Important elements will remain on the mobile layout, but unneeded functionality will be buried.

Font size, button size, and location are all important elements to consider when displaying them. For example, on the mobile version, the “Upload” button might be changed into a circular floating button that is always visible in the bottom-right corner and can be readily manipulated by the user’s thumb (with a minimum touch area of 48px, as recommended).

The end product should be two versions — web and mobile — with a cohesive visual identity, fostering a unified user experience across platforms.

After the design is complete, it is critical to test the interface on a variety of mobile devices to gain firsthand experience and receive feedback for any necessary changes.

Embrace Customer Feedback and Provide Compelling Solutions

After receiving user feedback on the “Drop files here” upload UI feature of the Lumin document, the client team has identified several areas for improvement:

The primary concern was that the current design was not intuitive for users. Many mistakenly thought they could click on the illustration to initiate the upload, when in fact the only supported action was dragging and dropping files. Additionally, the size of the illustration and layout of the text below meant the full content was not easily viewable on smaller computer screens, especially Windows devices.

To better understand the user experience issues, the team conducted research using tools like Hotjar to analyze user journeys and behaviors. This provided valuable insights, revealing that most Lumin users preferred uploading files directly from their local devices rather than dragging and dropping.

Benchmarking how other websites implemented their file upload features also helped inform the redesign process. The team then collaborated with the Product Owner to concept two new design approaches — one retaining an illustrative element, and the other taking a more minimalist approach.

After review, the client ultimately selected the simpler, more streamlined design. This solution adds a dedicated upload button and provides clearer instructional content while maintaining a compact layout that ensures full visibility even on smaller screens.

The goal was to create an upload experience that feels intuitive and focused, allowing users to quickly and easily upload files from their computers — the primary action they tend to perform. By addressing the usability pain points identified through user research, the team is confident the new design will provide a better overall experience for Lumin customers.

Conduct User Testing to Evaluate User Interface (UI) Performance and Experience

Conducting real-world user testing is crucial in product development. The data points shown in charts and graphs do not always address the actual problems users encounter.

For instance, when our team redesigned the interface of a simple document reading and sharing app. Before releasing it to end-users, we conducted user testing sessions and addressed major experience issues, making adjustments before proceeding to the next steps of product launch.

Finding suitable external users for testing was initially challenging, as it took time to recruit the right participants. A key principle is to never test on your own team, as that would compromise objectivity. Team members are already familiar with the product, leading to inaccurate results.

We prepared by writing a main usage scenario, asking users to follow it step-by-step and provide feedback at each stage. After the sessions, for crucial steps that were problematic, the interviewers would further probe users to understand their specific difficulties.

The software we used was Google Meet, which allowed us to record the users’ screens during the tests. These recordings were then reviewed to gain deeper insights into user behavior.

Following the testing, we discovered that most users struggled to locate the download button. Previously, it was placed differently, but after the redesign, its position changed. Reviewing the recordings, we noticed that users habitually looked for the download button in a menu, where they expected to find it like in other apps they commonly used. This allowed our team to optimize the button’s placement, improving the experience before releasing the product to the public.

Read more about our blogs here: https://www.designveloper.com/blog/