#1
“As an user I want to be able to select a box that fits my dogs personality/style.”
Menu
As part of a UI Design Course, the challenge of this project was to design the UI for a native app, for both Android and iOS devices. My approach, then, was to follow and use both systems’ interface guidelines, such as UI elements, icons, and typography. Still, I tried to bring to the app some personality and character, with a clear brand tone and language.
Branding • Brand Style Guide • User Stories • User Flows • Mid & High Fidelity Wireframes • Prototyping • Animation
PET SHOP BOX is a monthly box subscription service with items for pets. The box will contain premium treats and snacks, toys, specific medicine (such as vermifuge and flea medicine), hygiene items, grooming tools, accessories and more.
According to Globe Newswire, the global pet care market size is expected to reach over USD 325 billion by 2028. Among the tendencies for this market is the rise of online sales of pet products, which increased 51% in March 2020 alone.
The initial research found out that, although there are some other box subscription services out there, most of them are web-based. There are some apps that sell pet food and supplies, some even offer auto-renewal plans, delivering specific items on a regular basis. So the conclusion was that there is room for a native app offering this kind of service.
Dog owners (initially, to be expanded for other pets in the future), who regularly buy toys and treats for their pets and who would enjoy receiving new items delivered to their doors on a monthly basis. People who wouldn’t mind paying a monthly value in order to “spoil” their pets.
MVP: Pet Profile and Box suitability test, subscription plan selector, article/blog session, shopping cart/checkout.
2.0 and further: Reminders (for vaccination and other vet appointments), Community, Dog park finder.
“As an user I want to be able to select a box that fits my dogs personality/style.”
“As a user, I want to be able to add or exchange items on my monthly boxes.”
“As a user I want to be able to add or exchange items on my monthly boxes.”
Here’s where I tried to give the app a bit of personality, so even though I would be using iOS and Android’s native guidelines, the product would have a unique feel to it. My idea was for PET SHOP BOX’s brand to have a distinct tone, which will be fun, light and friendly. This will be reflected on the brand’s copy, making use of a lot of puns, whenever pawssible (see what I did there?).
This is also perceived on the brand’s name, which makes a pun with the 80’s pop group Pet Shop Boys.
For the color palette, I opted for muted, earthly tones, which go along well with my idea to have a cleaner UI.
This, plus the choice of icons and illustrations for the interactions with the users throughout the app, was designed so it won’t compete with the photos of the products the app will be displaying.
Since the idea was to design a native app, the typography of each version of the app followed iOS’s and Android’s font families:
Following the same logic applied to the color palette, I opted to use outlined icons and 2D illustrations with simple traces, to keep the communication with the users pleasant and fun. And also to differentiate between the brand communication and the products the app will be displaying.
Onboarding Icons
Pet Profile Test Illustration*
Pet Profile Illustration*
* Illustrations by Alaina Johnson: https://dribbble.com/alaina
Miscellaneous Illustration
Since the requirements for this project were to make it a native app, there was a lot of time saved on deciding basic UI elements, such as icons, buttons, and typography, as I would be using the elements stated on each operating system’s guidelines. I also had the idea from the beginning of working with illustrations, and on my research, I had found great references I would end up using on the design. Thus, I was able to start the app already in the mid-fidelity stage.
Feedback
At this stage I had already developed over 20 screens for each version of the app and was able to make prototypes and test it both with Android and iOS users (8 users in total. I received a lot of valuable feedbacks, regarding icon sizes and spacing, alignment of certain elements and navigation flow, which allowed me to fix them before moving to the next stage. I also developed some extra screens to better explain and illustrate the user flow.
This stage was actually more of a fine-tuning one: here I gave the final touches on the copy, added the onboarding icons, adjusted and checked for spacing and overall alignment, and added some more illustrations.
Although it wasn’t a requirement for this project, I decided to include a simple animation to show my idea for a custom loading screen. Initially, I did this using Photoshop, but later I manage to develop it even further using Flinto and including a simulation of the behavior of the buttons after being tapped by the user.
One of the deliverables for this project was prototype versions of the app for both operating systems. This allowed me to further use and better understand the InVision app, that I had used previously on other projects, and to hone my prototyping skills.
All in all, this project took me 21 days to complete, within the course timeline. I developed 27 screens for each version of the app and was able to have a great understanding of both Apple’s Human Interface Guideline and Google’s Material Design.
I’ve also learned that you can streamline an app design, if needed or wanted to, using these resources as a base for a project’s UI library. And I could also see that even when strictly adhering to these guidelines it is possible to create an app that has its own personality, by focusing on elements such as copy and imagery.
For the next steps, I would further research and develop the screens for the blog post and revisit the e-commerce pages. On version 2.0. I would also consider straying a bit of both system guidelines in elements such as icons, to bring some more personality to the app’s menu icons, for example.
Also, I’d start researching and working on developing new features, such as a community for users to share pictures of their pets interacting with their boxes’ items, which I believe could be a convincing factor for new users on deciding to become subscribers.
