Trina Le
Trina Le

Decree Company - Crafting a Seamless User Experience through Native Mobile and Responsive Web Apps powered by AI Writing Assistance on a No-Code Platform

Decree Company, a private stationer, empowers businesses with AI tools for effortlessly sending personalized handwritten notes. In this project, my role was to enhance the usability of two key task flows and establish a design system to align the app with brand guidelines.

Decree Company_Feature Image

Role

UX Designer

Timeline

2 months

Team

UX Designer, Industrial Designer , Lead Developer

Core responsibilities

Design System + Native Mobile/Responsive Web App Design

Tools

Figma, Bildr.com

Overview

A team at Bildr was commissioned to develop an app allowing Decree's business clients to quickly compose and send personalized handwritten letters aided by AI writing technology. The initial MVP of the app, built using a no-code tool (Bildr), was advancing toward the final development stages. However, the co-founders discovered significant usability issues with the product and noted that the user interface did not align with Decree's brand guidelines. The Decree brand catered specifically to wealthy and affluent families and business owners. Lacking technical expertise and the ability to articulate the desired user experience, they foresaw potential failure upon the app's launch.

Decree Company_Visual Guidelines

I was part of the production team that printed stationary, but as a member with a UX background, it was decided that I would step in to assess the product's usability and implement improvements. My role involved bridging the gap between business expectations and the development team at Bildr. I facilitated communication of product ideas and ensured approval of crucial task flows to prevent unnecessary time wastage during implementation.

Decree Company_MVP_Send Single Note

Phase 1: Evaluating Usability and Gaining Trust from Founders and Lead Developer at Bildr

With any redesign, I had to delve into the key usability issues within the current build before immersing myself in Figma. Since it was my first time engaging in product design work for Decree Company, I recognized the necessity of providing rationale behind any redesign changes. My goal was not only to enhance the usability of the existing build but also to establish trust with the developers at Bildr who had already invested time in the current build. As time and effort had already been expended on the initial version, I aimed to identify what key flows and UX elements were effective and build upon those foundations, ensuring a strategic and incremental approach rather than starting from scratch.

I started with Heuristic Evaluation of the app against Nielsen Norman Group's "10 Usability Heuristics Applied to Complex Applications and conducted three usability tests. I systematically documented my observations, drawing evidence from the comprehensive audit of the application, and structured my analysis based on the severity of the identified issues. To maintain brevity, not all findings are included, and the following highlights key observations.

Finding 1: Consistency and Standards Violations

Description: The Decree Letters app displays inconsistencies in its user interface, deviating from established design standards.

Severity: Critical

Evidence: Different icons for the same action, varied use of components, inconsistent visual guidelines.

Recommendation: Establish clear design standards and implement a cohesive design system.

Examples_UI Inconsistencies

Finding 2: Visibility of System Status

Description: The Decree Letters app lacks effective feedback mechanisms, leaving users unaware of system events and errors.

Severity: Moderate

Evidence: No error messages for word limit, lack of feedback on auto-saving drafts, incomplete form validation.

Recommendation: Implement real-time error messages, provide clear feedback on auto-saving, enhance form validation.

Finding 3: Lack of AI Interaction Controls

Description: The Decree Letters app lacks essential controls for user interaction with AI, leading to usability issues during the writing process.

Severity: Moderate

Evidence: No "redo" or "edit" option while using AI, inconsistent AI assistance in bulk orders.

Recommendation: Implement user-friendly AI interaction controls, provide consistent messaging about AI assistance.

Examples_Letter Preview_AI

Finding 4: Confusing Terminology and Navigation

Description: The terminology and navigation within the Decree Letters app can be confusing, particularly when managing bulk orders.

Severity: Low

Evidence: Unclear tab labels, confusing use of "Checkout" terminology.

Recommendation: Provide clear descriptions for each tab, standardize terminology for consistency.

Examples_Manage Bulk Order


I presented my key insights to the founders and received approval to initiate the design process. Conducting a competitive analysis of three other apps with similar services, I led a team discussion to determine what functionalities we should avoid and drew inspiration from existing UX designs that could be implemented in our app. Collaborating with one of the founders, an Industrial Designer, we approached the redesign to create the ideal customer journey, with a specific focus on enhancing the usability of two key flows: Sending a Single Note and Creating/Managing Bulk Orders. We aimed to streamline the overall navigation for these features, making it the simplest way to initiate both task flows. Sketching out the initial customer journey, we established the foundation for the entire design process.

From here, I translated these ideas into wireframes using Invision. This step played a crucial role in gaining support from the Lead Developer for the project. It provided him with an understanding of how to construct the database and develop the backend of the app. This process involved careful consideration of elements to be re-implemented and those to be retained from the existing build. Engaging in discussions about the placement of key features in the process, we utilized this skeletal framework to define the scope of the rebuild.

Invision_Wireframes

Phase 2: Explorations + Studies

The initial step in my design process involved constructing a UI kit in Figma for rapid prototyping. I spoke to the company's Graphic Designer directly and used her brand guidelines to derive the style of the UI Kit. My focus was on creating reusable buttons, input groups, text styles, and icons for consistent implementation throughout the app. The guiding style principles for my design decisions included the following:

  • Blue, the primary color, was reserved for user actions, minimizing its usage to ensure clarity on interactive elements.

  • A shade of white and the secondary color served as the main colors to provide the necessary contrast for the primary color to stand out. A blend of these two colors was applied to secondary action elements while maintaining a low usage of the primary color.

  • Emphasizing sharp edges for buttons, icons, and element corners was essential to impart a high-end feel to the app, deviating from the prevalent trend of rounded edges in app design.

Decree_Style Guide
Decree_Components

Exploration 1: Create a Quick Way to Start Process for Starting a Single Note or Starting a Bulk Order

Using the reusable set of components and wireframes created in Invision, I initiated my design process. I explored design options that would make it easy to send a single card while also setting up a bulk order. Based on my initial wireframe explorations, I knew I wanted to implement a tab to make starting a bulk order just a click away. This design pattern would be familiar to many users due to its implementation on Uber, allowing customers to switch from ordering a car to ordering food delivery with one click. It kept our two main features as the focal point, ensuring that customers understood the services we provided.

Decree_First Iteration

Although my initial designs were a good start to solving the problems, the first screens asked for too much user input at once. Gathering all the required information, such as the recipient's name, return address, card selection, and allowing the customer to write the message was a significant demand. I decided to take it in a different direction and removed the text box, leaving this beginning part for collecting necessary information for setting up each order.

A key feature of the application was the "Text for Address" functionality. This would give clients of Decree Company an additional tool to help them with the biggest blocker when writing and setting notes: finding people's addresses. The business team wanted this feature at the forefront of the app, but we saw that adding this feature was confusing, and though useful, it added to the cognitive load when starting the letter-writing process.

Decree_Second Iteration_Final Mockup

The final mockup struck a great balance, keeping both features as the focal point while lowering cognitive load by asking for a single user input on each page, making it easy to switch between either task flow.

Exploration 2: Managing a Bulk Order

Another key feature was to facilitate the creation of a bulk send of letters to a large number of recipients, particularly with brides, wedding planners, and large outreach in mind. While we were already completing orders like this in-house, the manual management process was cumbersome. The old system implemented in the MVP was confusing, and the movement of the status of recipients needed clarification. We aimed to enable customers to write and send letters in batches, allowing them to return at any point to edit messages.

In my initial exploration of this problem, customers could add recipients and view/manage their status through tabs. However, testing revealed several issues: it was challenging to see at a glance which letters were ready to be sent. There was no efficient way to write letters for multiple recipients, and, in addition to writing the letter, customers also had to add it to the bag, creating an extra step before checkout.

Decree_Wireframe_First Iteration

To address these problems, I renamed the first tab "Drafts." This term was crucial to helping customers understand how to manage their letters. The drafts tab would hold all letters that had yet to be sent. Letters would only populate in the "Ready" tab after the customer marked them as ready at the end of the writing process. I also implemented a nested primary action for each tab to make it easy for users to move forward at each stage in their process. From the drafts tab, they could be prompted to write letters for all their recipients, and from the ready tab, they could proceed to checkout. This setup allowed them to select which recipients or letters to move forward with, giving them the flexibility to manage the process effectively.

Decree_Bulk Order_Final Mockup

Exploration 3: Writing a Note with the help of AI

The subsequent interface, crucial to the user experience, allowed customers to compose their letters while also leveraging AI assistance if desired. Customers needed the capability to preview their letters in the two available fonts and craft personalized messages.

Recognizing that the AI still required substantial context for optimal responses, we established a prompt system resembling a survey or questionnaire, offering 3-6 options to choose from. This solution aimed to streamline decision-making, providing users with a concise set of options, and also guided customers unfamiliar with AI on creating effective prompts without being too broad and yielding poor responses.

Decree_Write Note Interface

Results and Learnings

Overall, this was a fun and challenging project. My focus was on designing quickly while managing expectations with the company that hired me. Given their limited technical knowledge, it was crucial for me to create mockups and use wireframes to secure approval before proceeding to implementation. My key learnings came from working with a product-focused developer; it was crucial for me to be flexible and communicative in my design process to balance technical limitations with user needs and business goals.

The redesigned app received highly favorable feedback from Bildr's internal team and Lead Developer. The improvements were commended not only for simplifying the letter-writing process but also for the comprehensive documentation and quality assurance procedures, laying a solid foundation for successful and efficient development.

Send Trina Le a reply about this page
More from Trina Le
Back to profile