The Betty App Prototype


code, ui, ux, visual design

The Problem

A stylist friend wanted a branded address app for her salon, but didn’t know where to start, and invited me to help. She envisioned this as something stylists could use to keep track of clients and their hair history. This required some trade-specific inputs like color formulas and hair texture, which weren’t built into most address book apps.

The Solution

I first made some Photoshop wireframes to help show what the user flow would look like.

UB-wireframes

I chose a color theme and font based on both her website¬†and her stylish salon (full disclosure: I’m a client!). I wanted it to be simple, but capture a little of the playful and feminine style she’d chosen for her branding.

betty-mobile-small

I then built the prototype using Ruby on Rails, jQuery mobile, and SASS.

The Result

Ultimately, the stylist decided that she wanted a native iOS app, and the result was FyleStyle. My worked helped her envision what was most important about branding, versus a generic interface, and to understand the difference between web apps and native apps. Personally, it was an eye-opening experience to build something from conception to code for the first time, and it was definitely a fun way to expand my skills! Demo here, repo here.