ABOUT

AFrovirtues is a platform that deals with natural hair products. they also provide useful tips on how to take care of your hair or your kids' hair and personally, i have found these tips very helpful.
I assume this was due to instagram's algorithm but i had not seen their posts for a while, in-fact, I recently realized that I had been seeing post from the same people and pretty much forgot that i was following them until yesterday.
At this point, my hair needs to be saved and so i went straight to their page in search of information that would help.

CONTEXT:
When i downloaded the app, i did so as a user with a simple task in mind - Learn more about their products in order to decide which works best for me. First i share my experience with the app and then go on to share my proposed solutions.

I didn’t have any expectations. In fact , I was curious to know what it looked like.
I downloaded the app from the APP and after installing it opened right away I liked the splash screen after which I was taken straight to the home page. I thought to myself, no onboarding screens? But i appreciated how straight to the point it was even though i wasn’t in a hurry. It wasn’t until i ran into a couple of bugs that got in the way and decided to try out the android version did i realize that I skipped the sign up process and was slightly irritated just because i was expecting to go straight in but then i went ahead because i really wanted to find out how to fix my hair.

The first thing I noticed when I opened the IOS app was this white space just sitting there, I actually waited a few seconds thinking some content was going to load up. I still wait a bit when I open but I guess at this point, I know that’s probably not going to happen. The next issue I encountered was with the scroll the product as you can see scrolled under the empty space making it difficult to explore the products. I did try to scroll the “empty space up” in an attempt to give me more room to view the products and it did scroll. So, my confidence in the app was restored.

The product details page.
After finding what I suspected would be the product I was looking for, I clicked on it only to be taken to this page.
I can’t say I wasn’t sure what to expect at this point because I did, taking a cue from the layout of the home screen and so continued to navigate the app with confidence, However, when I saw this screen, I was confused and for longer than a moment. I attempted to scroll down multiple times to view the details of the product but it didn't scroll. Thinking it was probably stuck, I minimized and closed the app hoping that would fix the problem but It didn’t. so I took a step back to really study the screen, only then did I notice the Details button right at the bottom. The contrast was so poor I missed it completely.

So, I clicked on it and it took me to this page, the difference being that the product page for the product I wanted did have a short description. I couldn’t help but think, is this it? I realize that there’s no text on the empty space beside the button but with all the errors I had encountered lately, I was hoping it was one of those and clicked on the space repeatedly. Sadly, it didn’t respond and my purpose for downloading the app was defeated. I just needed it to do one thing for me, tell me how to fix my hair. I didn’t give up at least not at this point, I decided to visit the website hoping it would help me get the job done. No, it did not. This is the point where I gave up.

THE REDESIGN: Before Meets After
SO, What did I do?
Fortunately, I am a Product designer and practiced so much that it has become second nature to observe my journey when surfing a product, taking note of how easy or difficult it was to get the job done and why. And so I decided to redesign the app paying attention to the issues I outlined above while fixing them.
Hence the series "before meets after" where I redesign apps or websites to improve its experience was born.
The first thing that stood out to me when considering a redesign was the Aesthetic Usability Effect which states that Users often perceive aesthetically pleasing design as design that’s more usable.

My motivation for redesigning this screen was to make the more aesthetically appealing the second and to give the user a sense of familiarity by using pattern that they are already used to and to also make the call to actions much clearer to the user.

Again, with the motivation to make the screen more appealing i redesigned this. The Image was distracting. Reducing the opacity would have made it better but i decided to explore other options and went with the redesigned screen on the right.

The first thing that i noticed was the absence of the "Login" call to action. I wondered for a bit on how to leave the page hoping i wouldn't have to minimize and close the app to do so before noticing the back arrow. As with the login screen, I strived to make the call to actions clearer for the user. I also added the confirm password to reduce the chances of the user forgetting what password was used or missing up a number and letter from the intended password.

The first thing I did was to remove that white space and with it, all expectations that a content would be loading up. Then i decided to make it easier for users to engage with their products by adding the "like Icon" and the "add to cart" see prototype for what happens when a uses clicks on it.


Hang in there, we're almost done with this.
The product details page was the one page that mattered most to me. I was finally going to learn how to stop myself from going bald and then this.
I did a complete redesign taking cue from the pre-existing mental model of how a product page would look like.
Instead of taking the user to another page, you can see the details almost immediately.
The other two options "How to use" and "Reviews" are two features that helps people make decisions about whether or not they should buy a product.
The "How to Use" feature is the inspiration for this whole redesign.
I also included the option "buy now", incase the user already knew what they wanted or quickly made their decision on what they wanted to buy.
reducing the strain of having to first add to cart, then view cart before checkout.

Conclusion
I'd like to state clearly that although i ran into some other issues i focused on the job I needed to do for this redesign.
There is a significant difference in the flow of the android app which suggest that a designer wasn't on the development team. However this flow should fix the usability errors for the android app as well.

Important!
I'd like to clarify that the "Before meets after" series aims to propose solutions to usability issues of a process hence we can explore various scenarios of the same app/website or different processes and not just aesthetics.
lastly I am open to and would be happy to collaborate on this.