Jourvel

A travel log app for memories collector

Year
2018

Type
Concept Project
Lean UX

Jourvel was the first of four projects that I undertook during my course at GA. We were paired up with our classmates and were assigned to interview our partner about their interests and identify a problem that could be solved with the design of a simple mobile application.

The task was to design an interactive prototype of a mobile application for my classmate, Emily.

intro-photo

About The Project

Duration

2 Weeks

Design Process

Double Diamond

Role
As the sole designer on this effort, I worked on this project adopting the double diamond design process - from interviewing Emily to discovering her interests and pain points to designing a solution to help solve her problem.

Discover and Define: Understanding Emily

I started off with getting to know Emily to identify issues in her everyday life. I asked her about her daily routines, her interests, what she likes to do, and I found out that she loves to travel, and she often travels abroad for vacation with friends and families. So I dug deeper to learn more about her traveling experiences. I learned that her goal was to have an awesome experience and she doesn’t want to miss out a place, otherwise she would feel regretful, having travelled all the way to the destination. I also discovered that she finds it difficult to log her trips’ memories, and over time, it becomes hard for her to refer back to it.

After the user interview, I laid out all my findings into an affinity map to get a clear picture of Emily’s journey in detail stages, the actions she take at each stage, and her emotional reaction to each stage of the journey.

affinity-map experience-map

Above: Affinity Mapping | Below: Emily’s User Journey

For better understanding, I recreated her journey above into an experience map. During the interview, she mentioned that her media (pictures and videos) are dispersed across multiple platforms, and she wants to be able to categorize it according to her experiences. Based on those findings, I identified Emily’s problem as
Emily needs a way to store memories of her vacations in a streamed lined process as she can refer to the experience and share/recommend it to her friends, unlike going back to her social medias which are cluttered with other aspects/activities in her life.

Develop & Deliver:
Solutions to help Emily log her trips in a streamlined process.

Ideation Sketches

Ideation Sketches

During the ideation and solution stage, I came up with several ideas that could help Emily log her travel memories accordingly and in a simple way. Some of the ideas I came up with were similar, but all of the ideas revolved around a core concept to compartmentalize Emily’s experiences according to her planned expectations of the trips and in a simple way. I defined simple as an elimination of the hassle that her plans, notes, pictures, and references are stored on several platforms — on WhatsApp chats, Instagram, Photos, Notes, and Pages.

As I was ideating some of the initial ideas, I got lost into focusing on the “streamlined process” and didn’t give much thought to “simplicity”. I thought of a travel log app which acts as a travel diary, an app that stores memories in a map form with voice detection so Emily can speak about her experience and it would be automatically logged into the itinerary. The first five ideas answer the same problem but their forms were not simple and easy enough, and it all still seemed to be complicated. But the sixth idea was a lightbulb solution, both function and form were the exact translations of what I had in mind for the app — I thought of creating a travel log app that acts as an all-in-one platform that functions live with the camera while she is on her travels.

Taking a step back to look at the big picture

After spending quite a lot of time on ideation, I then took a step back to see if the solution fits with the situation. I wrote the outcome statement and a storyboard to get a clear picture of how this mobile app will help tackle the issue.

Storyboard of how the app will help Emily.

Storyboard of how the app will help Emily

After knowing what application I was going to design, I made a user flow of how Emily will use the application. This was also to identify the screen flow of the app. I then began to design a prototype for the app.

User Flow

User Flow

Before jumping straight into creating paper prototypes for the app, I translated the screen flow into actions that Emily will take by using the app.

The application helps her to:

1. Create itinerary

2. Document her trips and compartmentalize it to the itinerary she created in 1.

3. Store all her trip information in one platform — can edit it, refer back to it, and share with friends.

screenflow

Usability Test

After creating the paper prototype, I uploaded the screens sketches onto the marvel app to create a clickable prototype to be used in usability testing. For the test, I created a hypothetical situation that Emily goes on vacation in Thailand and identified that the application has three main tasks. The usability test examined each task scenario as follow:

TASK SCENARIO 1: Emily creates an itinerary.

TASK SCENARIO 2: She is able to automatically categorize her media according to her experiences.

TASK SCENARIO 3: She can view/edit/share her travel log with friends.

After the test, I learned that there was a gap between my thoughts on how Emily would use the app and the way she actually interacts with it. I made iterations to the app after observing how Emily interacts with the prototype, and how she wants the app to function. I factored learnings from the test into the iteration and made the following changes to the task scenarios.

TASK 1 |
Emily creates an itinerary
As Emily creates an itinerary, she uses photos found online as reference to the destination she is visiting. She wants to be able add those photos into her travel plan as references so I added a button for her to be able to add media into the itinerary manually.
task 1
TASK 2 |
She is able to automatically categorize her media according to her experiences.
Emily found it hard to indicate if the app is active or not. I created an indication on the homescreen of phone to notify her when the app is activated. Initially, TASK 2 ends when she takes a photo, but after the test, Emily found that it is convenient for her to view the media and updated itinerary right away so she can edit it accordingly. Therefore, I added a “view itinerary” button on the bottom left corner of the phone’s screen for her to be able to access this function. In case the user wants to use the camera for other purposes besides updating media to their itinerary, they can close the app [a pop-up screen on camera] by clicking the “X” button on the top right corner. After iteration, I added an eye icon for the user to be able bring back the pop-up screen, and they can continue to take pictures and compartmentalize their memories into the app.
task 2
TASK 3 |
She can view/edit/share her travel log with friends.
The iteration I made to task scenario 3 was integrating this step into the 2nd task scenario, where Emily is able to view result of the updated travel log right away instead of having to go back to the app to view it.
task 3
Prototype Evolution

Final Prototype 

Conclusion

Takeaways

  • There are some UI tweaks to be improved upon such as adding interaction design and pictures to the ‘Upload to Jourvel’ screen.
  • Additional Screens: Itineary Summary, Photos Screen What screen should users land whey they tap on ‘View itinerary on app’? Do they want to go back to their itinerary summary screen or do they want to view the media they’ve just uploaded? It depends on users’ context of use - I hypothesize that they’d want to go back to their itinerary page since they are in the process of documenting their trip memories while they are on the go.
  • Technical Feasibility: This was my first UX project and the process focused on user research and design. I didn’t consider the tech. feasibility of the domain I was designing for during the design process. After the project, I learned that iPhone doesn’t allow developers to build on their phone’s camera, that’s why camera apps have a separate camera function on their applications.
READ OTHER PROJECTS