WeExplore

A mobile app that provides the informations/guides to all the photo spots and scenic spots around the SF Bay Area

Roles

Product Manager & Designer

Tools

Figma, Adobe XD & Adobe Illustrator

Users

Photographers, Locals and Tourists

Duration

5 months

Introduction

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.

Problem Statement

Solution

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.

Phase 1: Research

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.

Competitor-Analysis

Explorest

A photo location guide to well known famous locations to hidden gems all over the world.
Key Features:
• 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.

Google Maps

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.
Key Features:
• Star Saves
• Location & sharing
• Pins for “your places"

AllTrails

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. 
Key Features:
• 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.

Personas

Flow Chart

Devising the flow chart was to help brainstorm the skeleton of the mobile app. Figuring out the format of each screen. Which button actions link to what screen. From there where would the user go to find their information.

My reason to create a flow chart

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.

User Experience Journey Map

Taking some insights from the interviews then forming rough ideas of how personas would look. Which then I base off what would be the experience "the user" endeavors through their journey during the use of this mobile app. The steps I came up with to get a rough sense of how the user would behave with their use of the apps as follows: 1st is the awareness of their problem, 2nd is the consideration of the potential solution to their problem, 3rd is the service where the users tests the app and lastly with the 4th phase, the user realizes that the app helps their problem in search for a scenic spot.

Phase 2: Brainstorm  

Explanation

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.

Phase 3: Prototyping

Version 1 Low-fidelity

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.

Version 2: High Fidelity

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  

Phase 4: Revision

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.

Version 3: High Fidelity

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.

Scope and constraints

Covid-19 situation

  • Closing of many locations (parks and scenic spots) – resulted in design change to the mobile app and the lack for detailed for some of the locations. The closure of many of these spots hindered the research and data needed to be implemented into the design.
  • Another constraint of the situation prevented interaction with users in person. This issue prevented me to conduct in-person interviews and in-person user testing. (ideally with researching for the project would require me to get better feedback and research when it comes to interacting how users would interact outside in those locations to get their feelings and reaction.

Takeaways

  • Given the change in the design process and the overall production. DIfferent steps were changed, where the main important part is the adjustmentof the work project development schedule. The delay of working on different parts of the project affected the outcome of how the project came to be.
  • The change to the goal would be instead of focusing too much on the research into what design style fits or works the best. Or what features will be appropriate. I should have taken user input more seriously from the start. I got into the interview/research phase a bit too late in the work schedule.
  • The change to the 1st step phase would be to come up with initial design ideas and then conduct research/interviews to get a better sense and feedback on what works. Instead of taking a longer time deciding and going back and forth with the research.
  • The main change in the work timeline, was putting the emphasis on getting work done sooner. Being that this project was big, it would have been better to split the work tasks into smaller chunks and work on it gradually for better time management and improved results.

Next steps

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.