Sun Rises in the “Westside”
UNTIL YESTERDAY…
Previously, I did an assignment redesigning the “Nike Run Club” app by adding search and filter for runs. It took a lot of time and pressure. It felt great while doing the research, coming up with the problem statements, prototypes, testing etc. It was the first ever assignment I did since this course began. So I wanted to do my best. After a week of struggling and a couple of sleepless nights later, I finished it and was convinced with my results. So that was the assignment done. It was difficult and easy at the same time. But like all great things, it was over. Now it’s time for bigger and better things. And I was ready.
BUT THEN…
A twist in the tale. A new assignment. I was assigned to work on another app to find heuristic issues in them (apps) and work on it. I was disappointed at first, that I had to do the same thing over again. But as I started working on it felt so much different, it gave me a new perspective. Yes, surely a lot more difficult than I anticipated, before I began this, but worth the pain.
I figured Mr. Anudeep wouldn’t ask us to do the same thing again just for the sake of it. So I accepted my fate and started working on it. This was supposed to be a simple task. Been there, done that! Easy peasy, lemon squeezy right? Wrong! This one turned out to be tougher than the last. 2 days and 200 apps later, I narrowed it down to 5 apps. It is so easy to just relate Usability Heuristics being applied to apps but to find the usability heuristics in apps is as difficult as finding water in a desert. But no point complaining. Ultimately out of those 5 apps I had to pick one. So I decided to take a look at them again. And I did. It didn’t take me long to find my pick. I knew what I was gonna fix — WESTSIDE!
WHAT ABOUT IT?
The app just has so many issues — mostly unrelated to UX like not enough collection of clothes. Or some very minor issues in UX itself such as no proper spacing between lines and text.
But one issue that really got to me was the side menu.
As I was browsing through the app genuinely wondering if there was enough collection (before I realised there was not), I opened the side menu. I clicked on one menu item and it opened a drop down menu. Then I clicked on another seasonal content (a menu item they had added for that season) wondering what it would do, it transported me to a whole other part of the app. I opened the side menu again, and clicked on another menu item. It had to do one of those two things right? Guess again. I got transferred to a section in the app that was in no way related to either of those. I was frustrated.
I just wanted to browse through whatever collection (in categories) the app was going to me from the side menu but each of them are placed in random order of different functions (drop down and go to menu). This got me thinking. If a person trying to find issues gets this annoyed, I wonder how many users get annoyed and don’t use the app just because the app is not properly designed even though they might have at least some products that are worth checking out.
So I decided to go for it and this is how it all started.
PROBLEM STATEMENT:
This lack of differentiation between drop down menus (Image 1) and go-to menus made me realise that it is an actual heuristic issue — Consistency and Standards. It says that “Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.”
What it means is that — other shopping apps have some kind of icons to show whether they have a drop down menu or not, Westside does not. Thus, I have decided to work on it.
As I was working on this, I ran into an icon (image 2). I was absolutely sure it was a filter option. So I clicked on it to see what other filters the app had. Turns out it was an icon for the layout of the products. I wasn’t sure whether it was just me or if other users have this problem. So I asked someone what that icon meant to them. And guess what they said? FILTERS. I found another fixable issue. And I pounced on it. The function of this icon can only be identified by clicking on it. This obviously felt like something no matter how I change the icon or make any changes in any way the user is only going to understand the function by clicking on it (And that is exactly what happened but maybe I’m getting a little ahead of myself). But I still worked on it anyway.
This icon goes under the same heuristic Consistency and Standards. When familiar icons are not used for the user to identify its function, the design should include some kind of information helping users get familiar with the new design. This information has not been included in the design and thus I decided to work on it.
IDEAS:
After I had finalised my issues, it was time to come up with solutions. So I brainstormed my ideas. The following are the ideas I came up with -
SIDE MENU:
- Arrow icons for main menu items only in down direction.
I did not choose this as it didn’t make sense to keep only for one.
2. Arrow icons for main and sub menu items in down direction while sorting them according to their function.
This idea seemed reasonable when I was brainstorming but when I actually thought about it later, it didn’t make sense because the app creators had already sorted the menu items according to relevance, like seasonal content, generic options and misc. So it doesn’t make sense to sort.
3. Arrow icons for main and sub menu items with no sort.
This made sense after eliminating the others.
4. Arrow icons for main menu items in right direction which further sub menu which have arrow icons in right direction as well until the menu ends.
This idea needs sub menu options to be in more numbers where this app has only 3 or 4. Thus this option did not make sense.
LAYOUT:
- Do not change the icon but add “layout” text beside it.
It was a custom made icon which made more sense than any other relevant icons i found online so this made sense.
2. Change the icon with no relevant text.
It was a custom made icon which made more sense than any other relevant icons i found online but with no relevant text beside it does not make sense to even consider it an issue.
3. Change the icon and add relevant text beside it.
It was a custom made icon which made more sense than any other relevant icons I found online so cannot change.
LOW FIDELITY PROTOTYPE:
I never thought I’d be taking out my book and pencil at this age to draw. I thought I’d be past it. But no. I put my Picasso pants on, took out the paper and pen to draw. Draw my thoughts of a screen into paper. A screen, an idea, a part of an app that actually exists. Now that’s mind blowing.
So I sat down with the app’s actual design for reference and drew my ideas and this is how they came out.
As you can see, I added the icons in descending order of importance for the menu items. The main menu has the biggest icon, the next set of menu items have a smaller size and so on. I made the menu items follow a trend of decreasing boldness in their order of importance. The main menu items are the boldest, the second set of menu items are less bold and so on.
For the layout icon, I added text “layout” beside the icon to help users understand the meaning of the icon. This would obviously be tested to see if it actually works.
HIGH FIDELITY PROTOTYPE:
After I was done with my “art”, it was now time for the good stuff. I sat to work on Figma to design wireframes and a prototype.
Let’s go step by step:
- For the parts of the screen that are not part of crucial elements (logo, image, right side background) I just pasted screenshots of them since it need not be designed. This was repeated for each of the screens.
- Then I tried to find the font used in the app and was able to find a font similar to the actual one.
- I then matched the size and style of the font family for each type of content like “sign in and register” had one, “main menu” had one, “first sub menu” had one.
- I included arrows and asked for feedback with a user, the user said that the arrows were too big so I reduced the size by a few points. The arrows get less bold and smaller for the following set of menu items.
- Same goes for font size and style for the menu name. The size gets smaller and less bold for each following menu item.
- The prototyping was done by attaching one frame to the next through the icons.
- When it came to the CTA (call-to-action button) of the layout icon, in the low fidelity wireframes, I chose to give small ovals for the second frame. But when it came to high fidelity wireframes, it didn’t make sense to do the same as it is completely changing the style of CTA from the first screen. As such, I matched the layout icon CTA’s to match the CTA in the first screen of layout high fidelity wireframes.
- For the prototyping of high fidelity wireframes, I made a minor change. I attached all frames together unlike in low fidelity prototypes. The layout CTA wireframes are attached to the side menu wireframes.
For this prototyping to work, I had to make the side menu disappear and appear as smoothly as possible. I used the “Animated prototype” workbook learning to duplicate the side menu into the layout frame and push it out of the frame for figma to understand that it has to appear and disappear.
Prototype link: https://www.figma.com/file/m8oBrHMQ9oeLhKsUIPkEGQ/Westside?node-id=0%3A1&t=QvXei4WontTHNop6-1
LAW FOLLOWED AND BUSINESS METRIC:
This pertains to the heuristic Match between system and users. The heuristic says “The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.”
When something slides open, or appears out of thin air, the object does not lag or miss some “frames” in between to reach the final status of showing up in front of the person. Instead the object fully goes through all the “frames”. In the same way, the side menu has to as well.
The business metric it pertains to is that it increases session length of the user as it does not let the user get frustrated about which one is a drop down menu.
TESTING:
When it comes to UX, we can’t expect the design to work 100% without testing. Assuming that the design would work without testing is called a false consensus effect (Designers think they can keep themselves in mind and assume something about the design since they are users as well).
In order to perform my testing I gave a bunch of tasks for the users to perform:
- Can you go to the women’s section and select a brand in ethnic wear?
- Go back to Ethnic Wear.
- Navigate to the home page.
- Can you change the number of products that you see on the screen? Right now there is one — so can you change to two products.
I was going to observe these things:
For the side menu:
- Users should be able to go to the women’s section > ethnic wear > brands and then select a brand.
- Users should be able to navigate back to any point of the menu.
For the layout CTA wireframes:
- Go to the home page and click on layout CTA.
Thus, I began my work and got to contact some new neighbours, tested it with them and made the following observations.
REDESIGN:
When I was doing the testing, I expected a minimal amount of feedback. But as I was receiving it and also processing the observations later I realised I had to make a lot of changes to the design.
So, I decided to increase the touch area of the drop down icon as well as the “woman” section. For this I added two invisible rectangles behind the required touch points (icon and “woman”) and attached the prototype to the rectangle.
For the other frames, I added invisible rectangles according to which menu item was active. For instance, in the second frame, it is the “Ethnic wear” section and the relevant down arrow icon for it.
This way the user can touch at any point within that rectangle (which has been placed relevant to the required menu item) and achieve their objective.
All of this pertains to Jacob’s Law by being more similar to other apps in order to be able to touch on the word part and open the menu and also the icon. It also pertains to increasing the session length of business metrics by not letting users get frustrated trying to open the menu.
INCOMPLETE ACTIVITIES:
- I wish to make the design of some other issues in the app better as well.
- Work on some other minor issues.
- Test with more users.
- Work on making the layout icon more accessible.
With this, I had finished my assignment with lots of learnings, new perspectives, better understanding of UX and most importantly — a lot of fun.
