Jiv's is a grocery store app programmed in React Native with Redux .







scroll down to learn more scroll down to learn more
unwind Get the code here

Role

Designer/Developer

Responsibilities

Development in React Native with Redux, Wireframing, Mockups, User Research, Design Principles, Market Research, User Testing, User Flows, Web Interface Design, Typography, Illustration

Tools

Adobe Xd, React Native, Redux, Bootstrap, Xtensio

Mission Statement

Provide grocery store customers with a convenient way to maneuver around the store to find the items they are looking for efficiently and effectively.

Audience

The audience for this app would be customer’s at this hypothetical grocery store. This app could be utilized both by younger audiences who are familiar and reliant on technology for day to day activities. This app may also be utilized by older shoppers who may use the app for assistance finding things in a store they struggle to find on their own. During this time of COVID-19, this app would also be beneficial in reducing a shopper's time physically in the store. Rather, they can create their list from home and determine where in the store they will need to go before even arriving at the store.

Summary of User Feedback

Round 1

One issue the clients had was that our website did not have a definitive home page. Originally we had planned to have the app open to the page that listed all items available at the grocery store, but they felt this was not intuitive and may confuse or intimate users. So, we opted to add an additional home screen to our page that gives general information about our grocery store and includes a button that can be used to access the “All Items” screen. For the “All Items” page, our original wire frame consisted of a simple FlatList with each item name listed. The clients though this may be difficult for users to look through, and suggested we add images for each FlatList item so that it can be scrolled through and viewed more easily. We thought this was a great idea and plan to incorporate this feature. For the “My List” screen, we originally had it so that the user could only keep one list going at a time. The clients suggested allowing users to maintain more than one list, so it can be more useful for customers who want to have separate lists or multiple lists at a given time. We decided to change the screen name from “My List” to “My Lists” and will give users the option to store multiple lists on this page of the app.

Round 2

One suggestion we got for our client was to get a more definitive style for the app. As of right now it is fairly jumbled and we did not have a definitive style from screen to screen. So, we’ve been aiming to get a more definitive style throughout the app. One task we wanted to work on for this round was to create our home screen. In order to do this the clients suggested we work on coming up with a name and logo. The clients also suggested having buttons on the home page that can lead the user to the other pages our app has available. So, we have added all of these suggestions to our sprint for next week and have started initially thinking of names and logos. The clients wanted to actually get the search page working. Currently, there are some features shown on the screen, but it does not currently work with search functionality. We are planning to add this to our list of things to complete for the next sprint and hope to get this feature working.

Round 3

The clients wanted to actually get the search page working. Currently, there are some features shown on the screen, but it does not currently work with search functionality. We are aiming to finish the search page so that it can actually be used to search items in the All Items FlatList. The clients suggested the next big feature we should work on implementing would be the “Locate” screen. This will require some research given we have not worked with maps in class yet. For our next sprint, we will begin looking into options to create this map feature and hope to have a basic implementation completed. They also suggested we implement Redux in our app so that we can use that to store our data for the “Items” screen. For the next sprint, we are going to shift our data storage to Redux to store the grocery store items as per the client's request.

Round 4

The client wanted us to finish implementing Redux within our app. Although we were able to start getting Redux implemented, we ran into some issues during the previous sprint, so for this sprint completing this Redux functionality will be our top priority. Once Redux is completely implemented, the clients wanted us to finalize the search page to work with this new Redux functionality. So, after getting Redux incorporated in our app, we will adjust the search screen and get it to work with the new Redux implementation. The clients finally asked us to finish getting the store map implemented. Although we currently have a map view implemented to help shoppers locate where the store is, the clients still want to have the ability to locate where items are located in the store. So, we will be working to implement this by having an image and touchable areas within the image to mimic this sort of functionality.

Wireframes

unwind
unwind
unwind
unwind
unwind
unwind

MOCKUPS

unwind unwind

Dependecies

npm install @react-navigation/native expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view npm install @react-navigation/stack npm install @react-navigation/bottom-tabs npm install redux@4.0.5 react-redux@7.2.1 npm install --save react-native-maps npm install @react-native-picker/picker --save npm install @react-native-community/slider --save npm install react-native-paper