Hidden Gems (2016)

[vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”center” background_image_as_pattern=”without_pattern” row_negative_margin=””][vc_column width=”1/1″][vc_single_image image=”1394″ alignment=”center” border_color=”grey” img_link_large=”” img_link_target=”_self” img_size=”full” css=”.vc_custom_1500500948182{margin-bottom: 90px !important;}”][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” anchor=”Inception” css=”.vc_custom_1500501036157{margin-right: 5% !important;margin-left: 5% !important;}”][vc_column width=”1/1″][vc_column_text]

Creating badass UX in the Philippines with no resources or content

 

I was creating a portfolio piece while I was in the Philippines, and then I find out my friend was willing to create it for just $3,000! I had to make sure that the website was easy build on the low budget. Here were my 3 main challenges:

 

 1. Keep costs low

I had to make sure the designs were easy to build because my friend was just learning to code. This presented a problem because there were easy solutions to design challenges, but I couldn’t utilize them.

 

2. Slow internet

The Philippines has the second slowest internet in Asia. Therefore, an experience needs to consider load time and possibly no internet at all.

 

3. Need people to add content

The content of this website is crowdsourced. Therefore, self-policing, vandalism, and accuracy must be encouraged… and the website needs enough users to make the experience worthwhile![/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Flow” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500501512689{margin-top: 120px !important;margin-bottom: 10px !important;}”][vc_column width=”1/1″][vc_column_text]

Business Model Canvas

[/vc_column_text][vc_column_text]

Before conducting research, I needed to be very clear on the value proposition and the goals of the product. The business model makes the purpose and components of the app more salient.

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500502128492{margin-top: 10px !important;margin-bottom: 23px !important;}”][vc_column width=”1/1″][vc_single_image image=”1489″ border_color=”grey” img_link_large=”yes” img_link_target=”_blank” img_size=”full” alignment=”center”][vc_separator type=”normal” position=”center” width_in_percentages=””][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Flow” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500500991182{margin-top: 120px !important;margin-bottom: 15px !important;}”][vc_column width=”1/1″][vc_column_text]

Research

[/vc_column_text][vc_column_text]

Intensive research was done up front before the project began. While research might feel tedious, it makes the rest of the project move faster because there is clarity on what will work and what won’t work.

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=””][vc_column width=”1/1″][vc_single_image image=”1490″ border_color=”grey” img_link_large=”” img_link_target=”_self” img_size=”full” alignment=”center”][vc_separator type=”normal” position=”center” width_in_percentages=””][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Flow” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500500623205{margin-top: 120px !important;margin-bottom: 10px !important;}”][vc_column width=”1/1″][vc_column_text]

Personas

[/vc_column_text][vc_column_text]

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” header_style=”” parallax_content_width=”in_grid” anchor=”” in_content_menu=”” content_menu_title=”” content_menu_icon=”” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” video=”” video_overlay=”” video_overlay_image=”” video_webm=”” video_mp4=”” video_ogv=”” video_image=”” background_image=”” background_image_as_pattern=”without_pattern” section_height=”” parallax_speed=”” background_color=”” border_color=”” row_negative_margin=”” side_padding=”” parallax_side_padding=”” padding_top=”” padding_bottom=”” color=”” hover_color=”” more_button_label=”” less_button_label=”” button_position=”” css_animation=”” transition_delay=””][vc_column width=”1/1″][vc_single_image border_color=”grey” img_link_large=”” img_link_target=”_self” image=”1493″ img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Flow” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500502168602{margin-top: 120px !important;margin-bottom: 23px !important;}”][vc_column width=”1/1″][vc_column_text]

Storyboard

[/vc_column_text][vc_column_text]

A storyboard was created as a preface to the journey map so that the basic phases would be laid out.

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” header_style=”” parallax_content_width=”in_grid” anchor=”” in_content_menu=”” content_menu_title=”” content_menu_icon=”” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” video=”” video_overlay=”” video_overlay_image=”” video_webm=”” video_mp4=”” video_ogv=”” video_image=”” background_image=”” background_image_as_pattern=”without_pattern” section_height=”” parallax_speed=”” background_color=”” border_color=”” row_negative_margin=”” side_padding=”” parallax_side_padding=”” padding_top=”” padding_bottom=”” color=”” hover_color=”” more_button_label=”” less_button_label=”” button_position=”” css_animation=”” transition_delay=””][vc_column width=”1/2″][vc_single_image image=”1494″ border_color=”grey” img_link_large=”yes” img_link_target=”_blank” img_size=”full” alignment=”center”][/vc_column][vc_column width=”1/2″][vc_single_image image=”1495″ border_color=”grey” img_link_large=”yes” img_link_target=”_blank” img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” header_style=”” parallax_content_width=”in_grid” anchor=”” in_content_menu=”” content_menu_title=”” content_menu_icon=”” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” video=”” video_overlay=”” video_overlay_image=”” video_webm=”” video_mp4=”” video_ogv=”” video_image=”” background_image=”” background_image_as_pattern=”without_pattern” section_height=”” parallax_speed=”” background_color=”” border_color=”” row_negative_margin=”” side_padding=”” parallax_side_padding=”” padding_top=”” padding_bottom=”” color=”” hover_color=”” more_button_label=”” less_button_label=”” button_position=”” css_animation=”” transition_delay=”” css=”.vc_custom_1434743767669{margin-top: 120px !important;margin-right: 100px !important;margin-bottom: 23px !important;margin-left: 100px !important;}” el_id=””][vc_column width=”1/1″][vc_column_text]

Journey Map

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”center” background_image_as_pattern=”without_pattern” row_negative_margin=””][vc_column width=”1/1″][vc_single_image image=”1497″ alignment=”center” border_color=”grey” img_link_large=”yes” img_link_target=”_self” img_size=”full”][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Sketch” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500502197301{margin-top: 120px !important;margin-bottom: 23px !important;}”][vc_column width=”1/1″][vc_column_text]

Process Flow

[/vc_column_text][vc_column_text]

This is a simple layout of the main steps that are involved in the task of finding a hidden gem one is interested in, ending in a user finding a guide he wants to book.

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”center” background_image_as_pattern=”without_pattern” row_negative_margin=””][vc_column width=”1/1″][vc_single_image image=”1512″ alignment=”center” border_color=”grey” img_link_large=”yes” img_link_target=”_self” img_size=”full”][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Sketch” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500502237100{margin-top: 120px !important;margin-bottom: 23px !important;}”][vc_column width=”1/1″][vc_column_text]

Cost of drivers and guides

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”center” background_image_as_pattern=”without_pattern” row_negative_margin=””][vc_column width=”1/1″][vc_column_text]

These are the standard prices drivers and guides use. As guides and drivers sign up, they have to agree to the prices. These prices were found out while doing research. Looks pretty simple right? The way that the prices are displayed in the UI also took design genius. Showing “per person” rather than as a whole.

[/vc_column_text][vc_single_image image=”1491″ border_color=”grey” img_link_large=”” img_link_target=”_self” img_size=”full” alignment=”center”][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Wireframe” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500502460145{margin-top: 80px !important;margin-bottom: 23px !important;}”][vc_column width=”1/1″][vc_column_text]

Wireframe Logic

I’m super smart. Read about how I set up the interface like I did.

Or if you really want to see the fullness of my genius- read the full explanation of the wireframes.

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”grid” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1434764341151{margin-bottom: 23px !important;}”][vc_column width=”1/4″][vc_single_image image=”1515″ border_color=”grey” img_link_large=”yes” img_link_target=”_blank” img_size=”full”][/vc_column][vc_column width=”3/4″][vc_column_text]

Discovering gems by location

1. By putting a small image and small text on the card, it allows the user to pan around the map/image more.

2. This is an image rather than an actual map. It was done this way because there won’t be any load time, as it will be downloaded (quickly) at first, and cached afterwards.

3. At the top of the page, it makes the value proposition very clear, so the user always remembers what they are doing in the app. 

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”grid” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1434764354761{margin-top: 10px !important;margin-bottom: 23px !important;}”][vc_column width=”1/4″][vc_single_image image=”1514″ border_color=”grey” img_link_large=”yes” img_link_target=”_blank” img_size=”full”][/vc_column][vc_column width=”3/4″][vc_column_text]

Hidden gem page

1. Having large pictures at the top have become almost best practices for listings where visual is extremely important. In addition, it allows the most impressive image to be there so that a moderator can go through and make sure there is good content.

2. It says the name of the gem above and below the gem so that an emphasis on the image would be even more apparent.

3. The main call to action is to see guides and drivers to take the user there. This is because users

4. It shows how man images are there so that a user will know what happens when an image is selected.

5. The name of the hidden gem is put at the top, but it is not that big because the name is essentially meaningless to the user as they will never have heard of it.[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”grid” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1434764392110{margin-top: 10px !important;margin-bottom: 23px !important;}”][vc_column width=”1/4″][vc_single_image image=”1518″ border_color=”grey” img_link_large=”yes” img_link_target=”_blank” img_size=”full”][/vc_column][vc_column width=”3/4″][vc_column_text]

Guide’s  Profile Page 

1. He actually did not write his bio. He inputted the information when he signed up, and then it was made to look friendly as it was put in first person sentences

2. The main CTA is in the middle of the page instead of a sticky button at the bottom of the screen because there was already a sticky CTA on the previous screen

3. Tagalog was used in order to make it more of a “local’s app.” If it is a local’s app, it’d indicate that it’s a cheaper site to use, which is true- as it is one of the competitive edges to other platnforms

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” anchor=”Sketch” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500500733026{margin-top: 120px !important;}”][vc_column width=”1/1″][vc_column_text]

Prototype

[/vc_column_text][vc_column_text]

There is a fully functional prototype for you to play with in proto.io. You do not need to create a login username and password in order to use it. Just click on the image below!

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” parallax_content_width=”in_grid” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”center” background_image_as_pattern=”without_pattern” row_negative_margin=”” css=”.vc_custom_1500502498195{margin-bottom: 100px !important;}” anchor=”Gamification”][vc_column width=”1/1″][vc_single_image image=”1506″ alignment=”center” border_color=”grey” img_link_large=”” img_link_target=”_blank” img_size=”full” link=”https://share.proto.io/LILOYR/”][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” header_style=”” parallax_content_width=”in_grid” anchor=”Sketch” in_content_menu=”” content_menu_title=”” content_menu_icon=”” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” video=”” video_overlay=”” video_overlay_image=”” video_webm=”” video_mp4=”” video_ogv=”” video_image=”” background_image=”” background_image_as_pattern=”without_pattern” section_height=”” parallax_speed=”” background_color=”” border_color=”” row_negative_margin=”” side_padding=”” parallax_side_padding=”” padding_top=”” padding_bottom=”” color=”” hover_color=”” more_button_label=”” less_button_label=”” button_position=”” css_animation=”” transition_delay=”” css=”.vc_custom_1500500733026{margin-top: 120px !important;}” el_id=””][vc_column width=”1/1″][vc_column_text]

Videos made to describe development tasks to the coders

[/vc_column_text][vc_column_text]

As this was an outsourced project, and done on a tight budget the developers needed to be very clear on what to do. Over 20 videos were created to describe exactly what the developers needed to build. You should watch the hours of video to see how good I am!

[/vc_column_text][/vc_column][/vc_row][vc_row row_type=”row” use_row_as_full_screen_section=”no” type=”full_width” header_style=”” parallax_content_width=”in_grid” anchor=”” in_content_menu=”” content_menu_title=”” content_menu_icon=”” angled_section=”no” angled_section_position=”both” angled_section_direction=”from_left_to_right” text_align=”left” video=”” video_overlay=”” video_overlay_image=”” video_webm=”” video_mp4=”” video_ogv=”” video_image=”” background_image=”” background_image_as_pattern=”without_pattern” section_height=”” parallax_speed=”” background_color=”” border_color=”” row_negative_margin=”” side_padding=”” parallax_side_padding=”” padding_top=”” padding_bottom=”” color=”” hover_color=”” more_button_label=”” less_button_label=”” button_position=”” css_animation=”” transition_delay=””][vc_column width=”1/1″][vc_video link=”https://www.youtube.com/playlist?list=PLteto2fEsc-9rVVj4cEXRPp6kJcV9lIrD”][/vc_column][/vc_row]

Leave a comment

Your email address will not be published. Required fields are marked *