UX, Mobile App Design, Prototyping
UX, Web Design
Service/Business Design, Business Management
UX/UI Design
UX Research, UX Design
UI Web Design, Branding
Leash is a solo project for my development as a product designer. I am particularly interested in mobile applications with complex, back end business demands. A dog walking app is just this - the user must be able to outsource the task with as much ease as requesting an Uber or Lyft - but is for the most part blind to the execution of service. I focused on the primary interactions a user would have within the mobile app and sought to improve the experience from a number of different angles. See my process below.
iOs
An on-demand mobile dog walking application that can safely employ someone to do the chore for you.
1 week
Omnigraffle, Axure, Sketch, Marvel
With any project, I begin with the question - How is the competition approaching the challenge? This sparks an in-depth competitive analysis, examining the functions from a wide range of applications.
MAP: Strictly a visual aid that helps user see number and location of potential services out there, ETA of chosen servicer, and progress during execution of service.
BROWSE SERVICERS: Enables user to view all potential services and read reviews/ratings before committing. Specific to apps that empower user to choose servicer.
ADDRESS INPUT: Necessary piece of data the system must acquire, serves very different function than the map.
To gain insight into the function, structure, and complexity of a dog walking app, I performed an extensive analysis on the league leader - Wag. Below you can see the screens within Wag and a fleshed-out task flow.
After digging through Wag, I found what I believe to be the primary processes a user executes within a dog walking app. They are detailed below with their accompanying parts. For purposes of simplifying this build - I solely explored these primary functions.
With the REQUEST WALK function, you can see me initially play with MAP vs. NO-MAP variations. After many sketches, I concluded that the required screen real estate to house a map was not worth the compromised UX. Thus, I pursued a no-map variation (on hover.) In this concept, the user’s dogs, walk types, and pickup address are created and programmed in Account Setup. Here, you see DOGS and WALK TYPE formatted in a segmented control interaction, with ADDRESS autofilled. The NOW/LATER toggle would trigger the iOs calendar ticker. Upon submitting this information, the system is able to determine available walkers for that time period. This is another reason to not incorporate a map in REQUEST WALK — it requires this data first to then accurately visualize the available walkers. I can 100% understand aesthetic arguments for including a map - and am working on that variation as we speak.
From the start, I understood that the CHOOSE WALKER section would require two screens - BROWSE WALKER and WALKER BIO. For the BROWSE WALKER section, I played with a list view (see middle highlight) and a swipe interaction (similar to what you find in TaskRabbit.) I found the swipe experience to be more mobile-friendly. The order of presented walkers is determined by an algorithm that factors in the walker’s distance away/ETA from the pickup address with his/her ratings. While the user can swipe left and right - upon tap, the user is submerged into WALKER BIO - where he/she can watch a video of the walker, read reviews, and ultimately BOOK WALKER for the specified Date/Time/Address.
In TRACK PROGRESS, the user is able to see a map of the area (left highlight.) From here, the user can follow the route of the walk, while also keeping tabs on the walker’s progress, completing tasks for the specified walk type. At the top of the screen, the user is able to switch to a CHAT FUNCTION (middle highlight) - where he/she can communicate directly to the walker. This is where the walker, too, could send pictures of the dog during the walk.
Leash user Steven would like to schedule the “PM walk” for his dogs Buddy and Lucky tomorrow night - November 24th 2015 at 7:00 PM. He wishes to choose the highest-rated walker, be able to chat with him/her during the walk, and see live updates during the walk.
Urban Gleaners is a non-profit organization based out of Portland, Oregon. Their mission: to help alleviate hunger by collecting edible, surplus food that would otherwise be thrown away and redistributing it to agencies that feed the hungry. I was recently connected to them for a website redesign project. Below are the steps I take when redesigning a website.
From there, I take the time to map out the current site flow. While the architecture deals more with content, this helps me to visualize how visitors are traveling through the site. When doing this, I specifically look at prominence --- and what areas of the site can be improved.
Created with Omnigraffle
Before running too far with this information, I like to gather insight from those most closely involved in the operation.
My discussions with the client begin early. This helps guide me in the most efficient direction possible.
With Urban Gleaners, it was established that the site can do a better job at accomplishing a few goals:
Bright-colored CTAs placed at the top of the navigational hierarchy help convert site visitors to donate or volunteer.
Being that most nonprofit organizations have a cause worth showcasing --- bringing awe-inspiring visuals to the forefront helps pique visitor engagement.
Aligned with the thinking behind photos, many organizations have video content on their site to further increase engagement.
This final deliverable helps me gather the pain points of the current site and strategies to improve it moving forward.
EVO 11 // Urban Gleaners, Bringing Food To Those In Need from Stillmotion EVO Experience on Vimeo.
Stillmotion created a top-notch marketing video. We decided to make this the landing page of the site. See below.
Being that the goals for this site are mostly geared toward raising awareness and donation/volunteer conversion --- I sought out to create a one-page scrolling site. Urban Gleaners is not content-heavy enough to require a layered hierarchy, and they are very active on social media --- so much of the day-to-day information messaging is stored on those social platforms versus what would be considered requiring website-specific messaging.
Below you can see the new flow through the site.
We are now working on development. Stay tuned!
Designing a design-your-own doughnut shop
During 2014-2015, I led the launch of a new food concept in Arizona. I was responsible for the design and implementation of every system of the business - store layout, digital marketing, operations, sales, customer service, staffing, training, payroll, supply chain management, product development - you name the vertical, and I was absolutely committed to perfecting it. In just one year, we grew from zero to five stores and over sixty employees.
This is case study illustrates the business design work I am capable of producing.
Empowering the customer to customize while keeping the business demands in mind
To provide the customer with a simple and empowering ordering process that encourages customization and trying different flavors.
The business’ ideal (most profitable) order is a dozen units - that is potentially 12 separate customizations for the customer to have to endure.
An order ticket that presents 2 choices: Front: “Choose From Our Favorites” or Back: “Create Your Own.”
With this solution, the customer solely needs to quantify how many doughnuts he/she would like to order from the “Favorites” flavors. If the customer wishes to customize, he/she can flip the order ticket over and write out the desired doughnuts.
Designing stores for the customer but efficient for the business
To design stores that route customers in an organic and purposeful way, while keeping the business demands in mind.
What feels best to the customer typically can sometimes not align with what is best for the business.
Implementing an order ticket counter upon entrance, pay-first-then-watch traffic flow, and pickup order station near exit.
With this solution, the customer makes a lap through the store, completing a series of steps. With this design iteration, production efficiency on the business end increased 36% with a 15% decrease in labor spending.
Visualizing responsibility responsibly
To create a visual system of assigning responsibility and holding accountability.
Dividing labor is an inexact science that produces HR issues.
Pictured is the Separation Of Duties System (SODS.) This was created from scratch by Danny Luber.
With this solution, the shift manager assigns each employee to a specific job title. Each job title correlates to an area of the store and an accompanying checklist of tasks to be completed within that area. Each employee is solely responsible for his/her checklists and area. Area coverage & checklist depth is calibrated according to traffic --- i.e. the slower the traffic, the job titles to own, areas to cover, and checklists to complete.
Scaling the business in the most efficient, duplicable way
To create an operations manual that could be a reference document for stores and guidebook for future expansion plans.
Finding the time, personnel, and technical skills to write, compile, and create such an all-encompassing document. Those with the knowledge of the operation typically do not have the time.
Pictured are screenshots from the operations manual that I created. While this document remains confidential, it is a large contributor to Fractured Prune’s success.
Ensuring that all customer touchpoints are memorable
To provide a service experience above the level of the product experience.
The exposed nature of a food business makes it particularly vulnerable to be criticized (mostly on online forums.)
All employee-facing systems, meetings, and paperwork preach customer service as the primary concern.
Pictured on this page are some of Fractured Prune’s online reviews. What is typically considered a space for negative commentary on the service has been a place for positive reviews with Fractured Prune Doughnuts.
Ensuring that all customer touchpoints are memorable
To create a brand that has a strong presence in the digital world.
Creating compelling digital content requires creativity and technical craft.
Knowing the importance of having an Internet presence, I committed myself to the entire online marketing effort.
Pictured are various related screenshots. Consistent production and engagement on all social media platforms and frequent email campaigning were the keys to Fractured Prune’s online marketing success. While I no longer manage the social media accounts , you can view my work in the archives - Facebook, Twitter, and Instagram
Making career transitions stress-free and highly productive
PURSUITS is a startup based in Chicago currently in beta version. Its purpose is to provide an organizational hub for those applying to new jobs/pursuing career transitions. The web application follows a similar interaction to that of Trello in which the user clicks and drags customizable cards between categories/columns.
Pursuits came to us for UI, branding, and website design help. With a focus on simplicity and ease of use, we got after the UI and IxD efforts.
At the time of this project, Pursuits was in essentially black-and-white beta version. Thus, objective #1 was to bring style tiles to the table for UI and branding inspiration. Pictured above are 3 style tiles/guides I presented to the CEO of the company.
After my teammates and I presented, Pursuits directed us to focus in on the orange and green colors. Pictured below is the interface I created.
Below you can see the interactions a user can have with the the web interface.
I created this video using Keynote's animation effects.
Developing a heart-focused wearable technology
To simulate a start-to-finish product development cycle, we at DESIGNATION developed a mock product, the Pulseband. The Pulseband is a wearable technology that measures users’ blood pressure, heart rate, steps, sleep patterns among other vitals. The purpose of this project was to define the scope of the the Pulseband’s capabilities and develop a mobile app alongside those functionalities. Over the course of the project, we implemented various product development methodologies such as scrum and the Google 5-Day Sprint.
As leader of the UX effort, I conducted a robust discovery phase to gain industry insight, understand product line potential, and identify key areas of focus for user research. I interviewed potential users of the Pulseband and subject matter experts (SMEs) in the medical and cardiac-related fields. I synthesized my findings by producing deliverables that could be used by other members of my team. On the IxD side, I helped developed wireframes and prototypes, conduct user testing, and iterate on our designs based on user feedback.
With such a medically focused product, Step 1 was familiarizing myself with the vocabulary and landscape of heart disease, cardiac biometrics, and heart-monitoring devices. What biometrics need to be consistently monitored for those with cardiac disease? Which numbers are predictors of an imminent emergency? Do those metrics fall within the scope of the Pulseband’s technological capabilities?
Next, I interviewed subject matter experts and potential users to hear both sides of the story. To the medical experts: What are the challenges you face treating heart disease patients? And to those with heart disease: What are your frustrations with the current heart-monitoring/heart-health solutions?
Competitive analysis spread across a range of industries, technologies, and brand types. Fuelband, Holter, AliveCor, Jawbone, etc. - What metrics are each of the competitors tracking? Where is there opportunity for Pulseband to differentiate itself? How does that shift who the target consumer is for Pulseband? And how do we build a product accordingly?
With this research gathered, the next step was to synthesize. Sketch, draw, storyboard, information architecture, application maps - how do we present all we’ve learned in the best way possible for product development....
These user personas are realistic representations of key audience segments for your the Pulseband. The goal of these personas was not to represent every possible audience member but rather to address the major needs of the most important user groups. Through the synthesis of my research, I found that these characters (with these goals and stories) most accurately depict those who are potential Pulseband users.
From our research, we found that any increase in physical activity will result in improved heart health. We let this finding dictate much of our beginning ideation, fueling ideas that would inspire exercise and prompt concern for health. Pictured above is the web app wireframe I created for our original idea — a life coach/trainer in which users would log in on desktop, customize cards from an all-encompassing list of categories, and then receive notifications/reminders on their smartphones and Pulseband at the appropriate, specified times.
After user testing, it became clear that this idea was too robust. While users appreciate the ability to customize everything from medicine reminders to exercise encouragement, they were overwhelmed by the immensity of such a platform.
At that point, we as a group decided to pivot to a goal center model, in which users would automatically be opted into challenges and not have to worry about choosing and customizing each component to their liking.
Pictured above are sketches of wireframes I produced. Pictured below is an application map that outlines the application direction. From here, the wireframes were handed off to my IxD and UI teammates.
How would the application function in real life?
As part of the UX process, I drafted specific scenarios that illustrate times in which the Pulseband could be used. The video below details two scenarios, and all of the screens/interactions a user would experience.
I created this video using Keynote's animation effects.
Xtensio is a web application born out of the product design studio Fake Crow in Los Angeles. What was once described as a startup-specific tool -- “Show your investors you have value” -- pivoted to a more broad descriptor — “A toolbox for designers, marketing professionals, and entrepreneurs.” Xtensio started out as just the User Persona module and now currently holds 9 other templates: Startup One-Pager, Lean Canvas, Fundraising Summary, SWOT Analysis, etc. to name a few. These tools have a specific use case — for the person looking to create presentation-ready deliverables without having to do lots of research, sift through templates, or learn illustration software. As part of my application to the Fake Crow agency, I took on the task of designing a new template for Xtensio.
While I had some idea as to what could be a good addition to the Xtensio fleet, I first conducted preliminary research before jumping to any conclusions.For this stage, I spoke to 3 startup CEOs - Jeremy Keeshin // CodeHS, Aaron Fazulak // DESIGNATION , Abhirukt Sapru // Snyffle. I wanted to hone in on a few answers:
What I found is that all 3 CEOs are constantly pitching their business/product and find a never-ending demand to supplement their pitches/email communication with visually appealing documents. After speaking with each of them and debating between a few tools, I decided to design an Experience Mapping Template/Module.
I sought out inspiration from experience maps and user journeys online. As you can see in the image above, there is much variation for this type of document. I began to hone in on what variables are showcased in these documents. From visualizing customers' emotional states to illustrating the business/service blueprint, it was clear that building a tool that allows users to produce these documents would need to be focused.
Once I got an idea for the elements involved in an experience map, I looked to existing tools being used to generate these documents. What I found was that there was a delicate balance occuring -- the two forces at work were how much functionality the user can put in the editor versus what diversity of templates you want to offer. (The more you design around one, the less you can around the other.)
As I began to sketch, I tried to work within the design constraints of the current Xtensio platform. I wanted a v1 to require as little new code as possible.
Once brought onto the team at Fake Crow, I was asked to work more on Xtensio. Day-to-day tasks took on a wide range: more templates, working with the development team, QA-ing the product, writing content & copy.