Our team was tasked by UE Group to design a mobile app for their client UpHome. UpHome is a startup, and to kick off their sales process they would like to design a mobile app that would not only drive sales, but help clients visualize their renovated shower in the context of their real bathroom via an augmented reality tool. The design challenge was to create an augmented reality experience so that the user can visualize their customizations digitally and have a feature that overlays their designs on their current bathroom.
In the semester long project, I was one of two team leads. I played a large role in managing the project; creating the project timeline, identifying the direction of the project, and creating the final designs.
In order to start our project, our team needed to get a good understanding of the augmented reality and e-commerce space. For the first few weeks of our project, I led the charge in identifying actionable takeaways which led in to our next phase, user interviews.
To complete the project in time, I was tasked with creating a project timeline and making sure our team completed tasks on time.
In Figma, I was the design lead that took our whimsical wireframes and designed them to be high fidelity, interactive mockups.
At the end of the project, I took the lead on creating high fidelity prototypes to hand off to our sponsors. All design decisions were insights from users during interviews and market research.
To see the use case of our designs, watch this Youtube video.
Below you will find our teams process to come up with our final designs. Our process consisted of research, interviews, ideation, and user testing.
The goal of conducting market research was to gain insight into the augmented reality space and the demand for AR in home renovations. After looking into e-commerce companies that utilize AR technology like Ikea, Wayfair, and many more, the team noted some major takeaways from conducting market research, which include:
1. AR product visualization is definitely needed because there is a gap in the marketplace for AR technology.
2. AR technology gives companies a competitive advantage. More users are inclined to buy from a company that provides AR technology.
The portals were easy to navigate through for us as designers, as the goal for these companies was to make a seamless AR experience. PUX additionally noted a number of commonalities when it came to AR visualization, an encouraging signal for the team to think outside the box and design a unique experience.
In order to know how to develop a product that would be widely used by users, the team conducted user research on other companies that utilize similar applications as well as looking at what consumers think of AR in relation to e-commerce.
1. 70% of consumers between the ages 16 and 44 are aware of how AR functions.
2. Unresponsiveness was very disliked in existing AR applications.
3. Every AR application needs to have instruction or a tutorial because it is a newer concept.
4. Users appreciate a very smooth transition from the store and AR pages in the application.
5. Users dislike that there is not a search function in the AR part of the application.
Our team then decided to conduct a competitive analysis to identify the qualities of other AR apps that the team considered useful and which qualities should be avoided when designing an AR bathroom remodeling experience.
Using an affinity diagram, the team found patterns and common themes between the apps members individually reviewed. These themes would drive further design concepts.
After the affinity diagramming activity, the team wanted to conduct interviews with homeowners within our user group to:
1. Understand how users want to customize their purchasing and viewing experience.
2. Understand what users need to make a large purchase.
The team planned to gain a better understanding of what users actually look into when they start from the very beginning of their interest in purchasing a shower.
It was important that PUX understood what potential users need in order to follow through with these larger purchases. What would make them comfortable and provide them a sense of finding what they need?
The PUX team interviewed six individuals in the proposed user group, all of whom had experience making large purchases through home remodeling applications.
The major pain points that we found were the level of inexperience and the inability to customize and visualize within an AR experience.
“I’m just not very tech-savvy so I don't know where to go to get that AR stuff.”
“I would have been there a lot longer if it wasn’t for that tool they had that helped me visualize...”
After conducting interviews with individuals in the proposed user group, the team decided to focus on:
1. Users with lack of knowledge/inexperience when navigating an AR shopping application
2. Users facing choice overload when navigating and shopping on an AR application
3. Lack of support in terms of customization/ The apps provide no support for users throughout the customization process
After identifying the most common issues presented in customization augmented reality applications, the Purdue UX team proposed a final user group:
First time Uphome customers need an experience that allows for a guided and exploratory way of customizing their showers.
With this information in mind, the team wanted to look into already existing applications that create a seamless and guided, yet exploratory, process for users when in the customization process.
After identifying a final problem space, our team wanted to understand which familiar layouts make the customization process fluid and why.
Each of the team members looked into applications like Bitmoji, Fifa, and other video games that allow for a simple, guided and exploratory customization process.
After looking at how different applications present their customization process, the team found that:
1. Wanted the customization to change in real time based off what the users click/choose
2. Navigating tabs at the bottom that allow for a guided yet exploratory customization process
3. Have the title of what is being customized
4. Have the icons in the navigation menu represent what is being customized
5. Have the icons be highlighted when that section of the process was being editedThe ability to save the customization
With this information in mind, the team began the ideation phase of the project, sketching and touching on all of the aspects of AR customization applications that are presented above.
Because the main focus is to design a flow of how users will make their personalized decisions, the team aimed to reduce choice overload.
This was done by segmenting different shower accessories into their own sections. Within a section, the user can choose a product.
Once a product is chosen, it will be displayed in AR above for real-time updates. A toolbar was included for ease of use. Users may jump back and forth between accessories.
The team compiled competitive analysis insights alongside inspiration from bitmoji to create an exploratory and guided walkthrough experience.
These sketching iterations focused on insights from secondary and primary research.
Moving on from sketching and research, the team developed Low-Fidelity prototypes. The team used Whimsical to start designing early Lo-Fi prototypes to better understand each other's findings as well as getting an idea of where to start when it came to testing and then further development into mid-fi prototypes. The team conducted this by each designing the basic screen layout in order for their version of the app to function, which was developed from our overall findings. This led to us discussing and deciding which pieces to move forward with when testing and further development.
The team found immense use in making their Lo-Fi prototypes as it allowed us to properly test ideas and understand our collective ideas in order to properly test. We also got a better understanding of how the structure of an ecommerce app can be complex and that each option needs to have rationale backing it.
The goal of this round of testing was to identify any functionality issues or confusion that users face when navigating through the low fidelity prototypes.
The team asked the interviewees to select a specific part of a shower they would like to edit and explained how they would make changes to their shower. Interviewees were asked various questions on how to navigate the application and where they think they would find specific icons.
From this round of user testing, the team was able to focus on:
the navigation across different screens within the application the ease of understanding the process allowing users to discover and visualize the specific shower elements they seek.
The team identified takeaways and made the necessary iterations.
Our goal was to make iterations on the low fidelity prototypes to transfer and design them as high fidelity prototypes.
The team identified that the navigation needs to be more intuitive, solve the ambiguity with the filters, and instill a sense of simplicity and reliance by adding undo and redo buttons.
These three factors were the main touchpoints from the low fidelity user testing and the team made iterations while keeping these takeaways in mind. These can be shown in the following annotations.
The goal of turning the low fidelity prototypes to high was to visualize and showcase the process so it was easier to analyze and test.
The team compiled Whimsical prototypes and recreated them on Figma.
After creating high fidelity prototypes, the team wanted to conduct Likert Scale testing to ensure the likeability of the interface.
The goal of conducting likert scale testing was to measure task usability and attitudes/agreements associated with those tasks.
The team tested with five users in the proposed user group. After conducting the Likert scale testing activity, the team found that
1. The proposed navigation and layout of the application was validated 2. There was no confusion for the users when navigating the tasks presented throughout the application.
3. Users liked the filter functionalityUsers liked and understood the cart functionality
4. They liked the process of buying a product
5. Liked how the AR functionality was implemented
6. Liked how you can view product detailsFound that the save button should be in the top left
7. Make cart page say “proceed to checkout”
8. Users did not like the UI of the menu
With this information in mind, the team wanted to make the necessary iterations.
After the likert scale testing, our team made the necessary iterations in order to move forward and conduct a body storming activity with more users from our user group.
Our team conducted a body storming activity to understand the flow of the shower customization process and understand the interaction of the augmented shower model in a physical space which is where the AR solution is meant to take place.
The team broke down the body storming activity into 3 scenarios. To understand the interaction and in a holistic manner, the team assigned roles and made each person champion a different area of the activity.
The PUX design team performed the activity internally, as the goal was to understand the interaction in a physical environment and if the customization flow transitioned into AR.
Our team found that users:
1. Liked how the AR functionality was transitioned and made sense to have the AR feature for each component.
2. Identified connection overlaps in the customization flow and felt the need for more iterations for other shower components which may lead to further iterations.
With this information in mind, the team created the necessary iterations that we presented through the bodystorming activity.
Our team then made the final iterations from our findings from the body storming activity.
These iterations led to our final deliverables that can be found at the top of the page.