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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.