SmartBoxes is an app designed for people who want to organize their belongings. It allows users to add a SmartSticker to a box and add the items to the Smart Boxes app. The QR code helps users to know where items are.
As someone who believes in “The Life-Changing Magic of Tidying Up,” I was excited to work on this project. I was asked to explore the usability of the app and provide feedback and ideas for improvement. After testing, I found that there were areas for improvement.
I redesigned the product from the ground up to allow for a more usable interface and cohesion overall. I wire-framed, prototyped and created a new UI system. Additionally, I shared ideas for future collaboration features. I was told that this was the direction they would like to take in the future if the project was extended.
What I did
Updating the UX & UI
Welcome Screen – New
The box illustration and “welcome” make the screen friendly, add an element of delight and help the user understand what s/he is looking at. On this page, s/he can clearly see how to complete all important tasks: add box, search for item, add item. The CTA “add box” takes up less space, which makes it more practical for other screens and to maintain consistency. The scan icon shows the user what to expect.
On the right is what the welcome screen looks like after you’ve added boxes. At the top, it shows where the boxes are located (“Sophie’s room, attic). The user has the option to select specific locations. From this home screen, the user can quickly glance at the images in the box in order to more quickly find what s/he’s looking for.
Welcome Screen – Old
As a first-time user, with zero boxes, I would have appreciated a friendlier transition – brief onboarding and/or illustrations. Maybe some friendly language like, “Welcome, it’s time for you to add your things to a SmartBox.”
At the bottom, the CTAs “organize” and “find” take up a lot of screen space. This seems unnecessary and unpractical for other screens.
In the upper left-hand corner, there are multiple squares that I thought were just a design accent. I later learned it is a link to the nav, but this is not obvious to me. I do not realize it has a function until later.
Pack/Fill Screen – Old
This screen appears when I click on “organize.” As a first-time user, I am confused. Both “pack item” and “fill box” seem to mean the same thing to me. I am reading and rereading the text.
I’m looking at the descriptive text which states, “scan box.” As a first-time user, I might appreciate a bit more guidance here like, “Add your SmartSticker to your box and then scan.” I feel like that step is missing.
When I click “pack item” it takes me to a camera to immediately take a photo. I was not expecting that.
The new design below eliminates the need for this screen. Users can take these actions directly from the home screen.
Add Item Screen – New
The page is clearly labeled to reduce cognitive load and ensure the user knows where s/he is within the app.There’s an option to tap on the camera icon to change the image.
All input fields are labeled and readable with readable font size and darkness. To change the quantity, there are add and subtract buttons with clear functions. There’s an option for the user to create relevant tags, which will later be useful when searching and filtering.
Add Item Screen – Old
The font is small and difficult to read. While the input fields have help text, they are not labeled. To the right and left of “quantity,” I see two small buttons – one is a download icon and the other is add. I am not sure what their function is. When I click on “pack item,” the next screen is not to can, so the icon is misleading.
Filter Screen – New
I designed a more robust filter feature for people with a lot of stuff. The user can also now filter by customized tags
The images are labeled in the case of low quality images or items without images.
Filter Screen – Old
From the “dashboard” homepage, I click on “find” item and there is an option to filter with predetermined categories and icons. The font size is small and would be difficult for someone with a vision impairment. It would be useful if the user could customize the categories instead of only having predetermined categories. For example, I have pet stuff, and no sports gear.
It says “search” at the top and within the input field. It would be helpful if there was some guiding text like, “Try typing key words like ‘yellow shirt.”
Box Contents Screen – New
The new layout allows the user to quickly scan the page to find what s/he needs. This reduces cognitive load. For accessibility, there is larger text and icons. There is a new display of items with images and descriptive text underneath to maximize screen space. The “add item” CTA includes a camera icon so that the user knows what to expect and is ready.
Box Contents Screen – Old
The center alignment and inconsistency of font size and weight makes this screen less usable. The scan number is not needed here. The text and icons could be larger.