Whose Land is an educational app that aims to teach people (with main focus on children and young adults) histories about the traditional territories and communities of Indigenous peoples around the world.
Whose Land is an educational app that aims to teach people (with main focus on children and young adults) histories about the traditional territories and communities of Indigenous peoples around the world.
Whose Land is an educational app that aims to teach people (with main focus on children and young adults) histories about the traditional territories and communities of Indigenous peoples around the world.
In this project I aim to simplify and streamline the navigation process by restructuring and redefining visual values of the app’s desktop system.
In this project I aim to simplify and streamline the navigation process by restructuring and redefining visual values of the app’s desktop system.
In this project I aim to simplify and streamline the navigation process by restructuring and redefining visual values of the app’s desktop system.
PROBLEM
Poor textual organization.
Lack of visual structure.
Informationally "overloaded" pages.
Poor textual organization.
Lack of visual structure.
Informationally "overloaded" pages.
Poor textual organization.
Lack of visual structure.
Informationally "overloaded" pages.
UX Research
UX Design
UI Design
UX Research
UX Design
UI Design
UX Research
UX Design
UI Design
User & Market Research
Usability Testing
Service Design
User & Market Research
Usability Testing
Service Design
User & Market Research
Usability Testing
Service Design
Figma
Adobe Illustrator
Figma
Adobe Illustrator
Figma
Adobe Illustrator
Updated design system.
Prototypes of the key pages: Home, About, How to, and the map functions.
Service analysis summary.
Updated design system.
Prototypes of the key pages: Home, About, How to, and the map functions.
Service analysis summary.
Updated design system.
Prototypes of the key pages: Home, About, How to, and the map functions.
Service analysis summary.
The SWOT analysis was done in a group of 4 to identify pain and gain points of the current app.
The SWOT analysis was done in a group of 4 to identify pain and gain points of the current app.
The SWOT analysis was done in a group of 4 to identify pain and gain points of the current app.
Strengths and Opportunities:
Engages a variety of media formats in a consistent visual theme.
Very interactive
Large amounts of information across multiple topics regarding culture and history
Possibility to add navigation tutorial and re-organize information for better navigation
Strengths and Opportunities:
Engages a variety of media formats in a consistent visual theme.
Very interactive
Large amounts of information across multiple topics regarding culture and history
Possibility to add navigation tutorial and re-organize information for better navigation
Strengths and Opportunities:
Engages a variety of media formats in a consistent visual theme.
Very interactive
Large amounts of information across multiple topics regarding culture and history
Possibility to add navigation tutorial and re-organize information for better navigation
Weaknesses and Threats:
Confusing layout makes certain pages overwhelming and stressful to navigate
Lack of visual and textual balance
Only 2 available languages
Possible hardship in finding additional information due to the histories of cultural erasure
Weaknesses and Threats:
Confusing layout makes certain pages overwhelming and stressful to navigate
Lack of visual and textual balance
Only 2 available languages
Possible hardship in finding additional information due to the histories of cultural erasure
Weaknesses and Threats:
Confusing layout makes certain pages overwhelming and stressful to navigate
Lack of visual and textual balance
Only 2 available languages
Possible hardship in finding additional information due to the histories of cultural erasure
WhoseLand was compared against 5 apps that matched in either full purpose or certain aspects, such as being informational website or a map based tool.
WhoseLand was compared against 5 apps that matched in either full purpose or certain aspects, such as being informational website or a map based tool.
WhoseLand was compared against 5 apps that matched in either full purpose or certain aspects, such as being informational website or a map based tool.
Strengths:
Educational material instead of simple visualization
Offline availability
Historic information present
Strengths:
Educational material instead of simple visualization
Offline availability
Historic information present
Strengths:
Educational material instead of simple visualization
Offline availability
Historic information present
Weaknesses:
Lack of structure with textual and visual presentation
Wider range of information regarding other countries and continents
Community aspects
Weaknesses:
Lack of structure with textual and visual presentation
Wider range of information regarding other countries and continents
Community aspects
Weaknesses:
Lack of structure with textual and visual presentation
Wider range of information regarding other countries and continents
Community aspects
The user persona was developed to help direct the new implementations at the needs of the selected user group.
The target audience of the original app are teenagers (ages 13 to 17), due to it's educational abilities. But through the research, I have discovered the potential to expand the app towards newcomers and tourists, who might be less familiar with the histories of North America as a whole.
In this case the persona is a French tourist Paul, planning to backpack across multiple provinces and territories across North America.
The user persona was developed to help direct the new implementations at the needs of the selected user group.
The target audience of the original app are teenagers (ages 13 to 17), due to it's educational abilities. But through the research, I have discovered the potential to expand the app towards newcomers and tourists, who might be less familiar with the histories of North America as a whole.
In this case the persona is a French tourist Paul, planning to backpack across multiple provinces and territories across North America.
The user persona was developed to help direct the new implementations at the needs of the selected user group.
The target audience of the original app are teenagers (ages 13 to 17), due to it's educational abilities. But through the research, I have discovered the potential to expand the app towards newcomers and tourists, who might be less familiar with the histories of North America as a whole.
In this case the persona is a French tourist Paul, planning to backpack across multiple provinces and territories across North America.
click on the image above to get a closer look
click on the image above to get a closer look
Creating a sitemap of the app’s navigation system helped outline the categories of the menu tabs and establish the order in which a user is expected to approach them, making it easier to identify issues such as repetitive clustering of information seen in the left section of the map.
The identified categories were further used in the card sorting exercise.
Creating a sitemap of the app’s navigation system helped outline the categories of the menu tabs and establish the order in which a user is expected to approach them, making it easier to identify issues such as repetitive clustering of information seen in the left section of the map.
The identified categories were further used in the card sorting exercise.
Creating a sitemap of the app’s navigation system helped outline the categories of the menu tabs and establish the order in which a user is expected to approach them, making it easier to identify issues such as repetitive clustering of information seen in the left section of the map.
The identified categories were further used in the card sorting exercise.
In card sorting exercise, 5 participants were asked to organize all menu tabs of Whose Land app into categories.
While common tabs like “Menu,” “Search,” and “Filter” were easy to place, participants struggled with placing more specialized sections onto the list.
In card sorting exercise, 5 participants were asked to organize all menu tabs of Whose Land app into categories.
While common tabs like “Menu,” “Search,” and “Filter” were easy to place, participants struggled with placing more specialized sections onto the list.
In card sorting exercise, 5 participants were asked to organize all menu tabs of Whose Land app into categories.
While common tabs like “Menu,” “Search,” and “Filter” were easy to place, participants struggled with placing more specialized sections onto the list.
By tracking trends in the card placement, we begin to see patterns in which to restructure the app in order to make it more comprehensive and easily accessible for potential users.
Some of the commonly presented names for sections were Community, Map, Navigation, Treaties & Territories, which was used to re-build the navigation system of the app.
By tracking trends in the card placement, we begin to see patterns in which to restructure the app in order to make it more comprehensive and easily accessible for potential users.
Some of the commonly presented names for sections were Community, Map, Navigation, Treaties & Territories, which was used to re-build the navigation system of the app.
By tracking trends in the card placement, we begin to see patterns in which to restructure the app in order to make it more comprehensive and easily accessible for potential users.
Some of the commonly presented names for sections were Community, Map, Navigation, Treaties & Territories, which was used to re-build the navigation system of the app.
Based on the previous analyses, I updated the sitemap, implementing the gathered insight and feedback.
Based on the previous analyses, I updated the sitemap, implementing the gathered insight and feedback.
Based on the previous analyses, I updated the sitemap, implementing the gathered insight and feedback.
Main areas of focus:
Re-grouping of certain tabs
Better categorization of overall informational flow
Wider spread of text over multiple section to streamline navigation
Main areas of focus:
Re-grouping of certain tabs
Better categorization of overall informational flow
Wider spread of text over multiple section to streamline navigation
Main areas of focus:
Re-grouping of certain tabs
Better categorization of overall informational flow
Wider spread of text over multiple section to streamline navigation
Relying on the structure of the sitemap, I further developed wireframes to help layout the UI features on the screen.
Combined with already existing structures of the actual app, this step helps further visualize the established navigation process of the welcome screen and the basic map function.
Relying on the structure of the sitemap, I further developed wireframes to help layout the UI features on the screen.
Combined with already existing structures of the actual app, this step helps further visualize the established navigation process of the welcome screen and the basic map function.
Relying on the structure of the sitemap, I further developed wireframes to help layout the UI features on the screen.
Combined with already existing structures of the actual app, this step helps further visualize the established navigation process of the welcome screen and the basic map function.
The first user-testing focused on navigation of the 3 participants through the basic wireframes that didn’t yet change the visual layout of the map.
The first user-testing focused on navigation of the 3 participants through the basic wireframes that didn’t yet change the visual layout of the map.
The first user-testing focused on navigation of the 3 participants through the basic wireframes that didn’t yet change the visual layout of the map.
Key takeaways:
Provide a list of all territories and treaties
Add a “how-to” page
Restructure visual elements for better clarity
Key takeaways:
Provide a list of all territories and treaties
Add a “how-to” page
Restructure visual elements for better clarity
Key takeaways:
Provide a list of all territories and treaties
Add a “how-to” page
Restructure visual elements for better clarity
With further progress:
The color was added for stylistic development.
The zoom-in and out function, and an introductory pop-up with historic and cultural contexts of the app were added.
The map was re-drawn and further categorized to make the visual less overwhelming.
Finally, the menu bar was further moved and adjusted for better clarity.
With further progress:
The color was added for stylistic development.
The zoom-in and out function, and an introductory pop-up with historic and cultural contexts of the app were added.
The map was re-drawn and further categorized to make the visual less overwhelming.
Finally, the menu bar was further moved and adjusted for better clarity.
With further progress:
The color was added for stylistic development.
The zoom-in and out function, and an introductory pop-up with historic and cultural contexts of the app were added.
The map was re-drawn and further categorized to make the visual less overwhelming.
Finally, the menu bar was further moved and adjusted for better clarity.
The second user-testing run in 2 stages, with 3 participants each. The latter set was a mismatch of previous partakers.
The second user-testing run in 2 stages, with 3 participants each. The latter set was a mismatch of previous partakers.
The second user-testing run in 2 stages, with 3 participants each. The latter set was a mismatch of previous partakers.
Key takeaways:
Re-organize the menu bar with focus on spreading out the text and simplifying navigation further
Overall positive feedback on the visual presentation and navigation
Key takeaways:
Re-organize the menu bar with focus on spreading out the text and simplifying navigation further
Overall positive feedback on the visual presentation and navigation
Key takeaways:
Re-organize the menu bar with focus on spreading out the text and simplifying navigation further
Overall positive feedback on the visual presentation and navigation
Colors
Colors
Colors
Additional Elements
Additional Elements
Additional Elements
Typography
Kanit - SemiBold
Inter - Medium
Inter - SemiBold
Inter - Bold
Typography
Kanit - SemiBold
Inter - Medium
Inter - SemiBold
Inter - Bold
Typography
Kanit - SemiBold
Inter - Medium
Inter - SemiBold
Inter - Bold
The final Figma prototype is available bellow and is accessible through this link.
The final Figma prototype is available bellow and is accessible through this link.
The final Figma prototype is available bellow and is accessible through this link.
As this was a more extensive project, that required focus across multiple channels (research, branding, prototyping), I had to be able to multi-task and work in-between mediums. While this was quite energy consuming in the process, I am quite proud of the final result as it came together into a comprehensive prototype for future development.
As this was a more extensive project, that required focus across multiple channels (research, branding, prototyping), I had to be able to multi-task and work in-between mediums. While this was quite energy consuming in the process, I am quite proud of the final result as it came together into a comprehensive prototype for future development.
As this was a more extensive project, that required focus across multiple channels (research, branding, prototyping), I had to be able to multi-task and work in-between mediums. While this was quite energy consuming in the process, I am quite proud of the final result as it came together into a comprehensive prototype for future development.
While the prototype shows high level of fidelity, certain interactions between elements could be smoothed out for more intuitive navigation.
I am happy with the fact that the usability tests found the "How to" section helpful, but I wish it could be cut down to be more simple, fast and straightforward.
While the prototype shows high level of fidelity, certain interactions between elements could be smoothed out for more intuitive navigation.
I am happy with the fact that the usability tests found the "How to" section helpful, but I wish it could be cut down to be more simple, fast and straightforward.
While the prototype shows high level of fidelity, certain interactions between elements could be smoothed out for more intuitive navigation.
I am happy with the fact that the usability tests found the "How to" section helpful, but I wish it could be cut down to be more simple, fast and straightforward.