GarageShop — a UX case study
Today I want to share a new case on design of online shopping mobile application. So, let’s review what was the challenge at the beginning and the outcome of solving it at the end.
Overview
Currently modern youth strives to look fashionable and stylish. When choosing clothes, first of all, they pay attention to the beautiful appearance, brand, price and practicality. Garage store does its best to meet customer’s expectations and satisfy their needs by redesigning stores, hiring professional staff and frequently updating product range. The only thing was missing — they had no mobile app.
Goal
The goal of this project was to create from scratch an e-commerce mobile app for a young growing Ukrainian brand Garage.
Challenge
Create a unique application design that would meet the overall brand idea and would help to:
- increase visibility of the business
- provide 24/7 connectivity with the customers
- simplify the interaction process for users
- assist in developing a stronger relationship with customers.
Research
Most stats show that the average time spent on mobile devices is rapidly increasing worldwide, year by year. As per the latest available data, an average user spends at least two or more hours on their mobile devices. And, in most of the cases, it is the mobile apps that consume the maximum time of the users.
Since I had never worked on an online shop project before I began the process with a little research on Ukrainian statistic about online purchases by using mobile devices.
As per statistic Ukrainians most often bought online goods of the following groups: clothes, shoes and accessories, appliances and electronics, home and garden products. Next I wanted to check what are the main features of online shopping apps that create great experience and satisfy buyers.
The chart above gave me an idea of main aspects which I may implement in the app according to the store possibility to provide particular services.
User Flow
Thinking of information architecture and content requirements I made simple yet thoughtful navigation chain. In order to better understand how users will interact with the app I drafted a visual model of user flow.
Design is the making of complex decisions to save the user from making decisions.
So, I figured out how app screens should be connected to each other to help the customers place orders in the most convenient way and made all crucial functions easily accessible.
Low-Fidelity Wireframes
Working closely with the owners of the brand I had opportunity to see the flow of their operation and familiarize myself with their brand values and standards. It inspired me to design a minimalistic user flow and at the same time visually appealing app interface. Thus, I’ve started with low-fidelity wireframes sketching them on the paper.
Testing
How do you know what features will prove useful to your customers? You can only tell once you try, so I conducted testing on internal users with an eye to expand its feature set and implement changes based on user feedbacks.
Search Bar. Search is like a conversation between the user and app, the user expresses their queries, and the app expresses its response. Users expect smooth experiences when searching and they typically make quick judgments about an app’s value based on the quality of one or two sets of search results.
The most important rule in search box design is to make it easily noticeable. At first, in order to access the search bar users had to take an extra action. And as search is an important function in online shopping app I displayed it prominently on the main screen, what let me also add Wish List in Tab Bar for users convenience.
Brands. A data table is a great solution when you need to present multiple information points for a large number of items, like a list of Brands. In first version it was just rows with the Logo and Name of the brand. But the feedbacks from testing showed that users want to see more helpful and detailed information. So I changed the design of Brands screen from Table View to Collection View, and filled it with pictures of the newest items and their amount for creating better visual effect.
Size&Color. Some designers say it is bad practice to use drop-down menus because they are confusing, annoying and oftentimes dysfunctional. However, drop-down menus are an excellent feature because they help clean up a busy layout. If structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature. So Size and Color menus were redesigned into two small drop-down menu in one line as it was best way to display their options.
Outcome
Designer should not forget about the auditory. And must always stay in the last trends and clearly see what users and clients want right now. Being familiar with brand and their users profile, I created simple and intuitive application that would help to establish a smooth connection between a brand and its audience. Users can not only get easy access to the products, services, and contact information, it also helps them instantly resolve their queries, on the fly. In addition, it also helps store deliver quality services, thus adding value to their business.
At the beginning challenge was accepted and the whole interesting process of designing this app let me achieve the goal and get valuable experience. And what do you think about this project? If you have any feedbacks I would be pleased to hear them. Thanks for reading.
If you would like to get in touch with me or interesting to see my other projects, you can always find me at andreyherasymenko.com and LinkedIn, Dribbble.
