Day 68 - Shopping on Mobile
I recreated the same homepage from yesterday's desktop screen, but on mobile.
As you can see, I had to go through many design decisions to get to this result. First, instead of having a bunch of category items at the top, I decided to remove them. They are just duplicates anyways as the categories will show as the user scrolls down the screen. Also, it's not something my persona would look at right away. As for the "Shop by Department" button, I was going to create hamburger button right next to the shopping cart icon, however through user testing, I have found that many users didn't know how to get to a specific category. So, something needed to replace the hamburger button. This is how I got the "Shop by Department" button. It is straight to the point and shoppers will know what to expect when they press on it.
Moving down the screen, I reduced the number of products on each line to 2. On the desktop screen, I was able to add up to 4 items, however with a smaller screen, I had to reduce it. Another major change was the bottom panel. Instead of having a bolded title and a list of items underneath it, I decided to place them all in one list. I got the inspiration from Amazon because they do that part so well. I'm not sure how to organize/order the list, but I just based it off the order I created on the Desktop screen. I'll definitely need to look into that for sure.
I'm actually not sure if I'm happy with the result for this one. There are still a lot of questions that need answers before I'm satisified with the design. Questions like: Will the "Shop By Department" button actually work? What happens when the shopper clicks on the button? Why is the bottom banner list listed in that certain way? All I need is evidence that the users will understand how to navigate through the site and they're able to find the answer they're looking for as well.