Stash&Store — Finding and Renting Storage Made Easier
Introduction
Hi Medium reader! In this UI UX case study, I will showcase my mobile app design. “Stash&Store” is the name of my second mobile application. It consists of various features that help the user find an adequate storage space for their items and/or to monetize excess space of their own. I aspired to be innovative and creative and to make this app as user-friendly, intuitive, functional, and unique as possible.
Problem
Upon starting the project, I had one specific problem in mind which I intended to solve. However, after some more thinking, I realized “Stash&Store” could effectively be a multi-functional app solving somewhat different problems for various types of people. The following are problems that I aspired to solve in some way:
- Lack of storage space in people’s homes
In the modern world people have a lack of living let alone storage space. - High prices of storage units and warehouses
Those thinking of renting storage spaces are very often discouraged from doing so due to high rent prices. Specialized warehouses can often be very expensive. - Surplus of space left unused
People owning an excess of space are sometimes left only with expenses for their unused space.
Research
Being aware of the above-stated problems, I started doing research. The first thing I did was, as always, to analyze competition applications and products. By doing this, I have come up with some ideas on what I could add to my app but more importantly, I found flaws and shortcomings in competition apps. My end goal was to make the best and most unique app for this purpose! Aside from inspecting competition apps, I wanted to get to know the user. Throughout the entire design process, thinking about the user and his/her needs was my top priority.
User Persona
After thoroughly addressing the core problems that my app would solve and conducting extensive research on the needs of potential users, the next step was to identify the ideal user persona.
Brainstorming
After identifying the user persona, I was in for a few brainstorming sessions. In this stage, I have taken note of almost any idea that came into my mind. I made these notes in FigJam and transferred them later on to a special Figma page specially designated for these ideas.
As you can see on the screenshot above, there was a section for pure brainstorming while there were also sections for specific major parts of the app.
UX Map
After I came up with various ideas, I constructed a UX Map. There are three frame colors from which every one represents a distinct part of the app.
Inspirational board
Regarding the UI elements of my app, I made a large inspirational board comprising a vast number of various screens and shots from different apps. Despite maybe being somewhat counter-intuitive, I gained inspiration from travel apps, social media apps, cooking apps, navigation apps, etc. I paid attention to all UI elements — colors, input fields, menus, icons, buttons, fonts, illustrations, cards, etc. In essence, all apps share a good amount of the same UI elements.
I saved numerous shots from Dribbble, Mobbin, Behance, and similar platforms onto my “Inspiration Board” page in Figma. I categorized all of the shots by their purpose. In that way, there were multiple distinct sections containing different types of shots.
I also made sure to leave notes in the form of Figma comments on shots to remind me of the exact thing that drew my attention. I knew that I only needed to readjust and imitate the works of various other great designers to make my app look great! Apps from which I gained inspiration were mostly in use worldwide and they were designed by some of the best experts in the world!
Lo-Fi wireframes
I created three wireframe sections. The first one is universal and that is the onboarding process. The other two sections were wireframes of different app views, one for hosts and one for clients. Once the app is downloaded and the user registers, he/she can still easily change between the two. In the screenshots below, it is visible that almost every screen was introduced in this wireframe.
Once I completed the wireframes, I had a much more clear idea of how I was about to continue with the project. Also, so as not to forget my thoughts while wireframing, I left Figma comments in certain areas of the screen to remind me of my plans for a specific design element.
Design system
The typeface I used in combination with the theme color proved as the best solution. This tone of green color invokes trust, optimism, and overall positivity in the users’ minds. On the other hand, DM Sans as a typeface conveys a sense of modernity, professionalism, and clarity. The clean lines and rounded corners give the app a friendly and approachable feel, while the sharp edges suggest a sense of precision.
For increased productivity in the design process, I made text and color styles. That way, it was easier and faster to decide on the color of certain UI elements and to decide the font I would use in a certain place. Creating styles also immensely helped me later in making modifications to the design.
Regarding icons, to maintain a consistent design throughout the app, I used a single icon pack and one type of icon. The name of the icon pack is “Heroicons” and it contained almost all of the icons I needed in an SVG (vector) format. The icons I did not find, I drew with a pen tool in Figma. I ensured they were consistent in size and stroke with the icons from the previously mentioned icon pack.
Icon pack source:
https://heroicons.com/
When it comes to illustrations I used, they were also taken from the same illustration source. Again, consistency in UI is very important!
Illustrations source:
https://storyset.com/time
Final design
As mentioned in the “Lo-Fi wireframes” chapter, “Stash&Store” comprises two app views. The first one is focused on the client and the client is the type of user who looks for storage to rent through the app. This app view is supposed to help the client find storage deals easily. The second app view is designated for hosts who are looking to rent out their spaces. In this case, “Stash&Store” serves the user in specific ways that make managing their offers easier.
The onboarding process in and of itself is relatively the same for every app. In this case, the user is of course provided with two main options — to register or log in. When creating an account, users are prompted to specify their intended use for "Stash&Store". This is included because the user might have an interest in only one app view. According to his/her choice, he/she continues with the signup process.
Those who proceed as hosts are prompted to right away list their offer or to skip that part and come back to it later. Hosts would also have to take a photo of their government-issued ID card to verify their identity.
Still, the only verification process mandatory for all users is email verification.
After completing the client sign-up process, users are directed to the Explore screen, which also serves as the Home tab. From here, they can search for storage by entering a wished location and they can filter their search results. The map displays the location pins of available storage. Once one of them is clicked, in the bottom part of the screen appears a card giving general information about that storage.
Another important feature on this tab is the “Place a point” feature. By clicking the button in the bottom right corner, a small locator pin appears in the center of the screen. It remains in the center while the user scrolls through the map. When the user places the pin in a desired location and presses the bottom right button again, all storage places near the placed pin appear on the screen.
After finding suitable storage, clients can send an online availability request. As seen in the second screen above, clients select the wished starting date and they can also write a note to the host. It is important to mention that it is still up to the host to fully approve of the client’s request.
One thing I introduced into the app that helps clients decide on storage is achievement chips. These chips appear on the storage screen and they represent some form of guarantee to the client that the storage they found is safe and reliable. The hosts are those that get these chips through account verification and a particular number of deals made.
Once the client reserves a rental space, he/she can find the deal in the second tab — my rentals. In this tab, they have an overview of all the offers they made. Clicking one of the cards opens a screen where the person can view their deal but more importantly, where they can edit and/or cancel their reservation. In both cases, they are asked to confirm their action so as not to make an accidental action.
“Messages” is the third tab in this app. It is also present in the host app view because it is more or less universal. The user can search through chats, delete conversations or archive them. Also, in the case of clients’ app view, users can send pre-generated frequently asked questions (as shown in the third shot above).
Profile screens for both app views are relatively similar. On the top of both screens is the button that changes the app view. I intended this button to be easily accessible. Also, if the host has not fully verified their account, he/she is reminded and encouraged to complete verification. That is the purpose of that green vibrant button on the top of the second screen.
In the hosts’ app view, one of the most important things is booking management. To ensure a seamless experience for hosts, I prioritized designing an intuitive request management system that enables them to easily view and manage requests.
Adding and editing offers is also crucial for hosts. It should be easy to add spaces, edit listings, and see reviews.
Regarding the “messages” tab in the hosts’ view, it is the same for both app views. However, chats are divided/separated between the two different app views.
Conclusion
To sum up, the Stash&Store app is designed to solve the problem of secure and affordable storage options for people who need extra space for their belongings. Through the app, renters can easily find and book storage spaces, while hosts can monetize their unused space.
If you liked my case study, make sure to clap this article 50 times.
Pro tip: Try holding the clap button :)
Get in touch
Find me on LinkedIn or email me on danisokic.design@gmail.com
