WeExplore is a mobile app that aims to make it easy for outdoor enthusiasts to discover, plan, and share their adventures with a community of like-minded people. The app features personalized recommendations, trip planning tools, and social sharing features. WeExplore is designed to help users discover new places, connect with other outdoor enthusiasts, and make the most of their time in nature.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Persona B: Meet Kelly, a 22-year-old digital nomad who loves to travel and experience new cultures. She's always connected to her phone and uses it to navigate new cities, find local hotspots, and connect with other travelers. Kelly is a budget-conscious traveler who enjoys discovering unique experiences and accommodations that align with her values, especially those that are environmentally sustainable. Kelly is also a dog lover who enjoys taking her shiba inu, Pumpkin, on new adventures, including exploring new hiking trails.
Persona C is a solo traveler who seeks authenticity, affordability, and social connections through travel.
By developing these personas and understanding their needs, preferences, and pain points, we were able to design a user-centric platform that caters to different types of travelers and enhances their overall journey.
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.
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.
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:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Est, facilisis aliquam fermentum nunc diam blandit in mauris facilisis. Eu et, in pharetra, placerat fusce nullam. Faucibus justo nullam ultrices nisl sed fringilla orci nulla. Placerat facilisis facilisi risus vestibulum odio.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
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 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 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.