Introduction
This Project is design apps Pet Food & Care E-Commerce service provider focused on targeting pet lovers with various features such as buying and selling online-based products, discussion forums & news/article pages.
Role: UI/UX designer & Research
Scope: Research, Design Low Fi & High Fi, Prototyping, Testing
Timeline: a month
Tools: Google Docs, Maze, Figma
Problem Statement
Have you ever as a pet owner thought about some of the following problems:
Is there sufficient nutrition from the food consumed by your pet?
Confused if the animal is sick, what should be doing?
Confused about how to care for pets properly?
Don't have friends or a place to discuss?
Rarely do articles discuss pet issues
Some of these problems are anxiety experienced by pet owners
Objektif
From the several problems faced, I made several steps that can be taken, here is a few step solution which is conducted:
Create a solution design in the form of an e-commerce application so that users can order food for pets without having to leave the house to look for products
Create an article page so users can read and add insight on how to care for pets
Providing a discussion forum for fellow lovers of needs in order to share experiences and information
Design Process / metodelogy
For the methodology I use design thinking as a design process approach, because this method is very useful in solving complex problems from users, by using process design thinking we can create ideas when brainstorming, and make designs up to testing
1 - Empathize & Define
Paint Point
From the results of the problems experienced by users, I conclude pain points that have been grouped
How Might We
From the paint point results I conclude these results by using how might we, this will be a benchmark during the ideation process to solve all the problems experienced by the user
User Persona
User persona is the stage for determining user needs. By knowing the background and habits of the user, we can easily draw conclusions from user needs
User Journey
In this user journey I get several opportunities from each trip, but due to time constraints and priorities I only focus on a few opportunities that exist.
Create a feature for logging in with Google / Facebook to be linked to make it easier for the user
Create an efficient home page by displaying product categories on the main page
Increase articles about pets
Provide features to track orders
2 - Ideate
Idea Solution
From the results of empathize and define, I found an idea during a brainstorming session based on How Might We, I grouped several points
Whislist / Favorites
In the Whislist feature, users can save the products they like on a special page. With this feature, it is expected that users will have no difficulty when they want to find a particular product.
Chatting & Forum Discussion features
On this page, users can chat between sellers and users, and especially in this discussion forum, this is a pretty good feature to bring together pet lovers.
Live Tracking
In this Live Tracking feature, users are expected to be able to shop comfortably online without worrying about the location and destination of the product ordered.
Promotions
With these promo and certain terms and conditions, it is expected that users can shop comfortably online
Affiliates
With this affiliate program, we can bring in users by sharing referral codes / links to invite other users to use the application with the benefit of promo codes / vouchers
User rewards
When users shop / and successfully make transactions, users will get rewards and at each level there are various benefits
Searching, Pagination & Filters
Searching features are needed to search for certain keywords in a product / article, pagination to limit a page, and filter features to sort certain categories or certain prices that you want to display
Articles / news
With this news / article, it is expected that users can add knowledge and insight
Product Variations
Product variation is quite important because in a product there is information related to taste and size variants
Afinity Diagram
From the results of the idea solutions, I mapped the affinity diagrams of the various solutions into groups that are easier to read and understand
After being grouped into 6 sections:
Wishlist
Program Promo
Social
Data Statistics
Transaction
Prioritization Idea
After mapping the affinity diagram, it's time for us to divide the group into various priority orders that will be worked on, this sequence is made based on the value and effort that will be carried out when the application will be developed later
Yes Do It Now: Promo, Product, wishlist, social, transaction
Do Next: Data Statistic, Promo Program
Do Last:
Later: Transaction with fingerprint
User Flow
From the results of Empathize and define and ideate I designed a userflow, this userflow is very important because these are the steps that will be taken by the user when interacting with the application
Wireframe
Color palette
In making a design, it is very important to use a color palette, we can create unique and attractive color combinations from a design. There are 6 colors that I use in making this UI design consisting of 1 primary color, 4 secondary colors and 1 neutral color
Design system
Before making High-Fidelity, it's a good idea to use a design system so that every component we make remains consistent
From the design system there are several components such as cards, headers, typography forms and also button styles In determining the iconography, I use the icon material from https://feathericons.com/ There are many icons that can be used for free.
High Fidelity
In the first part an introduction page of the application itself will be presented, with 2 buttons for login and register, if the user does not have an account the user can click the register button, and after the user already has an account the user can login immediately by clicking the button.
On the Home Section, this is the page that will be displayed first when the user login. On the home page, information about the product and its categories has been presented, and various navigations, each of which has its own function, there is a search feature for users to search for products Based on the desired keywords.
Users can access the News page by pressing the news navigation, on the first page an aesthetic banner is immediately presented, with a selection of news that can be read by the user provided with the category, filter and search features to search according to the keywords the user wants.
Then when the user wants to read the news, a feature is given to share the news they want via social media, followed by a pagination feature so that the news page that the user reads is not too long, and there is also a comment feature for users to interact with fellow communities.
Users can access the message page by pressing the mail icon on the home page, on this message page there are 2 sliders, which is the chat section for sellers and also with the community, in the community section there is a plus icon that users can use to create / join other communities
In the product variation section, users can add products to their favorite / wishlist page, then select the variation on the product they want to choose, add the product to their cart, and access the chat feature with the seller via the chat button.
In the transaction process the user can delete the product he wants to order through the trash can icon on the right, through the cart page, then the user can use a promo/discount when making a transaction, select the shipping service he wants to use according to the estimates available, then set the address, then select payment methods according to available transactions, after the transaction process is complete there are 2 buttons to shop again or view transaction details.
On the transaction detail page there will be information on the order status listed, when the user charges one of the cards from the product in the transaction details, it will go to the order details page where there is more detailed information regarding detailed price information, product tracking, shipping address, method payment, and the user can place an order when it's finished, contact the seller and also cancel the order.
3 - Prototyping
I created a prototype for a solution to a problem users are experiencing using figma. This prototype includes the user's journey in making transactions, creating discussion forums, and there is also news that users can read so they can add insight.
4 - Testing
At the Usability Testing stage I used a maze.co platform tool where I made a flow of the prototype to be tested with various questions in each test, which is :
Do you experience difficulties when registering and logging in?
After Doing Prototype Testing on the Register and Login Features. Is There Any Input For The Design Of The Prototype?
Do you find it difficult to read news/articles?
After Testing the Prototype on the News Feature. Is There Any Input For The Design Of The Prototype?
Do you feel difficult when doing the checkout process?
After Doing Prototype Testing on the Checkout Feature. Is There Any Input For The Design Of The Prototype?
Is the information from the functional displayed as a whole clear enough?
From the results of the several questions I give a distribution point score from 1 – 5 to determine the ease of using the application, with an average result of 4.6 which is said to be good enough
What I Learned From The Testing
Some of the points I got and I learned from the Usability Testing results are:
Added the forgot password feature on the login page
When making a prototype, the bottom navigation should not scroll but be fixed
Provide a button for shopping again / product review in the transaction section
Make a drop down list on the menu, select payment
Redesign
Conclusion
Thank you for reading my case study. After carrying out the design process using the Design Thinking method, I can conclude that this approach helps me to better understand the needs and problems faced by users. By following stages such as Empathize, Define, Ideate, Prototype, and Test, I can create innovative solutions that suit user needs. The results of our tests show that users can complete the tasks at the testing stage well and feel comfortable when using the prototype. I can also identify some issues that can be applied for further improvement. Overall, I believe that by applying the Design Thinking approach in the design process of this case study, I can create a solution that fits the needs and expectations of users.
Next Recomendation
Conduct user tests with different user categories: Tests with different user categories such as old and young, beginners and experts will give a broader picture of how your login page performs.
Conduct A/B tests: Conducting A/B tests will help you to test variations of the login pages you create and determine the most effective version.