Lunaventura came to us with the goal of revolutionizing the way young people and students thought about travel. They brought our design team on board for a complete brand refresh and—with the help of their team of developers—spearheaded the design direction of their up-and-coming travel app, "Tripular."

Lunaventura came to us with the goal of revolutionizing the way young people and students thought about travel. They brought our design team on board for a complete brand refresh and—with the help of their team of developers—spearheaded the design direction of their up-and-coming travel app, "Tripular."

Lunaventura came to us with the goal of revolutionizing the way young people and students thought about travel. They brought our design team on board for a complete brand refresh and—with the help of their team of developers—spearheaded the design direction of their up-and-coming travel app, "Tripular."

PHASE 1

PHASE 1

PHASE 1

First, we needed an accurate view on who we were competing with. So, we conducted research on the competition and the general travel app space. This gave us our Competitive Analysis and showed us the gaps where Tripular would stand out among the rest.

First, we needed an accurate view on who we were competing with. So, we conducted research on the competition and the general travel app space. This gave us our Competitive Analysis and showed us the gaps where Tripular would stand out among the rest.

First, we needed an accurate view on who we were competing with. So, we conducted research on the competition and the general travel app space. This gave us our Competitive Analysis and showed us the gaps where Tripular would stand out among the rest.

PHASE 2

PHASE 2

PHASE 2

However, it wasn't enough to understand the competition, we also needed to understand our users! So we sent out a survey to gauge where our potential customers were at and received over 100+ responses! With this data, we were able to set up user personas. These people made up the bulk of our initial beta testers.

However, it wasn't enough to understand the competition, we also needed to understand our users! So we sent out a survey to gauge where our potential customers were at and received over 100+ responses! With this data, we were able to set up user personas. These people made up the bulk of our initial beta testers.

However, it wasn't enough to understand the competition, we also needed to understand our users! So we sent out a survey to gauge where our potential customers were at and received over 100+ responses! With this data, we were able to set up user personas. These people made up the bulk of our initial beta testers.

We also got to work on a rough outline of the user journey; things like user stories, user flows, and in the process, settled on the two main groups of users: Tripper, Planner. This provided us with an idea of how the app would function, and how users would interact with it.

We also got to work on a rough outline of the user journey; things like user stories, user flows, and in the process, settled on the two main groups of users: Tripper, Planner. This allowed us to get an idea of how the app would function, and how users would interact with it.

We also got to work on a rough outline of the user journey; things like user stories, user flows, and in the process, settled on the two main groups of users: Tripper, Planner. This allowed us to get an idea of how the app would function, and how users would interact with it.

While all this was going on, the Design Lead and I worked on the design system so that when the team started wireframing, there would be a library of assets ready to work with. This was continuously updated as the project went on.

While all this was going on, the Design Lead and I worked on the design system so that once the team started wireframing, there would be a library of assets ready to work with. This was continuously updated as the project went on.

While all this was going on, the Design Lead and I worked on the design system so that once the team started wireframing, there would be a library of assets ready to work with. This was continuously updated as the project went on.

Lunaventura’s existing branding was a hot pink, so we kept it when coming up with a system for Tripular. This would represent the Planner. Next, we decided on an analogous indigo in order to create contrast but still feel cohesive and complete. This represented the Tripper. This combo also tested well with the visually impaired.

Lunaventura’s existing branding was a hot pink, so we kept it when coming up with a system for Tripular. This would represent the Planner. Next, we decided on an analogous indigo in order to create contrast but still feel cohesive and complete. This represented the Tripper. This combo also tested well with the visually impaired.

Lunaventura’s existing branding was a hot pink, so we kept it when coming up with a system for Tripular. This would represent the Planner. Next, we decided on an analogous indigo in order to create contrast but still feel cohesive and complete. This represented the Tripper. This combo also tested well with the visually impaired.

We went with Maven Pro for its unique curvature and flowing rhythm. Its friendly nature is inviting and modern. We paired that with Noto Sans, global font collection for writing in all modern languages. For a travel app, we definitely needed to have a type family that could translate beautifully across multiple languages.

We went with Maven Pro for its unique curvature and flowing rhythm. Its’ friendly nature is inviting and modern. We paired that with Noto Sans, global font collection for writing in all modern languages. For a travel app, we definitely needed to have a type family that could translate beautifully across multiple languages.

We went with Maven Pro for its unique curvature and flowing rhythm. Its friendly nature is inviting and modern. We paired that with Noto Sans, global font collection for writing in all modern languages. For a travel app, we definitely needed to have a type family that could translate beautifully across multiple languages.

Finally, we sourced our icons from the Material Design library due to it’s extensive collection and its support of the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helped our team quickly build beautiful products.

Finally, we sourced our icons from the Material Design library due to it’s extensive collection and its support of the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helped our team quickly build beautiful products.

Finally, we sourced our icons from the Material Design library due to it’s extensive collection and its support of the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helped our team quickly build beautiful products.

PHASE 3

PHASE 3

PHASE 3

With the flows roughed out, we each took a section and started working on the wireframes. The Dev team and Founder were allowed access to make comments on our flows once we had finalized them and this proved to be essential as it allowed them to ask questions while also providing their thoughts and knowledge.

With the flows roughed out, we each took a section and started working on the wireframes. The Dev team and Founder were allowed access to make comments on our flows once we had finalized them and this proved to be essential as it allowed them to ask questions while also providing their thoughts and knowledge.

With the flows roughed out, we each took a section and started working on the wireframes. The Dev team and Founder were allowed access to make comments on our flows once we had finalized them and this proved to be essential as it allowed them to ask questions while also providing their thoughts and knowledge.

You can try out a rough prototype here (only the Next and Back buttons work for now): https://pr.to/QJI5TL/

You can try out a rough prototype here (only the Next and Back buttons work for now): https://pr.to/QJI5TL/

You can try out a rough prototype here (only the Next and Back buttons work for now): https://pr.to/QJI5TL/

A teammate and I were assigned the Create/Edit Trip flow. First we took a look at the user flow and user stories and started looking for some inspiration before splitting off and roughing out our first designs.

A teammate and I were assigned the Create/Edit Trip flow. First we took a look at the user flow and user stories and started looking for some inspiration before splitting off and roughing out our first designs.

A teammate and I were assigned the Create/Edit Trip flow. First we took a look at the user flow and user stories and started looking for some inspiration before splitting off and roughing out our first designs.

Below, you can see some exploration on the nav menu. I experimented with vertical and horizontal placements, and whether the text should be on the left or the right. This is the Basic Info section for the Tripper to start inputting trip information like Title, Destination, Duration and Description.

Here, you can see some exploration on the nav menu. I experimented with vertical and horizontal placements, and whether the text should be on the left or the right. This is the Basic Info section for the Tripper to start inputting trip information like Title, Destination, Duration and Description.

Here, you can see some exploration on the nav menu. I experimented with vertical and horizontal placements, and whether the text should be on the left or the right. This is the Basic Info section for the Tripper to start inputting trip information like Title, Destination, Duration and Description.

After a round of feedbacks, the consensus was that the vertical would be preferred for desktop while the horizonal would work well for mobile. There was also some updates to the user flow which required the addition of Tripper Capacity, and the Tags feature. My teammate was also moved to a different flow so I continued to bring this flow to the finish line.

After a round of feedbacks, the consensus was that the vertical would be preferred for desktop while the horizonal would work well for mobile. There was also some updates to the user flow which required the addition of Tripper Capacity, and the Tags feature. My teammate was also moved to a different flow so I continued to bring this flow to the finish line.

After a round of feedbacks, the consensus was that the vertical would be preferred for desktop while the horizonal would work well for mobile. There was also some updates to the user flow which required the addition of Tripper Capacity, and the Tags feature. My teammate was also moved to a different flow so I continued to bring this flow to the finish line.

As you can see on the mobile mock-up below, certain decisions were made to accommodate for a more mobile friendly experience, such as opting to go with a more intuitive tap-and-drag feature instead of having to type the number with a keyboard.

As you can see on mobile, I made certain decisions that were more mobile friendly, such as opting to go with a more intuitive tap-and-drag feature instead of having to type the number with a keyboard.

As you can see on mobile, I made certain decisions that were more mobile friendly, such as opting to go with a more intuitive tap-and-drag feature instead of having to type the number with a keyboard.

Here, you can see the error window that pops up to warn the user if they decide to use a native shortcut to exit out of the app instead of using our internal “Save & Exit” button to save our users the frustration of possibly losing all their information.

Here, you can see the error window that pops up to warn the user if they decide to use a native shortcut to exit out of the app instead of using our internal “Save & Exit” button to save our users the frustration of possibly losing all their information.

Here, you can see the error window that pops up to warn the user if they decide to use a native shortcut to exit out of the app instead of using our internal “Save & Exit” button to save our users the frustration of possibly losing all their information.

This is the Media section. Note that the nav menu has the visual cue of indicating the section the user is on by showing it filling up as the Planner progresses. This section encourages the Planner to populate their trip page with beautiful photos that will entice Trippers to join.

This is the Media section. Note that the nav menu has the visual cue of indicating the section the user is on by showing it filling up as the Planner progresses. This section encourages the Planner to populate their trip page with beautiful photos that will entice Trippers to join.

This is the Media section. Note that the nav menu has the visual cue of indicating the section the user is on by showing it filling up as the Planner progresses. This section encourages the Planner to populate their trip page with beautiful photos that will entice Trippers to join.

Originally, this process involved relying on the native camera app to crop and upload. With the Dev team’s guidance, it was suggested that at this early stage, it would be better to request the user to crop/adjust their pics outside of the app because this was actually a custom functionality and we would have had to provide this feature in app, hence we removed the section from the flow. They are shown here for visual purposes only.

Originally, this process involved relying on the native camera app to crop and upload. With the Dev team’s guidance, it was suggested that at this early stage, it would be better to request the user to crop/adjust their pics outside of the app because this was actually a custom functionality and we would have had to provide this feature in app, hence we removed the section from the flow. They are shown here for visual purposes only.

Originally, this process involved relying on the native camera app to crop and upload. With the Dev team’s guidance, it was suggested that at this early stage, it would be better to request the user to crop/adjust their pics outside of the app because this was actually a custom functionality and we would have had to provide this feature in app, hence we removed the section from the flow. They are shown here for visual purposes only.

For the Inclusions & Itinerary section, it seemed best to have these “Add” card functions as the Planner could be adding quite a number of them depending on how many stops there were in the trip. Here, they’d also be able to provide Transport information such as car type and licence plate. Itinerary followed the same.

For the Inclusions & Itinerary section, it seemed best to have these “Add” card functions as the Planner could be adding quite a number of them depending on how many stops there were in the trip. Here, they’d also be able to provide Transport information such as car type and licence plate. Itinerary followed the same.

For the Inclusions & Itinerary section, it seemed best to have these “Add” card functions as the Planner could be adding quite a number of them depending on how many stops there were in the trip. Here, they’d also be able to provide Transport information such as car type and licence plate. Itinerary followed the same.

One challenge we encountered was that users could accidentally enter itinerary items out of order when it would be best to be ordered chronologically from a Tripper perspective. Should we have included an option to drag and rearrange order? That could potentially allow space for human error however. We reached out to the Dev team who kindly let us know that it was possible to auto-order from the back-end. With that knowledge, we continued on.

One challenge we encountered was that users could accidentally enter itinerary items out of order when it would be best to be ordered chronologically from a Tripper perspective. Should we have included an option to drag and rearrange order? That could potentially allow space for human error however. We reached out to the Dev team who kindly let us know that it was possible to auto-order from the back-end. With that knowledge, we continued on.

One challenge we encountered was that users could accidentally enter itinerary items out of order when it would be best to be ordered chronologically from a Tripper perspective. Should we have included an option to drag and rearrange order? That could potentially allow space for human error however. We reached out to the Dev team who kindly let us know that it was possible to auto-order from the back-end. With that knowledge, we continued on.

Finally, it was handed off to the Dev team to code and we also sent it off to the users who agreed to be our beta testers. Our group included 12 individuals who in turn would make comments as they envisioned using the rough prototype. Overall, the comments were as expected. Majority of them commented on the Inclusion section. It seemed rather tedious to have to add each individual activity which we agreed with.

What if they wanted to include a section where the Trippers could have some solo time to explore on their own like in regular tours? Would that go in Departure? Or Activity? What was the difference between an Departure and Activity? There were many things to consider after this session it was clear that there was still much to do to make the app more efficient and easy for users to understand.

Finally, it was handed off to the Dev team to code and we also sent it off to the users who agreed to be our beta testers. Our group included 12 individuals who in turn would make comments as they envisioned using the rough prototype. Overall, the comments were as expected. Majority of them commented on the Inclusion section. It seemed rather tedious to have to add each individual activity which we agreed with. What if they wanted to include a section where the Trippers could have some solo time to explore on their own like in regular tours? Would that go in Departure? Or Activity? What was the difference between an Departure and Activity? There were many things to consider after this session such as making changes to copy to make the instructions more clear and I found it enlightening to know that there was still much to do to make the app more efficient and easy for users to understand.

Finally, it was handed off to the Dev team to code and we also sent it off to the users who agreed to be our beta testers. Our group included 12 individuals who in turn would make comments as they envisioned using the rough prototype. Overall, the comments were as expected. Majority of them commented on the Inclusion section. It seemed rather tedious to have to add each individual activity which we agreed with. What if they wanted to include a section where the Trippers could have some solo time to explore on their own like in regular tours? Would that go in Departure? Or Activity? What was the difference between an Departure and Activity? There were many things to consider after this session such as making changes to copy to make the instructions more clear and I found it enlightening to know that there was still much to do to make the app more efficient and easy for users to understand.