WeExplore, is a mobile app intended to provide information on various locations that users are specifically looking for hiking trails, photo spots and scenic spots all around the San Francisco bay area.
Put all the information of different types of locations – photo spots and scenic locations, all into one useful and convenient mobile app on the go. Not only providing different types of location in one app, but giving important information and detail that users need when they go out to explore that location.
Research on Bay Area locations, via google search and google maps. Then research on prior arts and rival apps on the market. I would compare and contrast, as well as look at the comments users write up about the app to make judgement. Another phase of this part is that I would also conduct interviews. The interviews were conducted through phone calls or video calls, with three potential users. In this part of the process, was where I would scout out the locations and take photos to use for the project. I would also take notes of the surrounding areas of what is notable and vital information that users may need to know when coming to the place.
A photo location guide to well known famous locations to hidden gems all over the world.
• Access in offline; users can save location
• Know nearby attractions and places of that location
• Photo shooting tips
• Real-time weather data and information of that specific location.
The go-to map application which has a detailed map layout displaying all points of interests. The interaction of the app allows users to zoom in and out to see up close or far out of the map. A simple swipe and touch are the gesture controls on google maps allowing the user to move across the map.
• Star Saves
• Location & sharing
• Pins for “your places"
A mobile app that allows users to discover new trails in National Parks or in their very own neighborhood, with hand curated GPS and topo maps.
• Browse photos and reviews submitted from other users
• Record your own hiking trails by using your GPS
• View your hiking, running and cycling stats
• Ability to share on social media with friends and family.
I wanted the create the app to be easy and straightforward for first time use. Therefore, once they appreciate the convenience of using the app they would go back to using it. The app starts with a login screen or quick login (if the user chooses to) then loads to the two categories of the locations they can choose. After that will pop out the list of different spots where the user can scroll through and look for one they are interested in.
Coming up with the sketches, I would draw out initial ideas on how the mobile app looks. A rough sketch on what each screen would look like and what features should be included. After coming up with multiple rough sketches, then comes the low fidelity wireframes. Which are the rough sketches but in digital form.
wireframe of what would be the home screen
The menu pop out when the user clicks on the hamburger icon
The user's profile screen. Where they can edit their information, upload their photos and go through their favorite locations.
Designing the prototype. Building off on the low fidelity wireframes, I continue adding more design elements and start detailing the features. The focus and addition of animation of the screen and elements was included too. Taking feedback from the midterm class presentation and additional feedback from user interviewees. I took out previous design elements and changed the layout to look more visually appealing and information focus design. This was the most challenging part of the process, where I would constantly find myself stuck on which design to go with. How I would like the button to go here and what the layout should look like, I would keep referencing off other apps to see if it would be appropriate if my design worked.
Taking from the wire fames, I then proceed to add photos into each of the sections. Backgrounds and buttons icons placed as well.
A sample image of the favorites screen which shows the user's locations in which they wanted to saved as their interest. They can always go back to look at them for reference. The list would contain the locations' name and description.
Designing the prototype. Building off on the low fidelity wireframes, I continue adding more design elements and
I presented the 1st prototype to the class. After getting feedbacks for the first draft of the prototype mockups. I went back to the drawing board to revise the color scheme to making the overall layout more consistent with the design. The button and elements are more closely related to look and overall feel. I fixed how the icons would be perceived by the user by adding different color depth which will highlight what that icon/button does. This revision I wanted to make it clearer for the user to distinguish what the screen they are looking at. The different locations are colored coded to their respectful categories.
This screen shows the location information with all the details of the description about the location. The hours of opening and closing time of the place. Whether the location is admission free or not. In this screen the user can click on the "Go Here" button which will redirect them to the navigation screen.
This is the navigation screen of the location selected by the user. The overall screen is the map navigation that will provide directions to the selected location intended by the user. At the bottom is the pull up tab bar that will include information on any near by interests, food or attractions that might relate to the spot selected.
Here is the selection screen for the category of scenic spots. The user is able to interact by swiping left or right to view the featured scenic spots. The same viewing and layout is the same for the photo spot category.
Continue to fine tune the design system. Correcting the layout of some of the buttons and elements. Further implement new interaction features, whether it be animations or how I can add new information delivery.