Finding stores, restaurants, restrooms, and subway stations in large shopping malls in Asia is extremely difficult. Building layouts are complicated. Different floors and different sections of the buildings have confusing names. Signs are not clear and readily available. Shoppers get lost in large Asian shopping malls on a regular basis.
I interviewed 9 shoppers ranging from mid 20s to early 40s in Hong Kong. Things I'm trying to discover are:
I started each interview with a survey questionnaire and showed them existing apps to find out their design preference. I then asked them to find a store in a shopping mall nearby with a few available apps. I observed problems with the existing apps and found an opportunity to create a better design to resolve these problems. Below is the survey questionnaire I created for this research:
https://drive.google.com/file/d/1RaFtLeGYuALyqWWL-UdklyGcTdTf6-in/view
Within 2 minutes, users must see...
Else they will give up and delete the app
I created 2 personas from the interviewed data: practical shopper and casual shopper. I decided to focus on the casual shopper, because there are more design and business opportunities in this market segment. Practical shoppers rarely go to shopping malls and just want to grab the product and leave. Casual shoppers like window shopping and sipping on afternoon tea with their friends in shopping malls. They also care more about design and want more interesting features.
I did 2 types of competitive analysis: positioning map and side-by-side comparison. I used a positioning map to discover the market gap and an area that has the least competition. I used side-by-side comparison for detailed feature comparisons of my direct competitors.
Visual designs of most IPS (indoor navigation system) apps are very industrial and stiff in appearance. Such design language is suitable for hospital and factory IPS apps. However, shopping is a fun activity. I therefore decided to create a fun and lifestyle looking UI for the app.
Each app has its strengths and weaknesses. My aim is to adopt their merits and improve the design. Since Google Maps has become the market standard, I decided to use Google Maps' API to develop this app.
I created a hierarchy of needs pyramid based on Maslow's triangle. Each level above needs to satisfy the level below in the pyramid diagram. The venn diagram are 3 keywords I selected as the inspiration for visual design.
I did a “how might we” and “what if” brainstorming session with a few of my classmates who like to go shopping. We tried tactics such as turning chairs upside down and putting post-its on our foreheads to stimulate crazy ideas. We took a break and voted on the problems most worthy of solving. We then brainstormed solutions for them.
I generated a lot of interesting ideas from brainstorming with my classmates. I sketched out UI based on the result of the brainstorming session. Below are a few key UI that are the most relevant to the HMW statement.
Overview of the main screen. Users can select a floor with the nav bar on the left. They can slo toggle between 2D and 3D with the circular buttons on the right. They can also turn on settings with the menu bar on the right.
After the user enters the store's name, they have the option to call the store, view more details, or get direction. There are 3 types of directions to choose from: elevator, escalator, and stairs. A clear visible route with a progress bar on top will appear after they make the selection.
Users can search by product or food they want. For example, they can enter "hamburger" or "mini skirt". All shops and restaurants that carry that product or dish will appear on the screen. The app is in sync with Siri and Google Assistant. Users can press the mic icon and say the entry instead of typing it.
The design went through 5 iterations, from low-fidelity paper prototype, mid fidelity wireframe, to high fidelity mockup. I consulted 6 experts and tested my designs on 45 target users.
The design went through many major changes after several rounds of iterations, both in terms of features and visual design. Many ideas were eliminated and modified based on the user feedback. Below are a few key features that can improve the searching and shopping experience inside the mall.
The interface has 4 main components: search bar, floor bar, 2D/3D toggle, and map option. The search bar is for users to enter a name or search phrase. The floor bar is for users to select a floor. Users can also click on the all buttons to see all floors at once in a 3D exploded view. The 2D/3D toggle is for users to switch back and forth between 2D floor plan and 3D perspective views. Map option allows users to toggle on and off specific details of the map. Please see the discount indication section for details.
Users can simply type or say the name of the product or food they are looking for. All the stores/restaurants in that shopping mall that carry the product/dish will appear on the map.
Users can search by price range and product category via advanced search. They can also toggle discount, price range, and rating display on and off in the advanced search menu.
Users can link their social media accounts to the app and find out if their friends are in the same shopping mall. The app can also alert users when their bosses or other undesirable parties are in the mall and offer them escape routes.
Due to the technical limitation, I am not able to measure the amount of search time this app could reduce. A working prototype is required to measure such data. The qualitative feedback regarding the features and UI design of this app is overall positive. The design is successful in this regard.
The next step would be building a working prototype, creating a pitch deck, and using them to acquire seeding funds. Based on the user testing results, below are my hypothetical feature release dates. Some secondary features might be modified or eliminated based on session time, frequency, and qualitative feedback.
