RenoMaven

UX design / UI design / user research / usability testing
Overview
As part of an immersive design course through CareerFoundry, I was tasked with completing a project. I chose to create RenoMaven, a mobile first expert app that connects users to home improvement professionals.
My Role
Sole UX/UI Designer
Duration
3 months
Tools
Figma, Adobe XD, Excel, OptimalSort, UsabilityHub, Paper & Pencil

Watch a demo of the final product:

Design Process

Colored circles describing the design process.
Inspiration
I started the inspiration phase of my process by conducting market research and competitor analysis to better understand who my competitors were and what they did well or poorly.
Side by side competitor analysis of Houzz and Just Answer sites.
Problem Statement & Solution
My findings revealed that there were no well-known, direct competitors to my app. This meant that the potential for RenoMaven was huge. However, this was also its biggest risk (i.e. Why wasn’t there another app like this already?). I sought to overcome this risk by seizing the opportunity and creating an app users didn’t know they needed.

My findings also helped me shape my problem statement and possible solutions. My original problem statement has remained consistent throughout the app’s development, though the solutions have changed slightly as I’ve progressed.
Image showing problem statement and best solution.
User Interviews
I conducted remote user interviews to gain a well-rounded understanding of my users’ needs, goals, and points of friction.  I asked questions focused on users' experiences with home renovation. I then analyzed my users' answers by sorting them into an affinity map to gain overarching insights.

The user research helped me confirm or revise my possible solutions and user stories. From there, I decided to create the app with the following main functions:
Five main functions of the app: 1) Search Topics, 2) Ask Questions, 3) Find Experts, 4) Chat, and 5) Connect.
Conceptualization
Using my findings from the inspiration phase, I created three user personas to represent users with different backgrounds and needs.
Three user personas: 1) Kayla, the young renter, 2) Mia, the urban mom, and 3) Tim, the suburban dad.
User Journeys & Flows
In addition to the personas, I also created user journeys and user flows for the app’s main functions. I wanted to understand how my users would complete a function and what they would need to accomplish it.
Kayla's user journey and user flow.
Site Map
I then created a site map to organize the structure of my app and have a visual representation of the screens and how they relate to each other. I used Optimal Sort to conduct an open card sort with five participants.

The results indicated that I needed combine the Chats and Calls functions under one umbrella function, which I then named Connect. I also renamed Chats to Messages after some participants found the term confusing.
RenoMaven site map.
Wireframes
Next, I started sketching low-fidelity wireframes with pen and paper. I moved on to Adobe XD for my mid- and high-fidelity wireframes. Throughout the different fidelity stages, continuous iterations were made to improve the app’s functionality and UX.
RenoMaven wireframes.
Iteration
As a first step in the iteration phase, I used Figma to create a clickable prototype.
Image of RenoMaven prototype links, done on Figma.
Usability Testing
I prepared for usability testing by creating a test plan and test script to ensure an easy and smooth testing experience for my participants. I conducted moderated remote usability tests and was able to gain a lot of valuable insights. Using my findings from the tests, I created an affinity map to analyze the results and a rainbow spreadsheet to map out and prioritize the errors that occurred during testing.
Usability issues with onboarding, pictures, and bookmarked items.
Peer Review
I revised my prototype and asked peers from CareerFoundry’s online community to conduct a peer review so that I could gain further suggestions and comments for improvement. Asking other UX-minded people for critique helped me confirm or revise big and small elements of my app, making the next iteration even better.  

Notable updates included:
1)   REPLACING THE FILTER MODAL BOXES with filter pills and chips for the Search Topics and Find Experts screens. Because there aren’t too many filter options, pill and chips that are visible under the search bar may make more sense than a modal box that appears by tapping on a filter icon.

2)   REMOVING THE SEARCH BAR on the Calls tab in the Connect screens. Theoretically, an upcoming call would disappear once the call has happened. Therefore, there wouldn’t be enough calls listed to warrant a search bar necessary.
Final mockups of the app's main functions.
Style Guide
I used real images and pops of color to engage users and get them excited about home projects. I wanted the images to be aspirational, yet approachable, to show users possibilities that were attainable. The images also showcased a wide variety of styles at different price points to ensure that the app was appealing to different users’ styles and budgets.
Colors
The app’s main colors were blue and green. The blues, Ocean and Sky, evoked calmness and productivity—two feelings helpful in any home project. The greens, Jade and Aqua, stood for trust and acceptance, as if to say, “Trust RenoMaven to give you the best answer.”
Colors used in the RenoMaven app.
Typography
For the typography, I used Nothing You Could Do, a handwritten font, to give the app a sense of approachability. For all other text, I used Nunito, a sans serif font, to ensure legibility.
Typography used on RenoMaven.
Icons
I kept the icons clean and simple, and for the most part, I used universal icons. There were some instances where I combined two universal icons to create a new, unique icon for the app (e.g. the Connect icon). There were also cases where the icon's function, might not be obvious at first glance (e.g. the Search Topics, Ask Questions, and Find Expert icons). However, with the new and improved onboarding, the user will learn early on what they mean.
Icons used on RenoMaven.
Final Reflections
Though I was more drawn to creating wireframes and prototypes, I found that the most important part of the process was testing. For example, usability testing was crucial in finding errors and seeing things from a different perspective. The biggest error occurred with the onboarding process, which many of my participants skipped because they thought was too long. However, skipping the onboarding caused the participants to have a harder time completing the tasks I asked them to do. In my next iteration, I redid the onboarding to strike a balance between what my participants wanted and what they needed.

Based on feedback from my usability testing, I also conducted a preference test to see which version of the home screen participants preferred. All of them preferred the alternate version. This was an excellent reminder to put my personal tastes aside and keep my users front and center.

Collecting constructive criticism was another important part of the process. Asking other UX-minded peers gave me ideas on ways to improve the app in future iterations. For example, one peer wondered what would motivate an Expert to be listed as an Expert and answer the users’ questions. Since Experts would also be users for my app, their experience should also be taken into account.

I would also like to increase the accessibility of the app, especially for older users. My app was geared towards anyone living in a permanent dwelling. Therefore, older users who may be less tech-savvy and/or be more impaired need to have their needs addressed as well.