Find the prototype by clicking here. This is a partial prototype. Not all features work. The objective of the prototype is to see if the user can navigate to find Jovial Checkerboard Cookies.
Find the prototype by tapping here. This is a partial prototype. Not all features work. The objective of the prototype is to see if the user can navigate to find Jovial Checkerboard Cookies.
Vitacost is an online retailer that sells a variety of these products and brands. This includes: vitamins, supplements, organic foods, beauty products, herbs, fitness items and pet supplies. These products are shipped directly to the location the user inputs, as they do not have physical retail stores.
Vitacost has both a website and a mobile app. For this project in my User Experience and User Interface class, I chose to work with the mobile app. The mobile app gets a lot of traffic from users on the go.
This image demonstrates various pages on the Vitacost app. This includes shopping categories, food and beverages section, and the snacks subcategory.
The user experience of this app had some variables that made it feel harder to navigate. It was difficult for users to find a subcategory of items after selecting an item from a shop page. For example, if a user was looking for chocolate, they could not easily find it in food and beverages. A few sessions of user testing were done. Only two users out of six could find the chocolate without searching. In this assignment, I was asked to redesign the user experience primarily so users could find what they were looking for, then focus on the interface. While both go hand in hand, user experience should be priority while designing the user interface.
Wireframes were created to plan out the app before making mockups and developing the prototype. These wireframes demonstrate the user's journey while trying to find an item without having to search for it.
The user experience was improved by showing subcategories of items after tapping a category from the initial shop page. On second testing, users were able to find the product asked of them.
This image demonstrates the redesigned page.
The final step of this project was to make the mockups and prototype, which can be found clicking here.
The final step of this project was to make the mockups and prototype, which can be found tapping here.