jamesolsen.
Work
About
Belong
Allowing self serve through Belong Site Search
Lead the design and reshaping and reshaping of Belong’s Site Search that has 7K unique users per month and over 144K searches per year.
Belong
Allowing self serve through Belong Site Search
Lead the design and reshaping and reshaping of Belong’s Site Search that has 7K unique users per month and over 144K searches per year.
Role
Lead Product Designer
Team
1 x Business Analyst
1 x Product Owner
1 x Accessibility lead
2 x Frontend dev
1 x Backend devs/Solution architect
Tools
Figma
Role
Lead Product Designer
Team
1 x Business Analyst
1 x Product Owner
1 x Accessibility lead
2 x Frontend dev
1 x Backend devs/Solution architect
Tools
Figma
Problem
A disjointed sign-up experience hurting conversion
Customers were forced through a disconnected ordering journey, where an outdated address check, split-page flow, and accessibility gaps made it harder to complete sign up.
Problem
A disjointed sign-up experience hurting conversion
Customers were forced through a disconnected ordering journey, where an outdated address check, split-page flow, and accessibility gaps made it harder to complete sign up.
sdda
A simple but easy to use global site search
The solution was to build a simple site search functionality that allowed users to enter a keyword and on submission get results for the keyword.
Search Belong
Belong SIte Search Demo
Titles
Badges
sdda
A simple but easy to use global site search
The solution was to build a simple site search functionality that allowed users to enter a keyword and on submission get results for the keyword.
Search Belong
Belong SIte Search Demo
Titles
Badges
What is site search?
Understanding site search
NOTE: I joined this project for this after the UX research was done, and midway through the designs taking shape.
Before assessing any of the designs of this project, my first goal was to get an understanding of what the core functionality of search was meant to be. After, discussing with the stakeholders the core principal of site search was the following:
User clicks on search - user types keyword - hits search CTA - present with the results
What is site search?
Understanding site search
NOTE: I joined this project for this after the UX research was done, and midway through the designs taking shape.
Before assessing any of the designs of this project, my first goal was to get an understanding of what the core functionality of search was meant to be. After, discussing with the stakeholders the core principal of site search was the following:
User clicks on search - user types keyword - hits search CTA - present with the results
Reframing the experience
Assessing the proposed journey
Using the core functionality as my baseline I went through the proposed designs. It was decided that there was a lot of features like live results, auto complete, popular terms & filters. While these features are quite common in industry search features, for us these were 1) nice-to-have features or 2) features with that didn't match with the baseline and if built didn't add any UX value.
Reframing the experience
Assessing the proposed journey
Using the core functionality as my baseline I went through the proposed designs. It was decided that there was a lot of features like live results, auto complete, popular terms & filters. While these features are quite common in industry search features, for us these were 1) nice-to-have features or 2) features with that didn't match with the baseline and if built didn't add any UX value.
Design decesions
Removal of live results, autocomplete filters & terms
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Live results
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Autofill
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Filters
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Popular searches
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Design decesions
Removal of live results, autocomplete filters & terms
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Live results
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Autofill
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Filters
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Popular searches
After identifying the UX impact of these features and discussing with stakeholders, the main design of this project would a simple search field, with a CTA and once clicked - provide results.
Accessebility
Pagination & Semantics
When it came to accessibility, the main concern was around results and new results. On keyword search, we need the title to say how many results in total there was found for keyword i.e 200 search results for ‘nbn’ followed by ‘Results X to X’.
For loading new results in the proposed version used a traditional ‘next page’ pagination. With consultation with accessibility & design system team this was deemed not the greatest experience as on mobile people would always result to the top of the page, and going to a new page or with results no longer being present on the page. We decided to go with a ‘See more results’ CTA instead.
Doing this allow the results to always stay on the current page and did not require users to go back. From a coding perspective, when new results loaded the focus had to be on the new results title ‘Results X to X’Semantically, this made sense as well as this meant each result section was a child of ‘XXX search results for ‘keyword’.
Traditional pagination
See more results
Accessebility
Pagination & Semantics
When it came to accessibility, the main concern was around results and new results. On keyword search, we need the title to say how many results in total there was found for keyword i.e 200 search results for ‘nbn’ followed by ‘Results X to X’.
For loading new results in the proposed version used a traditional ‘next page’ pagination. With consultation with accessibility & design system team this was deemed not the greatest experience as on mobile people would always result to the top of the page, and going to a new page or with results no longer being present on the page. We decided to go with a ‘See more results’ CTA instead.
Doing this allow the results to always stay on the current page and did not require users to go back. From a coding perspective, when new results loaded the focus had to be on the new results title ‘Results X to X’Semantically, this made sense as well as this meant each result section was a child of ‘XXX search results for ‘keyword’.
Traditional pagination
See more results
Outcomes
A seemless search experience with a great launch
A seamless yet simple site functionality for Belong that within the first 5 days, it also surfaced strong demand around eSIM support, with over 2K eSIM-related searches. Since launch, the experience has around 7K unique users per month and over 144K searches per year.
Outcomes
A seemless search experience with a great launch
A seamless yet simple site functionality for Belong that within the first 5 days, it also surfaced strong demand around eSIM support, with over 2K eSIM-related searches. Since launch, the experience has around 7K unique users per month and over 144K searches per year.
Thanks for stopping by.
Built with love by me
I acknowledge the Jagera people and the Turrbal people as the Traditional Custodians of Meanjin (Brisbane), the lands I work and live. I pay our respects to the Jagera and Turrbal Elders past, present and emerging.
Thanks for stopping by.
Built with love by me
I acknowledge the Jagera people and the Turrbal people as the Traditional Custodians of Meanjin (Brisbane), the lands I work and live. I pay our respects to the Jagera and Turrbal Elders past, present and emerging.