Client

Student Project at UX Academy, Designlab

Role

Product Design (research, design, prototype, testing)

Building Empathy

Meet Neeti

Using the interview results, I created a target group profile Neeti(28), to better empathize with the requirements and needs of the audience I will be designing for. I could imagine my persona, who was a working mom, juggling with the “work-family” balance and also has a keen eye for creativity. I instantly connected with this persona and easily drew out all the factors for my empathy research.

I created an empathy map, to understand my persona Neeti’s actions, behavior, emotions, and thoughts in detail.

Getting the story right…

It is essential to demonstrate the usage of Deco into Neeti’s furniture shopping process. What better way to do it if not a storyboard? So, I sat with my Wacom and sketched out the story. Once I was sure about my persona’s requirements, I made up a story based on the scene, where Neeti wants to get some furniture to make a nice breakfast setting.

After my persona was ready with her story, I worked on the project goals. It was that time of the phase, where I had to decide upon the features to be included into the app. So, I made a list with their respective priorities. As time was really short, I managed to fit in almost all the ‘Must-Haves’ in my design. The remaining features will remain under the future scope.

Aligning the business and user goals

While designing an app that focuses on user goals, it is essential to consider its business goals. If not, many constraints would remain undiscovered, and the app would not be able to provide services to the users to its full potential. Aligning the business and user goals with a list of high-level technical considerations provides a clear picture for the entire team working on the product.

After deciding upon the project goals, it was time to think about what features to put in. At this step, to ease the features management, I created a loose plan for product development based on the feature matrix and persona.

Navigation

I created a sitemap to figure out the pages required for this application, which can be viewed here.

Sketching the flows

With limited time on hand, I focussed on two main flows for Deco:

• Buy a furniture item.

• Plan a room using multiple items and save them as ‘Shots.’

I designed the task and user flows for these tasks.

Using these flows and the sitemap I created earlier, I sketched my ideas using a pencil and my field notes during rapid design thinking. My profile Neeti likes to shop, plan and look at inspirations for ideas. So I decided to add these options in the main navigation.

Wireframes

I used Adobe XD to build the high-fidelity wireframes. The artboard measures are 375x812px (iPhone X, XS, and 11 Pro). I finalized the icons and illustrations while working on the high-fidelity screens to give a better sense of elements to place.

I do admit I got a bit stuck while sketching out the ‘Plans’ feature. I wanted to design the feature to view multiple items in AR and also capture the shots to revisit them later. I found this feature in Adobe Aero and realized it would come in handy. Also, I came up with the ‘Planlist’ to hold multiple items to be viewed in the room.

Branding and UI design

I wanted Deco to have a friendly and casual appearance. After trying out numerous color palettes, I decided to go with a set of vintage colors. The logo has been designed using the font ‘Omnes’. I chose this font because of its round nature which helps to give an informal look for the theme. I feel Avenir pairs well with Omnes for the body content.

To get the effect of a moving phone, I bought a 360 degrees image of a living room. This was important to show how the AR was going to work.

Prototype

You can look at the Deco prototype, created in Adobe XD. (If you are unsure what to do, click anywhere on the prototype to view hints.)

Adobe XD helped me create the prototype just as I had imagined. There is room for improvement in the prototype, but I am happy with the result. Of course, the behavior might change a bit while developing but it sure does give a nice preview of the app!

Usability Testing

I set the test objectives to test the navigation of the app, buy a furniture item, and plan a room using items in the plan list. It is always crucial for me, to evaluate how the user carries out each step in the process, by observing their actions and behavior. It also includes addressing any doubts/questions raised by the users and finding out why they had them in the first place.

Findings

• The soft colors give a nice touch to the app.

• The tasks experience was alright, except a little confusion on the ‘Categories’ page. The ‘Sale’ category seems more like a title for the page instead of a category because of the red color.

• While creating the plan, the actions like ‘Info’, ‘Delete’ etc were thought to be for the entire plan, until I cleared the confusion by letting them know that the actions were for the objects in the room.

• The checkout was a smooth process. 

Post-testing iterations

Based on the usability test findings, I changed the appearance of the ‘Sale’ category and also changed the text for the actions for the plan, to make the experience more detailed and helpful for the customer.

Conclusion

In a time span of 80 hours, I have attempted to complete as many features that I could. The project was so interesting, that I wish I had more time to show the remaining features of the app as well. Moving forward, here are the things I would implement in the future:

• Inspirations - I am thinking this page could have a list of ideas, that could be filtered by rooms (e.g., living room) and styles (e.g., Contemporary) and could also be saved to the user’s profile. The Inspirations page could be accessed only by members and not guests.

• Profile - The user profile would list all the saved data like inspirations etc., and of course, the user’s personal information. The Profile page could be accessed only by members and not guests.

• Stories - I am imagining this to be like a list of blog topics, which could be saved by the user if they are members.

• Discussions - Discussions are like the threads started by the user to seek advice from other members.