Survey Data in Figma
Furnish This! Mobile App
A mobile app for iOS that scans your space, measures it, and sends you furniture recommendations based on the measurements, and your preferences.
Furniture Shopping is frustrating...
If you've ever bought furniture for your home, and realized it didn't fit in the space, then you are like MOST of the people I spoke to. The idea for this app came from my friend, David. We were gathered for a large holiday party, and I asked the group for a fun app project I could work on. And when David told us his app idea, the whole room agreed IT WAS AMAZING.
The app would help furnish a home, by using a scanner and a visualizer, and help find furniture that would fit in that space
The app would scan your home or space, and show recommendations (based on the measurements and filtered preferences) AND where to buy those recommendations
Problem: One of the biggest issues with furniture shopping, is finding furniture that FITS in your home. How can I help people find furniture that's the correct size and style for their space?
Solution: Design a mobile app that can scan a space using the phones camera, take measurements, then provide recommendations and where to buy them, based on the measurements
My Role: UX Designer and Product Designer
Tools: Whimsical, InVision, Figma, Google, Google Forms, Coolors.co., Unsplash, pencil, paper
Research
Gathering Survey Data
I personally avoid furniture shopping at all cost. But I wanted to understand how OTHERS feel about furniture shopping.
What are the biggest pain points. Do they love it? Hate it? avoid it? What is the biggest frustration? Have they purchased online before?
I sent out surveys using Google Forms & Instagram
I sent the survey to 20 people, and anyone on Instagram that would see my stories
The questions were mostly yes or no questions about furniture buying
It was about 50/50 of those that liked/hated furniture buying and a whopping 75% have bought furniture online
INSIGHTS:
The biggest frustration was finding the correct size for their space
next was the cost of buying furniture
and moving the furniture
Competitor Analysis in Figma
The Competition
While waiting for the survey responses, I started researching the Competition, both direct and indirect. What are they doing differently? similarly? Are any apps using scanning technology?
I searched on desktop, and in the app store for competition, and downloaded any apps I found on my phone
Three massive competitors have a mobile app that also have scanning or a visualizer: American Furniture Warehouse, Ikea & Amazon;
Ashley HomeStore, Ikea & Wayfair also have mobile apps; not the best, and didn't really offer anything special
There were a several local boutique style places, like Modern Nomad, and studio 2b, that offer specialty items but were also VERY expensive
I also check out Facebook Marketplace and Craig's list which are both great places to find unique things, that are usually much cheaper
Who is this App serving?
User Persona in Figma
Meet Wassim
Since I'm not a furniture shopper myself, I felt it was especially important for me to visualize and empathize with someone who does and would buy furniture.
So I created a persona to keep in mind throughout the project. I based much of the persona on David, who gave me the original idea for the app.
Wassim (like David) is a professional, single young man, who is striking out on his own in many ways ( first time living alone and a new house, needs new furniture!)
He doesn't want to spend a lot of time or money finding furniture for his new place. EASY & AS PAINLESS AS POSSIBLE, PLEASE
Wassim has simple, straightforward needs, when finding and buying furniture. And I want the design of my app to support that
User Flow in Whimsical
Wassim's Flow through the app
I made a User Flow in Whimsical, to make sure I was keeping Wassim's needs and goals clear. Where would he go first? Does he know what he wants? Does he browse?
I skipped the onboarding, and made Wassim a return user who already had an account, to save time
I chose to map out his use of the visualizer's filter system, to really show exactly how much the app can help solve the many frustrations of furniture shopping : size, style, price, where to buy, & delivery
The steps Wassim takes when using the app, coincide with the data I collected: Getting the correct size for your space is the biggest frustration
Sketches to Wireframes
First sketches of the main pages
Sketching some ideas
I sketched some of the main screens for the app, to get a better feel for how the app might function. My initial sketches helped me make the app ideas more concrete.
What would each screen have? What's most important to Wassim? How would these screens best flow? Does he set preferences in his profile?
I kept Wassim in mind when I sketched out the main pages for the visualizer, and the filter system
I made 2 versions of the main pages that Wassim would visit
The main differences were mostly in the way to filter; one used a filter when setting up the account, the other filter was added while searching
I chose to have the preferences in his profile because in my mind he knew exactly what he wanted, and this would save him time
Style Guide in Figma
What kind of style...
Gathering inspiration for my style guide is one of my favorite parts of the process. It helps solidify the design ideas that have been swirling in my head from the start of the project.
And makes designing and building the mid-fidelity wireframes that much easier.
I used Figma to put together a Style Guide
I started searching for color palettes using Coolors.co and saved a few that I liked, and narrowed down from there
I gathered free photos from Unsplash
This would be an app for iOS so typography would have specific rules
I downloaded SF Pro onto my PC, but I was never able to figure out how to get the fonts in Figma (watched a couple YouTube tutorials but even those didn't help me figure it out)
I started saving some iOS components from Figma's community that would help when designing the app
Low-fidelity Wireframe in Whimsical
Low-Fidelity Wireframes
I originally wanted to do straight to mid-fidelity wireframes, but I was starting to get bogged down with perfection, and overwhelming myself with the app guidelines for the design.
So I stepped back, and I started with low fidelity wireframes in Whimsical, to capture the basic layout and design I wanted. Not worrying about iOS guidelines yet. Just getting something moving
I put together a prototype using InVision, to move through the app myself (couldn't get a tester)
I skipped the onboarding screens to save time, and focused on the main screens that would be most useful to Wassim's needs
The low-fi and mid-fi Wireframes had the preferences in the Profile; but the feedback from the User Testing was to instead, put a filter in the search engine. So the user search around much easier without preferences being a limitation
The mid & hi-fidelity Wireframes were designed in Figma, and prototyped in Figma
There were 3 rounds of iterations: the main changes were to the homepage, the profile page, the search pages, and the scanning pages
I added more screens, and especially more interactive screens, to show a search, a filter when searching, and progress after scanning
I used the Ikea and the Amazon apps on my iPhone, for references throughout the process
Hi-fidelity homescreen wireframe in Figma
Mid & Hi-Fidelity Wireframes
Once I had a clearer idea of what the main screens looked like and how they would flow together, I started designing higher fidelity wireframes in Figma.
I started with the main screens, and built prototypes also in Figma, so I could get some User Testing done before moving forward.
The mid & hi-fidelity wireframes went through several rounds of iterations.
The main changes were to the homepage, the profile page, the search pages, and the scanning pages
I added more screens, and especially more interactive screens, to show a search, a filter when searching, and progress after scanning
I used the Ikea and the Amazon apps on my iPhone, for references throughout the process
You can check out all the screens I designed below!
Prototypes & Testing
Testing the usability
The User testing was absolutely crucial. There were several rounds of iterations based on the feedback from the testing. I needed to find out where I was sticking and confusing the user... The feedback was clear, direct, and it made perfect sense to me.
I did two rounds of User Testing: The mid and hi-fidelity Wireframes in Figma
I used the same tester both times, sitting next to him as he navigated the prototypes in Figma
Because it was around the holidays, I wasn't able to find another tester.
The mid-fidelity User Test showed me clear areas of confusion, and frustrations
"The UX is solid, but the homepage is confusing... and the scanning should show progress not just jump to the recommendations..."
The preferences in the profile was also a point of frustration.... "it would probably be better to have a filter when you search...it feels like it would be a hassle to keep the same preferences for each search especially if your preferences change with each search."
I took furious notes and added comments to Figma to keep track of all the feedback
I added more screens for the search, overlays for the filters for the search, a clearer homepage, and progress screens after the scanning screen
The last user test with the hi-fidelity Wireframes, went MUCH better; there were still a couple tweaks to add: Logo on homepage (so the user knows where they are), and more tweaks to the filter system to show added filters to search (like "grey sofa")
Next Steps
This project was extremely challenging for me. I had been avoiding mobile apps since my UXUI Bootcamp. The strict guidelines, especially for iOS, felt overwhelming and scary.
By immersing myself in this mobile app project, and giving myself such a strict timeline (one week) to complete it, I was able to prevent much of my usual overthinking. And keep myself (mostly) moving forward.
There were a few times I used YouTube tutorials to procrastinate when it was time to design the wireframes. The terror of the blank page. But I used the UX process (sketching, low-fidelity wireframes, prototypes & testing) to help me overcome those fear-based tendencies.
Although I read Apple's Human Interface Guidelines, and articles about the guidelines, I found rereferring to apps on my own iPhone, the more helpful. The App is definitely NOT perfect. The iOS guidelines were used as best as I could, but there were things like typography (SF Pro), the font sizes, etc... that needs some work.
I learned a lot, and conquered a lot of the fear I had surrounding mobile apps. By the end of the project I a lot of excitement and pride, for all the work I had done.
NEXT STEPS: I want to add more screens to complete the homepage, the profile, filters, and add an extra navigation icon and screen to save "favorites." I also want to get the iOS standards tighter, especially with the typography and points.
NEXT PROJECT: Mobile app for Android