From Zero to Prototype in 5 Days: Seven Lessons Learned While Designing an App
Earlier this year I completed a 1-week immersive UX Design course hosted by General Assembly (highly recommended for all, even if you’re only remotely connected to digital design). Over five exhausting & awesome days, my classmates and I learned by doing — my favorite kind of learning — and I ended up designing mobile app called BeesWax.
What is BeesWax? It’s a desktop and mobile app that lets people organize their financial details in one place. Lots of apps & services do that, but BeesWax is designed specifically to help non-financial widow(er)s navigate their family finances.
In this article I’ll share what I learned/reinforced during the course, as well as my thought-process as I traveled the path from “blank piece of paper” to “functioning prototype.”
Up front I’ll give you the most important lesson I learned that threads through all seven I’ve listed below:
As is true with most things in life, the right mix of humility and confidence is the best tool you can bring to the UX design process.
Other tools used: Sketch, InVision, Adobe Illustrator, Draw.io, Optimal Workshop
1. Good UX design tackles a human problem.
As we began our class, our instructor encouraged us to start from a problem we were passionate about solving. So I resolved to tackle a very real problem in my own life — one involving my family’s finances.
A scary thought has often crossed my mind while paying bills and updating our family budget:
“Oh man, my wife would have no idea what to do with all of this if something happened to me.”
Since I’d spent a lot of time worrying about this — and since I’ve learned in my life that my perspective is usually not one-of-a-kind — I found this a worthy problem to address. Certainly there had to be a better system than the tedious and arduous process of writing it all up in a Word document. Not to mention the fastidious work of keep it updated as figures and goals shift. I started doing exactly this so I know it’s not fun, in case you were wondering.
But maybe I’m weird. Maybe no one else cares about this. So my first task was to see if, in fact, others shared this problem.
2. Talk to the user.
UX design without research is just UI design. If we don’t zero in on the user and the problem they are trying to solve — not the problem we think they’re trying to solve — we’ll be making uneducated guesses on how to do design their experience.
So I talked to a bunch of people.
I harkened back to my customer research days and designed a questionnaire to see if anyone had ever thought about that problem, if they even think it is a problem, and if they have any plans in place to help solve it. Here are some of the things I heard:
“My husband wouldn’t know what to do!”
“I don’t really talk about our finances with anyone, not even [my wife] very often, so yeah… she would be lost.”
“I’m sure my wife has something prepared for me… probably… right?”
At some point during the discussions, every interviewee — even unmarried folks — identified this as a problem: that their closest loved ones would have a financial mess to sort through if they died unexpectedly.
Conducting this research early on was pivotal to the outcome of my project and really served as its foundation. In an affinity mapping exercise, I wrote down meaningful quotes from the interview and grouped them in similar thought categories. This helped me center on the user and restate the problem in a more meaningful way:
How can budgeters help their family navigate finances even if they aren’t around?
So I set out to do just that: help family finance managers qualm their fears. I wanted to start sketching out screens and dreaming up cool UIs! Let’s do this!
To my dismay, we were instructed to research direct and tangential competitors as our next step. I was annoyed at first, thinking it wasn’t going to change my direction much, but it turned out to be a foundational & fruitful exercise.
3. Others have also tried to solve your problem.
When I had worried about this problem personally, I remember checking around the internet to see if I could use someone else’s service.
The choices were sparse.
There was only one company who specialized in preparing your family in the event of your death (Everplans). However it is too broad in scope — focusing on much more than just financial matters — and it is difficult to use while on the go.
Looking at the competition illuminates what to mimic, what not to mimic, and what gap in the market you want to fill. While I was skeptical at first, this analysis was quite useful in helping me identify the target for my product.
Now I can start sketching my prototype, right!? Wrong. Good UX design starts with the user, not the sketches.
4. Personify your target user.
This project reminded me that empathy is everything in UX design. While going through the process of creating this app, I needed to constantly refocus on the user and their goals as they engage with the app.
Enter the Bella Budgeter persona.
Bella loves budgeting, loves staying on top of her family’s money, and loves taking this burden off of her husband (Indifferent Dan). However, she recently had a near-death experience that forced her to seriously think about — among many things — the financial mess she would have left to Dan.
It’s all about what works for you as a designer, but creating the Bella Budgeter persona with a picture was pivotal for me. I literally had her face in my mind while designing, always refocusing me on making user-centered design decisions.
5. Tell the user’s story, map the user flow, and THEN start sketching.
As you can probably tell by this point in the article, I have a problem of opening up Sketch or Adobe xD and just going to town, making all of my design decisions on what I undoubtedly KNOW is best for users and for the product.
No need to map out the user’s journey. No need to think about their story before they get to my product. No need to test ideas. Right?
Of course I was wrong about all that. This class showed me the value and agility gained by starting with a block of granite and chiseling away. So often I just want to guess at the final sculpture because I think I know what’s best. In the end, humility wins.
Through my internal grumblings (I still hadn’t fully come around), I drew storyboard pictures on sticky notes with Bella playing the key role in the story.
These storyboards led to user flows (tool: draw.io), and my best guess at what might be the happy path for Bella Budgeter as she uses the app.
Next I started sketching a paper prototype, creating screens based on the happy path in the user flow.
BeesWax was starting to come alive! The natural next question to answer was, “Will the concept make sense to users?”
6. Test, learn, and iterate. Repeat.
One of the most powerful things I learned from this course is the value of feedback in early stages of design. From now on, I will test every assumption that I can — as early and as often as project timelines will allow.
For this project, I first tested my information architecture (tools: Optimal Workshop & draw.io) surveying my classmates, friends and family with a card sorting exercise. This exercise is great because it makes users tell you how they would organize all of the information/tasks they would encounter in your product. As a result I ended up with different categories in my app than I would have had otherwise.
A group of minds hits closer to the target than does one.
Coincidentally, this testing also yielded the brand concept for the app. While reviewing feedback I simply saw that everyone had their own variations of organizing their finances. Their business. And I want the product to convey order and consistency. So it kind of just fell together in my brain that way, and “BeesWax” was born.
Next I tested my paper prototypes with classmates, watching them tap and struggle through my poorly drawn buttons and early UX design. This yielded new concepts and a gray-scale wireframe prototype (tool: Sketch).
At the same time, the BeesWax brand started to take shape with the hexagons representing distinct but complementary parts of the same honeycomb — just as various accounts combine to complete a family’s financial story.
After another round of testing and learning, yet another gray-scale wireframe emerged which accounted for more feedback and incorporated some interaction design (tools: Sketch & InVision). Before designing the high-fidelity prototype, I harvested one more round of feedback by testing the 2nd gray-scale prototype.
Here’s some of what I learned through out the various rounds of testing:
- Primary action button wasn’t prominent enough
- Category labels are too vague
- Misleading tab bar icon/label
- “Menu” was an unexpected favorite attempted tap
- Tab bar doesn’t need to persist on every screen
- Use more language for prompts. “What information would you like to add?” versus “What kind of info?”
As a final step in the week long project, I created…
…which includes a layer of visual design, more interaction design, and some data visualization that adds to the story and complements the brand concept. (tools: Sketch, InVision, Adobe Illustrator)
7. Digital products are never final.
Of course BeesWax isn’t even close to final. But even once the product is shipped, that’s the just beginning. That’s when the user research really ramps up. If I could test, learn, and iterate on BeesWax in the wild — now that would be a fun project.
Even before shipping BeesWax, there are so many opportunities for next steps. For example:
- More personas. Is the experience optimized for a single person or a widow(er)? There are a lot of tweaks we could make to personalize it in this way.
- Bank account sync. Let users enter their bank account (or other account) credentials for two reasons. One, then they wouldn’t have to enter all of the details of the accounts — BeesWax would pull it all in from the bank. Two, this would allow for automatic syncing whenever a new account is added, balances change, etc. with that institution.
- Password management. There’s a lot of dreaming that could happen on this front. The simplest dream would be that you users of a password manager (e.g., LastPass, 1Password, etc.) could authenticate with through BeesWax, thus granting access to the password to their loved ones if they’re gone. The biggest dream would be that you authenticate through BeesWax and the app finds all of the institutions where you have accounts, logs in, pulls back all of your account info and you don’t need to do anything else!
In summary, my advice to myself and all UX designers in seven pithy phrases:
- Start with a problem
- Make user research your foundation
- Study your competition
- Personify your target user
- Story before sketches
- Test, learn, and iterate early and often
- You’re never done
Lastly, to reiterate my key takeaway, the right mix of humility and confidence will win the day. That said, one without the other isn’t so productive so be sure to bring both!
Go design awesome experiences!
Special thanks to my General Assembly instructors Reggie Wilborn and Jarrett Coger, and to my classmates for guiding the project throughout the week.
