DIY-signer

UX Casestudy-2021

DIY-signer: create your space
While we may no longer be in full lockdown, many still work remotely or generally spend much more time at home than before. The space you live in has always been important, but when your home becomes your office as well as the place you spend the majority of your time it becomes paramount. But the ability to personalize and redecorate from home is limited.
In just three weeks we developed a mobile app solution to this problem.
My Role
Visual designer-user research, UX design, prototyping testing
Team
Alena Kessem, Project Manager
Jason Tran
Matthew Lane
Pablo Caballero
Our process

Research

User research

The main question we tried to answer was:
“What steps do users take when decorating/redecorating a space and how do they feel about the process?”
After conducting 5 interviews we noticed a similar pattern: all users pointed out common blockers such as lack of time and lack of inspiration. At the same time, it was obvious that working from home inclines people to redecorate for one reason or another. We also uncovered that people rarely use digital tools, for example no one mentioned any of the competing interior design apps, however three out of five people directly mentioned that they would love to have a better way of visualizing things within the space.

persona

With user interviews completed, we went on to create the User Persona of Gene Willis, age 32, who works as a Copy Editor.
Gene has an odd-shaped apartment which creates a lot of space constraints so it is necessary to be very cautious about the size and shape of the furniture. Their work keeps them busy; its hard to find time for decorating even though they are tired of looking at the same walls every day.
Building up Gene’s personality based on the real users’ feedback helped us better understand who we are designing for:
a busy professional who probably spends more time at home recently and looking for a quick and efficient way to refresh a space.

problem definition

After distilling pains and gains we were able to finally define our user’s problem.
We observed that Gene struggled with interior decorating because of a busy schedule and lack of inspiration which prevented them from even starting their project. So we asked the ultimate question:
How might we provide interior design enthusiasts with an efficient way to visualize design so they can get to a final look faster based on decreased time spent defining a layout and finding desired items?

Ideation

ideation

During our review of competiting apps, we discovered they lacked the all-in-one functions that we wanted in our app

Core features

With the information we gathered from competing apps, we were able to ideate and decide the two key features of our app:

  1. Getting design suggestions based on preferences.
  2. The ability to share and collaborate on designs with others.
storyboard

To demonstrate our app flow, we created this story board

  1. Gene works from home and is fed up from working in the kitchen. So they want to make an office space.
  2. However Gene realizes that the task is much harder and overwhelming then they initially expected.
  3. So Gene speaks to a friend about their issues, who tells Gene about DIYsigner
  4. So Gene downloads the app
  5. With the app, Gene was able to quickly create a layout, as well as purchase items from the app directly
  6. With their newly designed office, Gene is in a happier mindset and can work productively
user flow

We kept our user flow straightforward, while sticking to our core features to maintain the ease of use of our app.

Iteration

iteration

We first began the prototyping process with the majority of us splitting up and sketching out a portion of the user flow. These were then handed off to one person to create our first low fidelity prototype by stringing them together though InVision. Since the creation process was so broken up, this led to some issues of consistency and ambiguity around certain features during our initial user tests which we fixed by designing our wireframes with the material theme.
For the digital prototype, we focused on onboarding, project creation options, workspace features and social and collaboration options. Our onboarding process included an animated splash screen as well as some coaching screens as well as a preferences quiz and an overlay for the home screen explaining how to create a new project.
There are three very in depth methods for creating a project: using a template based upon the style and type of room being designed, using a camera to capture the walls of the room being designed, or by manually entering in the room’s dimensions.
Once in the workspace we are able to toggle between a 2D and 3D view of the room, add furnishings to the room which additionally links to online listings for the furniture, invite other users to help you design your workspace through email, and share your design with other users by publishing it to the shared designs page.
Through our next iteration of user testing we discovered that we had some dead end screens or screens that couldn’t be accessed again if skipped the first time, such as the personality quiz, so we added a back button and a few additional screens like the settings page.
We also worked to bring the digital model up to high fidelity by adding pictures and copy writing over old placeholders.

features

During testing we had users complete a series of tasks. We started by having them navigate through the sign in experience, then we had them go through the process of creating a new room layout, and lastly we had them share that room.
During our rounds of user testing we quickly discovered a few huge design oversights.
The first was the navigation. Some users found the initial navigation to be a bit confusing as the home and shared page looked the same as well as the bottom nav bar always being the same color no matter what page you were on. We fixed this by having it change color depending upon what page you’re on to more clearly show the user where they were. We also opted to add a label to the create a room button to reduce confusion with the purpose of the FAB.

features

Secondly, users found our use of the heart icon confusing.
Most users associated hearts with liking or favoriting things, not as a share button.
We fixed this by changing out the heart for the more standardized share icon.

Prototype

Figma Prototype
process

Overall we were happy with how the app came together, especially with the limited time frame.
If we have the chance to improve upon the work we’ve done we’d like to:

    • Increase the overall fidelity of the app
    • Attain brand partnerships
    • Enhance the interactivity, copy writing, and visual experience of the UI