Perspective-App-Screens-Roof.jpg

Roof App Redesign

Roof App Redesign Challenge

Roof is an app that helps you manage tasks, expenses and co-living purchases when sharing a home together with others. With the rising trend of people co-living to attain a higher standard of living than they might enjoy on their own, apps like Roof can definitely help streamline some of the nitty-gritty process of balancing the book with your housemates.

Role: UX Designer on individual redesign challenge

I was initially drawn to the app for its simplicity and its modern and cleaner design compared to what's on the app store. Regrettably, Roof has been having several problems that left users frustrated with its app experience. As I started to use the app and learn more about its overall structure, it became apparent why users were getting discouraged to use the app as there were severe good intentions that translated to poor execution.

I challenged myself to tackle the redesign of ‘Roof - Home, sweet home’ app as I saw a great heart and character within the app that definitely had a potential to become a great tool for people. With this redesign, I wanted to focus on enhancing the experience of co-living aspect of the app, address the frustrations of the user base while providing a valuable and enriching end user experience.

 
UX Research.jpg

Problem

Roof app, though it showed initial interest from the public with its simple design aesthetic, the user base is not growing, while existing users are struggling with the current version of the app. There is a disconnect from what users expect and what the product provides.

Navigation and primary interactions are done through hamburger menu and add button.

Navigation and primary interactions are done through hamburger menu and add button.

I started this challenge with in-depth dive of app’s core functionality and evaluating heuristics:

  • I noticed that the app has much higher friction in sign up process which asked for address and phone number.

  • Frequently accessing the menu becomes cumbersome to constantly reach for the top and open up those buttons.

  • I also tried completing several tasks within the app and discovered that there wasn’t a clear feedback from completing primary tasks like creating an expense, shopping item and reminder.

  • Language used wasn’t always clear as since words like ‘Reminder’ can come across different from clear actionable words like tasks.

  • One thing that definitely troubled me was that there wasn’t on-boarding materials present on the app to guide users through. I also tried searching from the menu to see if there are any additional information or tutorial gathered but they weren’t present on the app.

  • There were also inconsistency of design language, as reminders showing up with the check box to complete the task but not for the Shopping items.

Followed by the in-depth analysis of the app, I’ve searched through feedbacks and reviews the customer base had given Roof to understand where the majority of the user’s frustrations lie. It was clear that majority of the users that were experiencing bugs were from Android version of the app and iOS version had higher rating (Android: 3.4 vs iOS 4.3). The release cycle were different as well and it was clear that Roof was giving a priority on iOS app first. Below is the feedback users have provided of their experience.

User Reviews of the Roof app gathered

User Reviews of the Roof app gathered

Going through the review, it was clear that my findings were also being voiced by frustrated users who were experiencing high friction in signup process, errors that prevented users from completing the task and no on-boarding information and tutorials were causing people to unable to use the app effectively. After assessing the reviews, I was able to create a persona based on the insights gained from people, creating a target user to apply by outlining the major goals and frustrations.

Persona has been created based on research insights.

Persona has been created based on research insights.

Planning + Scope.jpg

After understanding where most of the frustrations were, I scoped out the project, focusing into three key areas of improving the app experience:

Roof - OG Sign Up.jpg

1. Sign up

There is a huge friction in sign up process. The app asked for too much personal information without the user experiencing the app, not seeing the value in it. The best UX perspective calls for providing a value to the user first then when required, ask them for information at a later time. By giving the options to the users of different ways of which users can signup/login through existing platform they have like Google, Facebook and Apple.

Navigation.jpg

2. Navigation

When conducting a review and gathering feedback of the users, I've discovered that many end users reported difficulty using the navigation elements from menu, adding new items to adding expenses. Drop down from 'add button' and hamburger menu also adds additional step that are hidden from user's view, slowing their time of completing their task.

Roof - Og Home.jpg

3. Information Overload

Listing out all activity was viewed as unnecessary and overwhelming for many people. Users don’t find it very helpful if there are endless scroll of feed overbearing them from the main screens and it can prevent them from coming back to the app.

 

With the three main improvement areas defined, I started to brainstorm key features with MVP in mind.

Features List

Must have:

  • Streamlined sign up process.

  • Improved navigation accessible from the bottom area of the screen.

  • Optimized home screen to only show information valuable to the user.

  • Calendar to track upcoming events and review previous tasks, expenses and purchases.

  • Highlight of spending balances to keep budget in check.

  • Tagging system to prioritize tasks and purchases.

  • Quantity field to keep the user in mind when shopping.

  • Feedback from completing a task.

Nice to have:

  • Setting budget feature to keep track expenses.

  • Group view in different categories of spending from groceries, household items and expenses.

  • Learning tips to help you maintain your home

  • Connection to professionals who can help you with your larger projects

Not needed:

  • AI that learns from your tasks and purchases to provide recommendations

  • Constant update of activities

  • AR purchase visualization technology

Initial Conceptualization and testing on paper

Initial Conceptualization and testing on paper

 

After going through the planning phase, I started to iterate on paper prototypes from the MVP standard. One of the main feature I was testing was ‘bottom sheets’(Examples B & C flow from below image) where the user sees a sheet with a few options at the bottom of the screen and relies on a swipe-up gesture to reveal more options. Additionally, ‘add’ button was also a key interaction that I wanted to test out initially, whether or not to provide copy in context with the (+)add icon or leave it it clean either from the bottom centre or bottom right of the screen(Example C from below image).

Low Fidelity Wireframes: Paper prototype

I continued to iterate, moving toward mid fidelity prototypes by increasing interaction details of how lists, buttons and hierarchical structure of each screen will be laid out. My overall goal during the iterative process was to bring attention to the users of key data, providing important summary and solely valuable information that user will find it helpful. I’ve also experimented on alternative views and grouping to test out to see if the assumption of initial categorization made sense.

Mid Fidelity Wireframes and Screen Flow

From mid fidelity wireframes, I’ve learned that providing additional context for the (+)add button will be more helpful to the user to understand what task they will be performing. I’m also testing to see if providing additional options for the screen via top right options button will work well with the existing bottom navigation and buttons.

My Roof Login MF.jpg

Simplifying sign up

By inviting users use their existing accounts from Google, Facebook and Apple, the sign up process has been dramatically simplified, lower the barrier to entry of trying out the app. I’ve still included email and password input field to freely create an account as well. Here, I am advocating for the user by on-boarding them as painless as possible, providing them the value of using the app first, then ask for personal information later when they wish to make a transaction.

With the high fidelity wireframes, I continued to test out the redesigned UI elements and their interactions building on top of previous iterations. I’ve updated the task cards on high fidelity screens, giving users the option to check off without entering the card view, reducing the steps of completing their task. You can also see the quantity field and category tags more defined to evaluate if the designs work well on Roof interface language. In summery, these high fidelity wireframes visuals the project goal of minimizing efforts from the user and aims to provide them the easiest path to their goal.

High Fidelity Wireframes in Sketch

I’ve also detailed out additional wireframes to showcase the view screen using the bottom sheets to interaction explored during the mid fidelity iteration. By giving users the options to pull how much of the content they want to see from bottom sheet will allow them quickly search through the items and make notes if the need to. Lastly, I tested out in high fidelity of providing those key feedbacks for the user when user completes a task. A top in app notification is there to reassure the user that their task has successfully completed, followed by the list to be updated for the relevant category.

Feel free to click the screen below and test by launch the InVision Prototype.

Thank you!

Conclusion

After going through the challenge, I am definitely more exciting to continue learning about how people are collaborating and sharing at home, embracing the co-living methods. There were several other avenues I’d still like to revisit to explore for future considerations, such as setting monthly budgets, business connection and different ways of grouping purchases in logical categories as the product comes to maturity. Below are those connection cards designed when I was exploring for future iteration. Exploring the value of providing maintenance tips about your home, learning from your habits, linking the right contractor for the user’s future project and repairs. This would not only serve the user but having a business platform would bring in additional revenue stream for the app as well. By providing relevant services to your tasks, consider booking a contractor or repairman right from the app, giving contractors another platform to find potencial clients.

Though the challenge period came to an end, I am looking forward to conducting additional user testing to receive feedback and continue to learn from their insights.

If you made it this far, thanks so much for reading through the redesign process and feel free to reach out and connect with me!