*This was a yearlong research project generously funded by the pilot program of UCLA's Internet Research Incubator (www.iri.ucla.edu) *

Background

Over 200 billion apps will be downloaded by the end of 2017 (Think With Google). Over 50% of online shopping is now conducted on a mobile device (Google Trends). Yet over 25% of app users open an app once and never return (Think With Google), and users are oftentimes so frustrated by the mobile shopping experience that they abandon the process (Business Insider). In 2015, although U.S. adults spent 59% of their time on mobile (compared to 41% on desktop), only 15% of their dollars were spent on mobile (Business Insider).

Why is this so?

Design plays a huge part. Due to the limited screen real estate on mobile screens in contrast to desktop, the small dimensions make it challenging to craft a truly wonderful user experience. The perception of security in payment transactions is also a huge factor.




Research Questions

1. How can we design better m-commerce experiences?

2. How may we create a UI toolkit for two key flows: a)categories b)payment ?

3. What is the future of m-commerce design?




Research Methodology

To tackle these research questions, I employed the following methods:


Previous Literature Review: I read many sources on usability of mobile apps, including Baymard's studies, various tech articles, and Think With Google's guidelines. As these are massive insitutions with many more expendable resources, they were able to provide a thorough foundation upon which general guidelines for mobile design were formed. However, this past research also had shortcomings, in that Baymard's studies were primarily focused on (oftentimes outdated) mobile web browsers for the m-commerce experience, and Think With Google provided general usability guideliines that meant to blanket apps that spanned various industries. I aimed to dive deeper into one specific aspect (m-commerce apps) within one specific industry (fashion), as similarities were discovered across the board.


Heurisitc App Evaluation: I selected the top 15 m-commerce fashion apps available on the iOS App store, and benchmarked their features and performance against the Think With Google usability guidelines. I also looked at how Western and Eastern app design differed in the m-commerce space, namely WeChat's surprising (& successful) approach.


UI Toolkit Development: After evaluating these apps, I was able to develop suggested UI patterns (void of marketing and commercial content) that are derived from the best m-commerce apps in the market. This is meant to be a guideline for those designing a new m-commerce fashion app, and can be referenced for inspiration in usable m-commerce design.




Heuristic App Evaluation & Findings

Apps evaluated (in alphabetical order): Aerie, Anthropologie, ASOS, Express, Forever21, H&M, Macy's, Nordstrom, PacSun, Romwe, SheIn, Urban Outfitters, Zappos, Zara, and WeChat.

Below, you can see the maps of the apps surveyed. Each key step is segmented (as demonstrated by the categories highlighted in black). These apps were then evaluated against the 25 usability guidelines presented by Think With Google's Principles of Mobile App Design. Full spreadsheet of data available here.


As mapped in the image above, key features of truly standout apps included image recognition to assist shoppers in finding the products they wanted, as well as categories depicted with images. Menu navigation varied across different apps, but popular formats included a bottom fixed navigation that stayed constant across different pages of the app, or a hamburger menu that pulled out a side navigation. To view all the screens and categories presented, feel free to download the original Xd file here.

In addition, I proceeded to map these 15 m-commerce apps against the Think With Google Guidelines. These 25 guidelines are mapped to 6 key user flows throughout an app-- 1)the app navigation and exploration 2)in app search 3)commerce and conversion 4)registration 5)form entry & 6)usability and comprehension. These apps were scored on a scale of 0-3, with 0= not applicable, 1=poor performance, 2=acceptable performance, and 3= good performance. I've included a screenshot of how the apps scored in this rubric. The full dataset is available here.



As can be seen from the data presented, Urban Outfitter's app significantly outpaced all other competitors in terms of usability, with a score of 63/69 (2 guidelines are not applicable to all the apps I evaluated). It was the only app out of the 15 that broke a score of 63. The main detractors from Urban's scoring were search history and filtering of user reviews. The latter could be due to a lack of reviews on the app itself, which could be improved by incentivizing users to input reviews to earn points in a reward system.

In looking at the average performance across categories, the weakest area was Commerce & Conversion, which was due to oversights in basic functionality such as search history, making adding payment methods easy as well as a robust user review system that could be sorted and filtered easily. With these features fleshed out, the shopping experience would be much more delightful.





UI Toolkit and Guidelines

After evaluating the different m-commerce apps, I was able to develop a set of recommended patterns for future m-commerce apps.

On the left, we have a flow for browsing & categorization. This is a flow derived from the top 3 scoring apps in this realm: Urban Outfitters, American Eagle Outfitters, and Nordstrom. Although each app differed slightly, there were many similarities across the board in terms of how they organized their massive inventory of clothes across genders and styles. This design also left space for promotional content, so that although the categories fit users' expected mental models, they still have the 'exploration shopping' aspect for the casual browser.

On the right, we have a navigation suggestion. While some of the apps evaluated have opted to hide their menus, the most effective (and clear) navigation patterns opted for the bottom nav, which stayed fixed in place (as demonstrated) as the user went through different screens. By clearly labeling each element on the navigation, and using color indicators and movement to seamlessly transition between screens, users are able to always understand where everything is without too much mental load.

Suggested guidelines available here




Conclusion & Shortcomings

This research allowed me to dive in deeper to the many shopping apps on the market today. Although I was able to derive some common (& successful) patterns, this is not a one-size-fits-all model. These apps were very much limited to fashion m-commerce, and these patterns are not exhaustive by any means. In the future, it would be beneficial to also look at future developments, such as incorporating WeChat's model of one platform to manage all transactions, and further seamlessly incorporating the browsing experience rather than forcing a user to download an app.




Next Steps

As for what's next: Through this project, I've become more interested in contrasting design patterns in the Eastern & Western worlds. I'm interested in compiling those UI toolkits further, and may submit such a proposal to Adobe's Creative Residency next year (depending on short term future career prospects). I'll also be joining an e-commerce startup this summer (ThirdLove) through the NEA design fellows program, with a deferral from grad school in hand.

Special thanks to Professor Kleinrock and his team (Scott Reed & the mentors), and shoutout to all the people who have helped support me throughout this project (and coffee). Also many thanks to all the UI designers I've had the chance to talk to throughout these past seven months and all the wisdom they've bestowed upon me!

If you're interested in reading about my yearlong learning in product design through this project, follow the link below!




View Previous Project