PatchScan Redesign
Comprehensive UX/UI Refresh for the BSA App PatchScan.
Prompt
While looking at some old apps I still have on my phone, I came across PatchScan, an app specifically made for scanning and categorizing patches members of the Scouting organization collect (specifically the Boy Scouts of America). I had downloaded this app back when I had gone to the 2013 National Jamboree, and looking at it now as a designer, I noticed a lot of outdated UX/UI design and a fundamental lack of some features that would greatly improve ones own experience. Due to this, I decided to update this app to BSA's current brand standards and make comprehensive changes overall.
Reference Photos. Images from current app.
While PatchScan can provide very important and useful information, in order to access this information a patch must have a valid QR code on it. This information is also only accessable if the patch has been scanned and is otherwise unaccessable. Due to this, many older patches cannot be scanned. The interface is also outdated and as such uses older design conventions. In order to solve the main problem, I developed three key solutions: the scanner would work on pictures and a QR code, the interface would be redesigned to match BSA standards, and the addition of a readily available database.
Overview and General Info
Reference images from current app.
Ideation
I went through several different ideas of how to best display the collection of patches in the most cohesive way possible. My goal was to showcase the information easily and comprehensively in a manner that is reminiscent of modern apps while keeping the same general feel of the original app. Coming up with how to make the catalogue section also required a bit of thinking, as I was unsure of how similar it should be to the collection ("My Patches") section and it would require a clear distinction so it wouldn't cause confusion for users. Incorporating modern BSA brand elements was also necessary.
Prototyping
The main issues visually speaking were how the user interface still had an early 2000s look reminiscent of when the iPhone was first released and how the branding of the app did not fit the look and feel of the most recent brand style guide of BSA. With a refresh of the color pallet, along with incorporating the silhouetted activity graphic, the app began feeling more cohesive with the rest of the brand. I also went through several ideas of how to showcase the difference of the "My Patches" page from the "Catalogue" page, including the ability to add patches and the overall color.
Final Designs
In the end, I made a comprehensive redesign of what became the four main functions of the app (along with the opening screen): My Patches, Catalogue, Settings, and the Scanner. Each screen was given a different color along with the title being displayed at the top and bottom for ease of usability and clear distinction. I also changed the "Add to My Patches" button to mimic the icon I use for the "My Patches" with a plus sign in the middle to allow for a more cohesive experience. I also moved the alphabet index to the right side on the "My Patches" and "Catalogue" sections to match Apple based apps.
