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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2FA4jrvgEnHjDmz51vmESs%2Fc80c7fa2-001e-46b8-a4af-9fb13060e555.png?alt=media&token=3abd9bfd-f4d4-4ccb-9cc8-87566851ed25","id":"c80c7fa2-001e-46b8-a4af-9fb13060e555","width":8247,"height":4948,"filename":"DC_01.png","type":"image/png","caption":"Decree Company_Feature Image","border":false}]}
```

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2F4a71d76e-74ff-4b97-8f50-7972547fd25e.png?alt=media&token=f922fc21-4632-48cd-bdef-7e9f319b5cb3","id":"4a71d76e-74ff-4b97-8f50-7972547fd25e","width":6186,"height":2724,"filename":"DC_02.png","type":"image/png","caption":"Decree Company_Visual Guidelines","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2Fb9b148b2-e6ee-43de-8b3b-5b739efa07e1.png?alt=media&token=9be08c40-a4b1-45e1-9e7f-8eb60ed9db64","id":"b9b148b2-e6ee-43de-8b3b-5b739efa07e1","width":2012,"height":1182,"filename":"Screenshot 2024-01-15 at 3.39.24 PM.png","type":"image/png","caption":"Decree Company_MVP_Send Single Note","border":false}]}
```

## **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](https://docs.google.com/document/d/1i7IQHVRRnN5XPUE3Vuz3qgATAt-scqlrqA4-LX5A6N4/edit?usp=sharing) 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2F57f760ec-00f8-46aa-929f-82c22fb37d55.png?alt=media&token=e27745f6-4693-497d-a159-200c989cef74","id":"57f760ec-00f8-46aa-929f-82c22fb37d55","width":2064,"height":970,"filename":"Screenshot 2024-01-15 at 4.18.58 PM.png","type":"image/png","caption":"Examples_UI Inconsistencies","border":false}]}
```

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2F56fb9fd4-2c73-4d92-87f7-6e14d5f25a62.png?alt=media&token=43b0b5a8-75cb-4a0a-b12b-2a2e936bfed6","id":"56fb9fd4-2c73-4d92-87f7-6e14d5f25a62","width":1990,"height":850,"filename":"Screenshot 2024-01-15 at 4.24.37 PM.png","type":"image/png","caption":"Examples_Letter Preview_AI ","border":false}]}
```

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2Fca7cd761-4fa6-47f4-8706-86fb820064b8.png?alt=media&token=ea890038-b971-42dd-b965-0154d4df8a39","id":"ca7cd761-4fa6-47f4-8706-86fb820064b8","width":1182,"height":862,"filename":"Screenshot 2024-01-15 at 4.57.32 PM.png","type":"image/png","caption":"Examples_Manage Bulk Order","border":false}]}
```

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2F01cfd5e7-a970-4f46-be91-9dfe341d06a6.png?alt=media&token=3ae05e75-1170-4a95-8734-a7ca6a377ddc","id":"01cfd5e7-a970-4f46-be91-9dfe341d06a6","width":8247,"height":4948,"filename":"DC_03.png","type":"image/png","caption":"Invision_Wireframes","border":false}]}
```

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2F5ad25e29-5042-4817-8306-c30a74b1a4e1.png?alt=media&token=4616f5c0-4447-4d6b-a9da-2a2651c66b3b","id":"5ad25e29-5042-4817-8306-c30a74b1a4e1","width":8247,"height":4948,"filename":"DC_04.png","type":"image/png","caption":"Decree_Style Guide","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2F650b70ad-dd44-4434-9f8a-e9bd6e0f5541.png?alt=media&token=81c54b60-3b65-4fff-b631-112417e23b31","id":"650b70ad-dd44-4434-9f8a-e9bd6e0f5541","width":8247,"height":4948,"filename":"DC_05.png","type":"image/png","caption":"Decree_Components","border":false}]}
```

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2Fa02090ea-63a6-455d-bd5c-6bd854d27e9f.png?alt=media&token=20d8ccf2-f303-44ae-a6bd-8d69b8cca05c","id":"a02090ea-63a6-455d-bd5c-6bd854d27e9f","width":8248,"height":5164,"filename":"DC_06.png","type":"image/png","caption":"Decree_First Iteration","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2Ffff01fb6-e77c-4f2d-a8a6-ebbfb99cc902.png?alt=media&token=8746e60c-35a8-4f54-a13a-9caf9c5f748d","id":"fff01fb6-e77c-4f2d-a8a6-ebbfb99cc902","width":8248,"height":5164,"filename":"DC_07.png","type":"image/png","caption":"Decree_Second Iteration_Final Mockup","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2Fde1ad78b-2bb0-47eb-800d-f132ed1a13c0.png?alt=media&token=890e2f59-ccc0-43e4-8702-0ab22f0c55c5","id":"de1ad78b-2bb0-47eb-800d-f132ed1a13c0","width":8248,"height":5164,"filename":"DC_08.png","type":"image/png","caption":"Decree_Wireframe_First Iteration","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2F588f2611-0054-4bd1-9d4b-a076248fa3d6.png?alt=media&token=5253ebda-36a2-422b-9c0e-627103bd6e57","id":"588f2611-0054-4bd1-9d4b-a076248fa3d6","width":10748,"height":5624,"filename":"DC_09.png","type":"image/png","caption":"Decree_Bulk Order_Final Mockup","border":false}]}
```

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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy03%2Fc7529c46-3cd5-44fc-9f8a-a4363108e944.png?alt=media&token=206e429f-5ceb-4d53-a2c5-eb80db6d5dfb","id":"c7529c46-3cd5-44fc-9f8a-a4363108e944","width":7572,"height":4580,"filename":"DC_13.png","type":"image/png","caption":"Decree_Write Note Interface","border":false}]}
```

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

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

\
I initially joined the team as a UX Consultant with the goal of providing advice and insights to unblock the business team and address technical debt. Upon assessment, it became evident that a significant redesign of the web application was needed. Transitioning into a more hands-on role, I redesigned the web app and developed additional product features to enrich the overall instructor experience.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcdeec8IupK2lFnPUsS1z%2Fe2c442ea-bdd4-4011-af5f-b507082dd108.png?alt=media&token=8acba055-052d-495d-9a13-64227d5d5ba3","id":"e2c442ea-bdd4-4011-af5f-b507082dd108","width":8247,"height":4948,"filename":"BR_01.png","type":"image/png","caption":"BoomRoom_Feature Image","border":false}]}
```

**Role**

UX Designer + UX Consultant

**Timeline**

5 months (March 2022 - August 2022)

**Team**

UX Designer, UX Design Lead

**Core responsibilities**

Consulting + Design System + Responsive Web App Design

**Tools**

Adobe XD, Figma, FigJam

## 

## **A little bit of context**

The goal of the application was to give fitness instructors the tools to host classes online and manage their entire business in one platform. This need was driven by the restrictions of the pandemic which closed down all public facilities instructors would normally host classes. \
\
BoomRoom launched its MVP in December 2021. However, the product underwent a lengthy development process and surfaced with UI inconsistencies and poor usability. This introduced additional challenges for the business team in onboarding new fitness instructors and hindered the development of new features. To tackle these issues, the company sought a more experienced designer capable of leading the initiative to establish UI consistency and chart a more effective course for incorporating new features.

I had previously contributed to the MVP that launched in 2021 and was asked to return as a UX Design Consultant to provide advice on how to improve the product. Because I was already familiar with the application, I could see the gap between the initial vision and the product that was launched.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcdeec8IupK2lFnPUsS1z%2F1ddf11dc-412f-4cd1-8046-625c5b24f2da.png?alt=media&token=b3f614e1-2307-474f-b58f-ff5f736eff05","id":"1ddf11dc-412f-4cd1-8046-625c5b24f2da","width":9747,"height":5694,"filename":"BR_02.png","type":"image/png","caption":"BoomRoom_MVP Wireframes","border":false}]}
```

## **Phase 1: Understanding the Landscape + Deciding What To Fix**

To enhance the product, the initial step involved identifying current pain points and opportunities for improvement. This process started with a heuristic evaluation of the existing build, coupled with a thorough review of user interviews and team feedback.

I conducted a comprehensive evaluation of BoomRoom's usability, applying Nielsen Norman Group's "10 Usability Heuristics Applied to Complex Applications." This assessment revealed several key insights.

* Recognizing the importance of aesthetic and minimalist design, the app showcased a clean and modern interface

* The visibility of system status lacked clarity, particularly regarding successful class sign-ups and class availability

* While the app allowed for user control and freedom in navigation, challenges emerged in finding scheduled classes and receiving feedback on class changes due to the absence of a notification system

* The app did not follow consistent design patterns, contributing to usability issues

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcdeec8IupK2lFnPUsS1z%2F1becb8ff-527f-4bc5-b165-ebd6b4717b81.png?alt=media&token=3389d8ed-e042-424c-b9f3-c5de75416398","id":"1becb8ff-527f-4bc5-b165-ebd6b4717b81","width":9747,"height":5694,"filename":"BR_03.png","type":"image/png","caption":"BoomRoom_MVP","border":false}]}
```

Pain points from the internal team:

* Absence of clear design documentation, resulting in prolonged development times and communication complexities

* Feature requests that surfaced during interviews lacked a clear implementation path

* There was a lack of responsiveness, particularly on mobile devices

> "Better organization than the current state." - Charlotte, UX Design Lead
>
> "Make it look so simple it's unreal, like Snapchat." - Anna, Founder
>
> "Everything should be able to be read quick, makes you feel good" - Founding Instructor

### **The solution**

* Establish a library of **r**eusable UI components in Figma and transfer current documentation out of Adobe XD

* Use the component library to redesign key pages of the application to improve usability of the web application

* Create new features using documented components and write hand-off documentation to guide development

## **Phase 2: Design Exploration**

### **A design system as the solution**

Establishing a design library in Figma would allow for testing with clients before effort and money went into development, ease while collaborating on design, and would pave the way for clear communication during development and implementation. In an effort to be efficient, we decided to design the foundation or “atoms” of the design system first and planned to design the more complex UI components as we redesigned other parts of the web application.

During the first phase of the project, I had a consulting role versus a direct role in the design of the UI components we would be using. I gave a basic template for the Design Lead to work off to define the visual properties of the components and breakpoints. We would meet weekly to discuss her work and provide feedback. I provided advice on how to set up the components in the company Figma library for reuse. Eventually, I would take the creative lead in designing the components past the initial exploration.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcdeec8IupK2lFnPUsS1z%2F9dfef61a-102e-4ee8-b8b4-bac50d5435d9.png?alt=media&token=64b5f8c3-8ea4-4d80-bf12-9c0d9fa8f687","id":"9dfef61a-102e-4ee8-b8b4-bac50d5435d9","width":3024,"height":1964,"filename":"Screenshot 2024-01-13 at 9.31.46 PM.png","type":"image/png","caption":"UI Kit_Figma_Exploration","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy01%2F134de74d-f94f-4d03-a379-ace66163c7ae.png?alt=media&token=80f37fa4-702d-4b1e-b64a-9660802510e4","id":"134de74d-f94f-4d03-a379-ace66163c7ae","width":5820,"height":3452,"filename":"BR_13.png","type":"image/png","caption":"BoomRoom_Components","border":false}]}
```

### **Exploration 1: Profile Page**

> **“My main reason for having a landing page is for people to find me that don't have an Instagram. I also like it for having more descriptions (in-depth paragraphs) about my services to further explain what I can do for them. I also have had a lot of inquiry opportunities through my contact form (super reliable leads, more reliable than dms).”**
>
> **-Ashley Anthony, Founding Instructor**

In response to customer feedback, the redesign of this page needed to center around providing fitness instructors with a landing page where clients could initiate their engagement with the content hosted on this platform.

Goals:

* Provide instructors with opportunities to market their content

* Increase brand presence of BoomRoom

* Drive account creation and class subscription purchases

\
At this stage, we explored three views: Profile URL, Client View, and Instructor View. We created a view specifically tailored for new clients who did not have an account, enabling them to explore and discover the offerings of the instructor without having to login.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy01%2F0d9d8e8a-72f6-4099-a5c9-d789aec06f54.png?alt=media&token=04b09a36-8b0f-4058-91bf-2ac8915bc719","id":"0d9d8e8a-72f6-4099-a5c9-d789aec06f54","width":9495,"height":5673,"filename":"BR_06.png","type":"image/png","caption":"BoomRoom_Before_Inspo","border":false}]}
```

The following user stories drove our decision making on what kind of content would drive account creation at this step.

* *As a fitness instructor, I want to have a landing page so that clients can find me without Instagram.*

* *I want my clients to be able to view detail about my business and learn about what I can do for them so I can generate more leads.*

* *As a business stakeholder, I want to drive account creation and class subscription purchases so that the web application can drive revenue for the company.*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy01%2Fa6c90811-67b8-46f5-880e-43c3d7d3d01c.png?alt=media&token=abcdc889-9768-41b7-b4c1-06e4f82391bd","id":"a6c90811-67b8-46f5-880e-43c3d7d3d01c","width":4536,"height":2580,"filename":"BR_05.png","type":"image/png","caption":"BoomRoom_Profile Page_Wireframe","border":false}]}
```

Collaborating in Figma facilitated seamless work and feedback exchange in a remote setting. While shaping our concepts for content and layout, I focused on crafting new components for class cards, tags, and navigation. This approach enhanced our efficiency, ensuring a smooth workflow without encountering any blocks along the way.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy01%2F27874b88-0cf6-4d13-adb9-a1b93543f0bb.png?alt=media&token=8eda94e5-e28b-468e-a24e-1f7ed8e84e3c","id":"27874b88-0cf6-4d13-adb9-a1b93543f0bb","width":9747,"height":5694,"filename":"BR_07.png","type":"image/png","caption":"BoomRoom_Profile Page_Final Mockup","border":false}]}
```

### **Exploration 2: Class Details**

Following the design of the Profile Page, we seamlessly transitioned to developing the Class Details Page. We delved into creating three distinct views to cater to the varying states of a class, ensuring a tailored presentation for clients based on whether the class was not yet live, available on-demand, or available in-person. Creating recognizable tags was key to effectively communicate these attributes to visiting clients.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy01%2Fc12455a6-c996-4883-a171-f90f3cef808a.png?alt=media&token=2151fb08-1a31-41b5-9dfd-b3318c778488","id":"c12455a6-c996-4883-a171-f90f3cef808a","width":9747,"height":5694,"filename":"BR_11.png","type":"image/png","caption":"Class Details_Final Mockup","border":false}]}
```

### **Exploration 3: Dashboard**

Next on the exploration list is the development of an intuitive dashboard catered to instructors. The objective was to provide instructors with a comprehensive overview of their account at a glance, enhancing their overall experience on the platform. The solution involved enabling quick access to essential actions and areas crucial for instructors, including building a class, editing their offerings, managing finances, and monitoring the number of clients. To ensure a seamless mobile experience, the design prioritized a modular stacking of blocks, ensuring accessibility and functionality across various devices. This dashboard aims to streamline the instructor's workflow, empowering them to efficiently navigate and manage key aspects of their account.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy01%2Fc940873d-12ca-490e-b149-f3ea7e92e5d8.png?alt=media&token=88da6bea-e2ff-460d-862d-d94ebc1a5682","id":"c940873d-12ca-490e-b149-f3ea7e92e5d8","width":9728,"height":5120,"filename":"BR_14.png","type":"image/png","caption":"BoomRoom_Dashboard_Final Mockup","border":false}]}
```

## **Results and Learnings**

The transition from Adobe XD to Figma for design documentation played a pivotal role in enhancing communication between the design and development teams. By providing detailed development hand-off documentation in Figma, development time shortened by 50%. This shift eliminated the ambiguity that arose from relying on screenshots in Adobe XD, empowering developers with clear insights into design decisions and responsiveness requirements.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy01%2F0ae5c0ea-2976-42a3-932c-037546e3186c.png?alt=media&token=92425b45-218c-4609-93e3-18a697e7e708","id":"0ae5c0ea-2976-42a3-932c-037546e3186c","width":9747,"height":5694,"filename":"BR_15.png","type":"image/png","caption":"BoomRoom_Dev-Hand Off","border":false}]}
```

During this project, I realized the importance of clear communication in the design and development process. The initial challenges, stemming from inadequate design documentation, highlighted the need for a more seamless and collaborative workflow. If approached differently, I would have preferred to have been able to communicate directly with the developers but as a contractor working in a silo with the lead UX designer, I did not have that opportunity. Instead, I combated this through thorough hand-off guidelines in Figma.

BoomRoom - Paving a path to Development, Redesigning a Responsive Web App for Fitness Instructors

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fex4SbhdsRC1p6wRKL3Ya%2F543a4d4e-ef89-49c3-9bd4-f2fb7ed637f9.png?alt=media&token=b255d5ee-2949-434e-a1e1-b3d790ad86ce","id":"543a4d4e-ef89-49c3-9bd4-f2fb7ed637f9","width":8247,"height":4948,"filename":"GUPS_01.png","type":"image/png","caption":"","border":false}]}
```

In the pursuit of establishing brand presence and trust within the dental equipment purchasing industry, a new identity was imperative. Leading our rebranding initiative, I shifted the focus from appealing to small businesses to targeting dental practitioners. Engaging with co-founders and leveraging user insights, I crafted a design that is colorful, user-friendly, and enjoyable to engage with – tailored to resonate with the emerging generation of young dentists entering the industry.

**Role**

UX Designer + Brand Strategist

**Timeline**

1 month

**Team**

UX Designer, Product Manager, 2 Developers

**Core responsibilities**

Brand Guidelines + Mobile/Web Design

**Tools**

Figma, Squarespace

## **Phase 1: Gathering Context  + Discovering the Problem**

Before this project, the first iteration of the landing page was created in less than one week. In order to show that we could develop a site quickly, the Product team threw together a website that appealed to our target audience and showcased our main product offering, GroupUps Premium. Though it was good enough, it wasn't enough for us to provide value in this space. I headed back to the drawing board and evaluated what needed to be fixed.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy02%2F00a6fa15-bd47-4e9f-8438-56894225e428.jpg?alt=media&token=8511113c-c57d-4047-9f47-9481d3104938","id":"00a6fa15-bd47-4e9f-8438-56894225e428","width":10152,"height":5970,"filename":"GUPS_09.jpg","type":"image/jpeg","caption":"GroupUps_First Version","border":false}]}
```

I initiated this phase by engaging with key stakeholders, including the Founder, Design Advisor, Product Advisor, and Product Manager, to discern the specific problems requiring resolution.

### **Areas of focus**

> "The colors were muted and felt sterile compared to our previous landing page. I'm the Founder and I haven't even read the headlines. The copy is difficult to scan quickly" - Founder, Yasin Abbak

> "Start from scratch and develop basic brand guidelines before tackling the landing page design. That way you can guide the rest of your decision making." - Design Advisor, Susannah Hailey

> "Dentists need to see people like themselves on the site. That way they know this site if for people like them and could help them in some way. " - Marketing, Co-founder, Melanie Diezel

We also analyzed site analytics and saw that users were spending <1 minute on the site and not navigating to other pages. This was the piece of data that made me realize that the landing page needed more character to draw attention and retain attention so that customers could discover our product offering.

### **Goal**

The objective was to reimagine the landing page, establishing a cohesive brand identity resonating with a new target audience: dental practitioners. The overarching goal was to facilitate better connections with a specific demographic—**freshly graduated dentists looking to open a new practice**—aligning the website's design with the company's refined business focus on catering to clients making substantial large equipment purchases.

## **Phase 2: Design Exploration + Studies**

### **Balancing professionalism with an engaging visual presence**

This phase involved detailed exploration in several critical areas to develop the brand guidelines. I started with a mood board to guide my design decisions and used them to guide the following areas of focus:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fex4SbhdsRC1p6wRKL3Ya%2Fa467b6d3-24a9-4dab-b186-9351f07684c0.png?alt=media&token=a2a7b08d-ea14-4896-af4e-9dd93de27aa2","id":"a467b6d3-24a9-4dab-b186-9351f07684c0","width":12105,"height":8691,"filename":"GUPS_03.png","type":"image/png","caption":"GroupUp_Visual Mood Board","border":false}]}
```

1. **Typography Enhancement**\
   I introduced two new fonts, Fraunces, an Old-style typeface, and DM sans, which better suited the medical industry. This typographic shift aimed to improve clinical reliability in headlines and body text while adhering to budget constraints.

2. **Visual Mood board**\
   Evolving from free imagery to curated visuals and original illustrations aligned with the audience's recognition and equipment depiction. We aimed to create an engaging visual presence that spoke specifically to our younger demographic.

3. **Secondary Color Palette**\
   Steering away from a predominant light blue color scheme common in the industry, I opted for a darker shade of blue, and a deliberate selection of complementary colors to enhance trust, loyalty, and compassion without compromising professionalism.

These discoveries were instrumental in optimizing design decisions, considering time and budget constraints, expediting the design process, and securing stakeholder buy-in.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fex4SbhdsRC1p6wRKL3Ya%2Fa2b9860a-28eb-4f29-a570-90afd6bb611f.png?alt=media&token=07910258-e7d9-4250-bf53-2b3392f53159","id":"a2b9860a-28eb-4f29-a570-90afd6bb611f","width":5760,"height":3576,"filename":"GUPS_04.png","type":"image/png","caption":"GroupUps_Brand Elements","border":false}]}
```

### **Crafting an Optimized Landing Page Aligned with Business Goals**

Following the establishment of comprehensive brand guidelines, the landing page design process unfolded systematically. My approach was simple — create pockets on the site dedicated to communicating specific messages to the customer and provide the marketing team with ample components to change messages and link out to our product offerings. I started with a skeletal layout and content framework. I presented the following graphic, along with user insights, to gain approval for this next redesign.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fex4SbhdsRC1p6wRKL3Ya%2F0af08b63-4920-42b4-b013-0ff583188bee.png?alt=media&token=9bb1861e-3105-4d6d-a210-cc3f26c7e83f","id":"0af08b63-4920-42b4-b013-0ff583188bee","width":856,"height":1190,"filename":"Screenshot 2024-01-12 at 6.12.37 PM.png","type":"image/png","caption":"Skeleton + Next Iteration","border":false}]}
```

## **Results and Learnings**

The rebranding and website design garnered an overwhelmingly positive response from the internal team, praised for its ability to authentically present our product offering in a friendly aesthetic. It also played a pivotal role in enhancing GroupUp's brand positioning, a significant factor in our next funding phase. This new, balanced visual identity serves as a cornerstone for GroupUp to be acknowledged as a credible entity in the dental community and healthcare space.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FOw16EwrOF2eMPoTE6TeEazXMZ1J2%2Fcasestudy02%2F455504b0-3e64-4d91-85da-02251b761c66.png?alt=media&token=e066efc5-fbd2-4c0c-8e99-9971394fc0ad","id":"455504b0-3e64-4d91-85da-02251b761c66","width":9747,"height":8820,"filename":"GUPS_1-.png","type":"image/png","caption":"GroupUps_Landing Page_Final Mockup","border":false}]}
```

Throughout this project, I gained an understanding of crafting an impactful landing page with speed. A brand guide, I discovered, transcended mere colors, logos, or fonts; it was a set of guiding visual elements that resonated with a specific audience, capturing their attention and aligning with their values.

In an effort to expedite the process, creating a brand new logomark was not pursued. Despite proposing the hiring of a Logo Designer, budget constraints prevented us from doing so. Recognizing the potential impact on our brand presence, if given the opportunity to revisit the project, investing in a distinctive logomark would have been a priority.

GroupUps - Crafting a Memorable Dental Brand Presence Through Strategic Landing Page Design

UX Design | Brand | Web Design

* As a founding member of a VC-backed start-up, I worked with our Product Manager and Lead Engineer to launch an e-commerce website to facilitate group purchasing in the dental industry.

* Developed the corporate brand style guide and spearheaded the design of the company website, ensuring a consistent and compelling brand presence

* Architected a design system from scratch, optimizing designer-developer workflows and reducing time-to-build

* Conducted usability testing, leveraging insights to refine product usability and formulate hypotheses’ that aligned with customer motivations, improving the successful user test task rate from 30% to 85%.

Founding Designer

* Collaborated with the head of product at a Techstars '22 start-up to redesign their fitness business management web tool and video hosting platform

* Advised on UX best practices and contributed to Figma design library development, eliminating UX debt in the existing build and accelerating build timelines, streamlining the design-to-development process

* Developed design library components and CRM features, boosting web app functionality, and increasing user engagement

Product Designer

* Collaborated with Bildr.com co-founder to launch native mobile app, enabling users to send handwritten letters quickly using a no-code app builder with AI writing support

* Revamped MVP for improved usability by restructuring task flows and implemented a comprehensive design system in line with the company's brand guide

* Translated brand vision into digital guidelines/design to ensure a seamless brand experience

* Acted as a connector between key stakeholders, fostering alignment and support for digital design solutions

As the sole designer for a local digital marketing agency, I worked on branding design and art direction for local businesses and start-ups, delivering a variety of interface design and marketing collateral for websites, desktop and mobile apps, and social media campaigns

Trina Le

Projects

Education

Contact