Digital Alchemy: iOS App

DA_App_Header_shot-caucasian-woman-s-hand-holding-generic-mobile-phone_crop_web

Role
Lead Product Designer

Scope of Work
User Research, iOS App Design, Prototyping, UX Design, UI Design, Visual Design, Interaction Design

Digital Alchemy uses the power of mobile technology to connect house hunters and homeowners with trusted financial professionals. This white label bank iOS app allows users to discover new real estate opportunities, then guides them through comparison shopping for mortgage rates and applying for a loan.

Duration. 9 months, completed in 2017

Opportunity. Digital Alchemy is a white label financial product for real estate brokers and agents. It non-intrusively guides home owners and house hunters through each stage of the home financing process with in-depth information uncommonly found in tools for mass markets. For house hunters, this means less time spent hunting down agents' and loan officers' contact information or sifting through emails. For agents and loan officers, the app provides a direct connection to clients, while guiding them through a simplified experience, reducing repeated questions and back-and-forth communication.

Approach. I worked directly with the executive team. They requested targeted support to validate their product offering for three audience segments, explore UX and UI design enhancements to their existing app, and create a system of matching collateral and branded app themes customized for each financial institution. In addition to conducting user research, I proposed a plan to improve the app's readability and establish the interactive experience of launching the white label app for different brands. I also provided prototypes to present to prospects to help close deals.

Outcome. Digital Alchemy was able to launch their app with multiple financial institutions. They sold their company and suite of products three years later.

User Research

Portfolio DA App Feedback@2x

Surveys

I emailed a 9-question survey to a group of pre-screened participants, all of whom owned an iPhone and had experience with real estate apps. This included current renters, current and former home owners, and those who had invested in multiple properties. The surveys revealed differences in how they approached the home-buying process, and their comfort level for using an app to communicate with agents and loan officers.

User Interviews & Usability Testing

To learn whether the existing screens and flows were providing adequate information, I conducted in-person and virtual usability tests using a prototype of the current app design. The feedback drew attention to readability issues, and highlighted the information different personas tended to prioritize first when searching for properties.

As always, speaking with participants directly provided a wealth of information about how they preferred to use technology in their property search and engagement with real estate and financial professionals. For example, investors who were more familiar with the real estate process strongly preferred viewing additional fine-grained financial details, and therefore preferred accessing this app from a larger screen.

Portfolio DA App Feedback - Usability Testing@2x

Before. Landing page and property details page

Customer Journey: Finding a Desirable Property

A house hunter's journey to find a property is long and meandering. This meant that the app needed to be flexible enough to account for the number of times a user may need to research properties before they were ready to put in an offer, or, in many cases, another offer.

Assessing Property Financials

Keeping an eye on interest rates is top-of-mind for house-hunters. I explored a few design concepts that would allow users to cycle through saved mortgage rates without having to navigate through the app to get to them.

Summit Cash to Close May 2017

Dynamic sliders. Users could explore financing options based on their desired downpayment.

Digital Alchemy Summit Cash to Close Total Expanded

Cash-to-close. Cash to close is a complex set of calculations, so scrolling is required to see it all (hover to scroll).

Summit Saved Loan Estimates

Saved for comparison. Weighing the pros and cons of each loan was made easier by consolidating saved estimates in one place.

Discovering Mortgage Options

Keeping an eye on interest rates is top-of-mind for house-hunters. I explored a few design concepts that would allow users to cycle through saved mortgage rates without having to navigate through the app to get to them.

My Account My Mortgages Font Updates

Saved mortgages. The ability to save mortgage rates made it easier to shop, compare and revisit options.

Digital_Alchemy_Group 158

Expanding tab bar. A long-press would animate to display mortgage details, and allow the user to cycle through a few saved mortgages.

Digital_Alchemy_Tab Bar My Mortgages Summit Opt 2

Stock-ticker style mortgages. This treatment allowed users to glance at interest rates as they scrolled across the screen. They could drag to view previous and next rates.

Messaging

Discussion threads support conversations with verified loan officers assigned via the app, as well as personal contacts, such as a spouse who may need to co-sign documents. Images, property links and documents are consolidated from messages in a separate area for easy reference.

New Message Type to Search Contact

New Message. Contact names would populate as users typed.

Digital_Alchemy_Discussion Landing

Message inbox. Arranged with most recent messages on top.

Discussion Contacts - Search Agents

Contacts. Loan officers' images were automatically imported, and were used to help build trust.

Digital_Alchemy_Discussion Contacts Copy

Contact search. Dynamic search made it faster to find contacts by typing the first letter or two.

Digital Alchemy Discussion Shared Empty State

Shared—Empty State. Until property links or documents are shared, this is displayed.

Digital_Alchemy_Discussion Properties 3 Msgs

Shared Content. Both property links and documents could be communicated in-app, cutting down on cluttered email inboxes.

Digital_Alchemy_Messaging Archived Animating 1

Message archives. Discussions can get long, so the app archives them by month. Tapping on the count unfurls them for viewing.

Digital_Alchemy_Discussion Message Thread wAttachments

Unarchived messages. After a session, the messages archive again to keep threads tidy. (hover to scroll)

Digital_Alchemy_Discussion Shared

Built-in organization. Important content is consolidated in one place keeps all parties organized throughout the process.

Digital_Alchemy_View Shared File Portrait

Save time uploading. Rather than using a scanner, users could take pictures from their phone and upload important documents to keep things moving.

Digital_Alchemy_View Shared File Expired

Automatically locked content. As an extra security precaution, sensitive documents could be set to expire after a number of days.

Mortgage Application

The app drastically reduced the burden of finding properties, gathering and comparing mortgage estimates, and hunting down loan officers' contact information. Once a house-hunter found their ideal property, the app made it convenient to connect them with a loan officer directly to begin their mortgage application.

Convenient in-app messaging. Rather than having to hunt for a loan officer, users could simply click a button to be connected with one in-app.

Digital Alchemy Loan Application Request
Digital Alchemy Contact Loan Officer Modal

Recent Threads. If a discussion had previously been initiated, the thread would conveniently appear above the message box so users didn't accidentally contact multiple loan officers.

Loan Application Status. Once an application is submitted, house-hunters can see the status as it moves throughout the lengthy approval process.

Digital_Alchemy_My Account wLoan Application In Progress
Digital Alchemy Mortgage Application Status Rev

A face to go with a name. The loan officer's portrait appears next to the status bar to reassure the user they're in good hands.

Digital Alchemy Mortgage Application Status Filled

Confirmation. Once the loan is approved, a confirmation message is displayed, and the loan application process is marked complete.

Chalkdoc: Web App

ChalkDoc Hero 1440@2x

Role
Lead Product Designer

Scope of Work
User Research, Launch MVP, Visual Identity, Marketing Website, Web App, Illustration

ChalkDoc was created by a teacher who was disenchanted by the canned lesson-planning tools on the market. He decided to build tools that both students and teachers can enjoy.

Duration: 8 weeks, Completed in 2015

Opportunity: ChalkDoc's founder wanted to create a completely customizable lesson-planning app to accommodate teachers' tiny budgets and limited time. The tool features simple, streamlined functionality and access to relevant and entertaining questions to engage students' hearts and minds. While other apps generate non-editable worksheets, ChalkDoc gives teachers control over the specific kinds of problems they know their students need to work on most.

Approach: My work with ChalkDoc started with brand and product positioning through market research and user surveys. I connected the founder with an engineering team, and developed a simple visual identity as a foundation for a consistent look and feel to extend across their responsive marketing website, worksheets and web app as they experimented and scaled its functionality. I provided illustrated assets, a mini design system for the web app, high-fidelity wireframes, and templates for the downloadable worksheets.

Outcome: Using the provided assets and foundational user flows, the ChalkDoc team was able to scale the product across multiple iterations without requiring additional design work. The software continues to provide value for thousands of users many years later.

User Flow: Creating a Worksheet

ChalkDoc_Create_Worksheet_Flow_Crop

Create Worksheet Flow - Iteration 1

Since the final output was intended to be a printable worksheet, the interface was designed to provide a preview of the worksheet as the user added their desired content. The worksheet title, page numbers, and a space for students to write their name and date, were auto-generated to keep things organized.

1. Create New Worksheet

Create New Worksheet

2. Add New Section

ChalkDoc_New Worksheet Edit Section Simple Configure

3. Configure Section - Advanced Options

ChalkDoc_New Worksheet Edit Section

4. Worksheet Preview (hover to scroll)

ChalkDoc_New_Worksheet_Layout_Filled

Create Worksheet Flow - Iteration 2

After reviewing and testing different options, the engineers suggested some simplifications to reduce the lift. Displaying "pages" in the preview proved to be more complex than it was worth due to the varying lengths of questions that filled an unpredictable amount of the page. Additionally, rather than printing directly from the app, teachers were offered the option to "download" the worksheet and the answer key separately, and share the worksheet via email.

ChalkDoc_Create_Worksheet_Flow_Iteration2_Crop

While keeping it simple was the number one priority in their early days, I made sure to bring out the approachable charm of the brand through custom illustrations and playful copywriting.

ChalkDoc_Library_wBanner_Revised

I built a marketing website for the founder to edit as needed, establishing a simple design system, and providing a series of illustrated assets to flesh out the look for the website and within the app itself.

Chalkdoc Illustration Coffee
Chalkdoc Illustrations Problem Types

The Final Product

After conceiving of the initial flows, and handing off the wireframes and mini design system, the founder and engineers continued to evolve the platform over time to include an increasingly complex library of swappable equations.