Navigation
Logo Placement Research
I kept the logo white so that it is easily recognizable against the green navigation background. The design for this navigation style includes a drop shadow to let a user know that this can be clicked.
See more research about logos here.
Dropdowns
I included dropdown arrows in this design because I want the user to know that they are not leaving the page. This eliminates confusion for a user.
Search Bar
The search is located in the middle of the navigation bar because that is not the first thing I want to user to engage with. It is a "catch all" tool when the user is not satisfied with what they find in the dropdowns. I want the user to engage with the dropdowns first before searching the entire website.
Marketing
Carousels should always say something of importance and involve a CTA (Call-to-action). It should always have both elements. Carousels undoubtedly take up the majority of space on a webpage and are never seen at the bottom or middle of a webpage, either. That's how essential marketing banners are to a product.
Therefore, a carousel should be easily scrollable horizontally and always have indicators about how many slides there are.
If a user doesn't want to see a banner which, I think, should always be an option, the user can click the "x" in the corner and reduce it to a marketing banner.
Product Info and Icons
I am now realizing how crucial having a hover function is when designing. I couldn't really achieve the look I was going for because there's no hover function in the prototyping section.
Edit: There's now a hover function in Adobe XD as of 2020.
Other than that, my lesson today was working with Plugins, and particularly the Google sheets plugin. It is a very helpful tool if you need to populate high-fidelity prototypes with actual data. I also learned about the repeat grid tool. Repeat grid lessens the effort of copying and pasting assets. I feel like I'll be using this feature in the future a lot more.
Chat Bots
Chatbots are fascinating to me. I remember looking for a new tv on the best buy website and leaving the experience really appreciating what a chatbot could do. I also remember how skeptical I was about chatbots and how machine-like they are but the Best Buy experience showed me a new perspective.
Chat button
I have seen this design before on e-commerce websites. Putting the button to the side of the webpage allows the users to find it easily while perusing through the cards. The blue color is the exact opposite of orange providing another layer of easy discoverability. Blue also represents meanings of depth, trust, loyalty, sincerity, wisdom, confidence, stability, faith, heaven, and intelligence. The color blue has positive effects on the mind and the body.
Expanded Chat button
I believe that chatbots should always start off the conversation either with a question or with a pleasantry. People can be put off knowing that they are talking to a machine and not an actual person, therefore the chatbot should do whatever it can to breakdown that wall. In the real world, I would research call center employees and observe how they start a conversation with a customer. These people have the hardest job of keeping the conversation pleasant, especially with a disgruntled customer. Learning from them could help a chat bot's deep learning abilities. I would also do research on if a person who is color blind can tell the difference between green and blue and then adjust the colors accordingly.
Discoveries
I discovered how to use the UI Faces plugin provided by Adobe. This tool allows you to populate shapes with people's faces. As you can see in the last picture, a woman's face is used for the chatbot. This tool cut downtime finding placeholder faces significantly.
Simplified Purchase Flow
Feedback from Mentor:
1. Change color scheme
2. More padding in cards
3. Chatbox width is too small
"25% of users are adding items to their cart, but not completing the purchase process. Through user surveys, they’ve expressed that the cart is hard to edit and there are too many steps in the purchase process. How will you simplify the purchase flow?"
I have always been interested in checkout processes and 1) why people abandon their carts and 2) how to make the process streamlined and pain-free.
Why do people abandon their shopping carts when online shopping?
From casual research I'm doing, customers need proof or reassurance that your products are worth the money. Solutions to this are utilizing customer ratings and comments. If we're thinking divergently, the app, Yelp, provides users with reviews on restaurants to show the user what restaurants are worth going to and which are not. Personally, I go to that app to make sure the restaurants I go to are quality restaurants. This app acts as a word-of-mouth selling tactic and, in my experience, nothing works better than word-of-mouth marketing.
See more research about checkout UX here.
Subscribe and Save
Users want nothing more than to save money. However, it's a huge pain to interrupt the shopping experience with a marketing card asking you to do something. I see it all the time on e-commerce sites and users are now beginning to identify this as pain. I agree, it takes you out of the experience.
In my first iteration, I put the banner on the homepage. This is probably not the best place to put a "Save money here" banner. I am starting to think the best place to put this is somewhere in the checkout process and here's why.
There's no doubt that users love to put products into their cart then abandon their cart. That is because there is no urgency to the purchase. Their shopping bag will always be there for them. Putting the banner or even components of the banner will stir them to use this offer and complete the checkout process.
Rate Experience
"Involving user feedback is a simple way to earn trust and improve user experience. Design a rate experience for users, which is triggered at the end of the purchase flow. Get their thoughts on the new cart experience and use it as an opportunity to find out what they’re looking for in a mobile app. "
This is typically the end goal of a journey for a user. The point is to lay out all the necessary information while urging the user to rate their experience. That task can be like pulling teeth so I am in awe of any designer that manages to make this task fun and engaging. I tried to do that by using rating bars. This decreases the amount of brainpower (which can be a pain point, unfortunately) a user uses to rate their experience.
Discoveries
If we're thinking divergently, IKEA has a great system for rating a customer experience. They partnered with HappyOrNot (https://www.newyorker.com/magazine/2018/02/05/customer-satisfaction-at-the-push-of-a-button, a Finnish company that makes customer satisfaction measurement terminals. What they have done is place these terminals all around the IKEA store. With these terminals, there's only one interaction...to push one out of four buttons. Now, what IKEA does with the data is not clear and of course, there's a range of emotions a person feels when shopping but this idea is brilliant. It's brilliant because if there is a correlation to a negative experienceS in a certain part of the store (especially big stores like IKEA), they will know that from the HappyOrNot data and deep dive into the real problem. Vice versa, if people are happy in a certain part of the store they will take that data into consideration to make the experience even more delightful.
High Fidelity Prototyping
Mobile Experience
