UI RE-DESIGN OF A DESKTOP APP: WHOSELAND
UI RE-DESIGN OF A
DESKTOP APP - WHOSELAND
Detailed market analysis for the visual system update.
Detailed market analysis for the visual system update.
BRIEF
BRIEF
Whose Land is an educational app that aims to teach children and young adults the histories of traditional Indigenous territories and communities around the world.
Whose Land is an educational app that aims to teach children and young adults the histories of traditional Indigenous territories and communities 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.
MY ROLE
MY ROLE
UX Research
Market Research
UX/UI Design
UX Research
Market Research
UX/UI Design
TOOLS
TOOLS
Figma
Adobe Illustrator
Figma
Adobe Illustrator
UX RESEARCH
UX RESEARCH
SWOT Analysis
SWOT Analysis
While relatively simplistic, this model of analysis allowed me to better understand what aspects of the app can be further developed and which ones would need to be improved to create an even stronger product. This way I begin to shape the focus areas of the work ahead.
While relatively simplistic, this model of analysis allowed me to better understand what aspects of the app can be further developed and which ones would need to be improved to create an even stronger product. This way I begin to shape the focus areas of the work ahead.
Strengths and Opportunities:
Different content formats for easier access
Highly interactive
Provides lots of culturally significant information
Possibility to re-structure the content for better navigation
Strengths and Opportunities:
Different content formats for easier access
Highly interactive
Provides lots of culturally significant information
Possibility to re-structure the content for better navigation
Weaknesses and Threats:
Confusing layout makes certain pages overwhelming and stressful
Lack of visual and textual balance
Only 2 available languages
Weaknesses and Threats:
Confusing layout makes certain pages overwhelming and stressful
Lack of visual and textual balance
Only 2 available languages
Market Research
Market Research
To better understand the unique values that WhoseLand can offer to the users, I studied other similar apps on the market and compared them all in the table below. This further highlighted what can be optimized to keep up with the niche.
To better understand the unique values that WhoseLand can offer to the users, I studied other similar apps on the market and compared them all in the table below. This further highlighted what can be optimized to keep up with the niche.
WhoseLand Strengths:
Educational material instead of simple visualization
Offline availability
Historic information present
WhoseLand Strengths:
Educational material instead of simple visualization
Offline availability
Historic information present
WhoseLand Weaknesses:
Lack of structure with textual and visual presentation
Wider range of information regarding other countries and continents
Community aspects
WhoseLand Weaknesses:
Lack of structure with textual and visual presentation
Wider range of information regarding other countries and continents
Community aspects
RESEARCH SYNTHESIS
RESEARCH SYNTHESIS
Key Research Findings
Key Research Findings
These are the main issues with the current WhoseLand app as identified by my research:
These are the main issues with the current WhoseLand app as identified by my research:
Poor textual organization
Poor textual organization
Lack of visual structure
Lack of visual structure
Informationally "overloaded" pages
Informationally "overloaded" pages
User Persona
User Persona
After conducting the research, I chose to slightly re-define the target audience.
While the original focused on teenagers (ages 13 to 17), due to it's educational abilities, I have discovered the potential to expand the app towards newcomers and tourists.
Since both aim to educate those unaware about the complex histories and varied cultures of the Indigenous Peoples, the persona further highlighted the need for clear visual system and simplified information navigation.
After conducting the research, I chose to slightly re-define the target audience.
While the original focused on teenagers (ages 13 to 17), due to it's educational abilities, I have discovered the potential to expand the app towards newcomers and tourists.
Since both aim to educate those unaware about the complex histories and varied cultures of the Indigenous Peoples, the persona further highlighted the need for clear visual system and simplified information navigation.
click on the image above to get a closer look
click on the image above to get a closer look
Improved Navigation
Improved Navigation
Based on the analysis, I structured the sitemap which shows updated website navigation system in the order of tabs.
Based on the analysis, I structured the sitemap which shows updated website navigation system in the order of tabs.
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 tabs for more intuitive navigation.
Adding sections within the outlined area to reduce the informational overload
Simplification of the visual systems for easier navigation and better accessibility
PROTOTYPE & DESIGN
PROTOTYPE & DESIGN
LO-FI Sketches & Wireframes
LO-FI Sketches & Wireframes
Based on the findings, I first began structuring the new website layout through wireframes and sketches to help place the new features on screen.
Combined with the existing structures of the actual app, I added:
Based on the findings, I first began structuring the new website layout through wireframes and sketches to help place the new features on screen.
Combined with the existing structures of the actual app, I added:
Outlined sections on the map, instead of the busy overlays
Outlined sections on the map, instead of the busy overlays
Menu and descriptions of each tab that can be hidden if needed
Menu and descriptions of each tab that can be hidden if needed
Navigation bar for each text-filled page for easier access to each section
Navigation bar for each text-filled page for easier access to each section
User Testing I
User Testing I
In this session, 3 participants that matched the target user description (teenagers and/or newcomers) were invited to explore the wireframes seen above.
The specific tasks provided were to find a Treaty 8 and a piece of information from the FAQ page. Key outtakes were:
In this session, 3 participants that matched the target user description (teenagers and/or newcomers) were invited to explore the wireframes seen above.
The specific tasks provided were to find a Treaty 8 and a piece of information from the FAQ page. Key outtakes were:
Provide an introductory pop-up for better context
Provide an introductory pop-up for better context
Create additional section, to further separate information
Create additional section, to further separate information
Move the navigation bar on text-filled pages to the left for better visibility
Move the navigation bar on text-filled pages to the left for better visibility
User Testing II
User Testing II
The second user testing was done with a total of 6 participants, to validate the previous results.
While the users were new, the tasks stayed the same - find Treaty 8 and a piece of information from the FAQ page
The second user testing was done with a total of 6 participants, to validate the previous results.
While the users were new, the tasks stayed the same - find Treaty 8 and a piece of information from the FAQ page
Key takeaways:
Highly positive results - the majority (4/6 participants) were able to complete all tasks
Those who did not achieve full success (2/6 users) still finished 1 out of the 2 tasks
Suggestions for improvement focused on further simplifying the visual language for ease of navigation
Key takeaways:
Highly positive results - the majority (4/6 participants) were able to complete all tasks
Those who did not achieve full success (2/6 users) still finished 1 out of the 2 tasks
Suggestions for improvement focused on further simplifying the visual language for ease of navigation
Final Screens
Final Screens
Seen below are some of the final screens
Seen below are some of the final screens
Welcome Page
Welcome Page
Full map overview, with hidden menu and bottom tabs
Full map overview, with hidden menu and bottom tabs
Zoom-in for better view of the map
Zoom-in for better view of the map
Simplified navigation bar of a specific Treaty page
Simplified navigation bar of a specific Treaty page
UI Systems
UI Systems
Colors
Colors
Additional Elements
Additional Elements
Typography
Kanit - SemiBold
Inter - Medium
Inter - SemiBold
Inter - Bold
Typography
Kanit - SemiBold
Inter - Medium
Inter - SemiBold
Inter - Bold
Final Prototype
Final Prototype
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.
LEARNING OUTCOMES
LEARNING OUTCOMES
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.
NEXT STEPS
NEXT STEPS
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.