2023, Self-Initiated
» UX/UI
» Strategy
↳
WHAT IS DIVISIBLE?
Divisible is the app version of www.Divisible.info, a website that hosts a variety of free division-based math tools.
The app offers two of Divisible’s most popular web tools in a convenient mobile format that doesn’t require an internet connection to run.
WHY DOES IT NEED A REDESIGN?
To put it plainly, the app is not pleasant to use. Buttons used to navigate on some pages are used to calculate on others. Switching between tools requires you to navigate through one of two expository pages - resulting in an explanation of how to use the app to be endlessly reiterated.
However, the most convincing case for a redesign is how the app's design hinders the ability to introduce new features. It is hard to imagine adding in a new tool without further exacerbating the issues that already exist.
screenshot of the divisible website, mobile app icon and screens.
↳
The core problem the Divisible app faces has to do with navigation and how the content is organized.
Looking at the four screens to the right, you'll see assets reused for both navigation and as a way to trigger calculations on each respective "tool" pages.
Nav Buttons
Both Nav and Function buttons
Original Navigation
Following the flow from the "Home screen" (the start of each user flow), you can see that each of the main tools are sequestered from each other — forcing the user to pass through either the "Info Page" or the "Home screen" in order to navigate to the other tool.
Home
Divisible By
GCD
Info Page
↳
NAVIGATION:
The two main improvements made to the app was the streamlining of navigation buttons into a single menu bar, and the use of an overlay to consolidate written content into a page that is detached from the tools in which they describe.
Open Overlay Button
Navigation Buttons
Redesign Navigation
Comparing the "Redesign" flow chart to the "Original" flow chart, you can see how the use of an overlay screen and a menu bar allows a user to access any screen from any location on the app.
Home Overlay
Divisible By
GCD
Info Page
↳
FUNCTIONALITY:
Another simple, yet significant, change was redesigning how the calculation buttons work.
In the original design you can see how the "Divisible By" button, which is used for navigation in other contexts, is used to perform calculations.
By integrating the 'calculate' and 'clear' buttons into the pop-up keyboard, the user experience is improved through the elimination of the number of steps needed to perform a calculation.
Original Design
Redesign
↳
ADDITIONAL FEATURES:
Along with a dedicated "Settings" page, the options of "Dark Mode", and "Preserve App State" were added to the redesign.
New features in settings
"Preserve App State" improves the experience of the app by opening the last screen the user used when they relaunch the app. This bypasses the "Home Page" that served as the start of every user flow in the original design.
Redesign in Dark Mode
↳
RESEARCH:
The number one thing that needs to be figured out is who exactly the user is and in what context they use this app for.
My hunch is that whoever runs the Divisible website was inspired to make a standalone app based on the popularity of several of their web tools.
Getting a clear idea of who uses the app, will provide the data to be able to make an informed decision on how to make significant changes to the product itself.
→
↳
STRATEGY:
After having a complete picture of who exactly their user-base consists of, and how they use the app, we could start a complete redesign of the app which would include a rebranding of Divisible itself.
The foundation I have built is a good start, but a full redesign would help clarify what the objectives of Divisible are, and create a visual identity that supports the functionality of their products.
→
↳
DESIGN:
Defining who the user and the brand are will pave the way for redefining the product itself. Improving the current features and introducing new ones would provide more value to the current user base and help it to expand.
When refining or introducing features, making a seamless user experience is only the first step. The ultimate goal should be a user experience that is not only seamless, but also genuinely enjoyable and evokes delight in the user.
→
2023, Self-Initiated
ORIGINAL
REDESIGN
↳
WHAT IS DIVISIBLE?
Divisible is the app version of www.Divisible.info, a website that hosts a variety of free division-based math tools.
The app offers two of Divisible's most popular web tools in a convenient mobile format that doesn’t require an internet connection to run.
screenshot of the divisible website, mobile app icon and screens.
↳
WHY DOES IT NEED A REDESIGN?
To put it plainly, the app is not pleasant to use. Buttons used to navigate on some pages are used to calculate on others. Switching between tools requires you to navigate through one of two expository pages — resulting in an explanation of how to use the app to be endlessly reiterated.
However, the most convincing case for a redesign is how the app's design hinders the ability to introduce new features. It is hard to imagine adding in a new tool without further exacerbating the issues that already exist.
↳
The core problem the Divisible app faces has to do with navigation and how the content is organized.
Looking at the four screens below, you'll see assets reused for both navigation, and as a way to trigger calculations on each respective "tool" pages.
Nav Buttons
Both Nav and Function buttons
Home
Divisible By
GCD
Info Page
Original Navigation
Following the flow from the "Home screen" (the start of each user flow), you can see that each of the main tools are sequestered from each other — forcing the user to pass through either the "Info Page" or the "Home screen" in order to navigate to the other tool.
↳
NAVIGATION:
The two main improvements made to the app was the streamlining of navigation buttons into a single menu bar, and the use of an overlay to consolidate written content into a page that is detached from the tools in which they describe.
Open Overlay Button
Navigation Buttons
Home Overlay
Divisible By
GCD
Info Page
Redesign Navigation
Comparing the "Redesign" flow chart to the "Original" flow chart, you can see how the use of an overlay screen and a menu bar allows a user to access any screen from any location on the app.
↳
FUNCTIONALITY:
Another simple, yet significant, change was redesigning how the calculation buttons work.
Original Design
Redesign
In the original design you can see how the "Divisible By" button, which is used for navigation in other contexts, is used to perform calculations.
By integrating the 'calculate' and 'clear' buttons into the pop-up keyboard, the user experience is improved through the elimination of the number of steps needed to perform a calculation.
↳
ADDITIONAL FEATURES:
Along with a dedicated "Settings" page, the options of "Dark Mode", and "Preserve App State" were added to the redesign.
Redesign in Dark Mode
"Preserve App State" improves the experience of the app by opening the last screen the user used when they relaunch the app. This bypasses the "Home Page" that served as the start of every user flow in the original design.
New features in settings
↳
RESEARCH:
The number one thing that needs to be figured out is who exactly the user is and in what context they use this app for.
My hunch is that whoever runs the Divisible website was inspired to make a standalone app based on the popularity of several of their web tools.
Getting a clear idea of who uses the app, will provide the data to be able to make an informed decision on how to make significant changes to the product itself.
↳
STRATEGY:
After having a complete picture of who exactly their user-base consists of, and how they use the app, we could start a complete redesign of the app which would include a rebranding of Divisible itself.
The foundation I have built is a good start, but a full redesign would help clarify what the objectives of Divisible are, and create a visual identity that supports the functionality of their products.
↳
DESIGN:
Defining who the user and the brand are will pave the way for redefining the product itself. Improving the current features and introducing new ones would provide more value to the current user base and help it to expand.
When refining or introducing features, making a seamless user experience is only the first step. The ultimate goal should be a user experience that is not only seamless, but also genuinely enjoyable and evokes delight in the user.