Dry Foot Studio App Concept
UX Design | June 2021
Brief
Many customers would like to support their local businesses but find themselves oftentimes relying heavily on the online presence of big-box retailers for their shopping needs because of convenience. Many stores within communities lack a meaningful online presence and incentives to entice customers to shop at their stores.
Solution
Dry Foot Studio is a storefront app concept as part of the Google UX Design Professional Certificate program that aims to provide an online shopping experience similar to their larger counterparts. Dry Foot stated they wanted a customer rewards program to bring them more business and to incentivize customers to shop locally.
I decided to design a whole storefront app for them to showcase the incredibly high quality craftsmanship they produce with their ceramic wares. The loyalty/rewards program would run throughout a majority of the app flow as a little gentle reminder how the user is supporting local business.
Responsibilities
Overall design from concept to delivery, user research and usability studies, wire framing, low and high-fidelity prototyping.
User Research
I conducted user interviews, empathy maps, and user flows in order to better understand the pain points of the end-user and how to proceed with the design. It focused mainly on qualitative research methods in order to really hone in on the aspects they really want in an app.
The key takeaways from the research centered around users wanting to support their community businesses and creating a shopping experience similar to big-box retailers that they primarily shop online with.
Pain Points
1. Complicated and unintuitive design practices break the shopping experience.
2. Accessibility concerns.
3. Deceptive patterns in regards to the checkout process.
Solutions
1. Keep the design simplistic with a modern approach to match Dry Foot’s ceramic design philosophy.
2. Maintain consistent and readable design elements with good contrasting colors.
3. Avoid deceptive patterns and make sure to always label steps within the user flow.
User Personas
Wireframes and Flow
Initial wireframes and the general flow of the app.
Original Prototype
Discovery
I put most of my focus into making sure the customer rewards program was front and center. I also wanted to showcase some of the perks of being a member of the store by offering app exclusives and deals that changed daily.
Item Addition
For this aspect, I was trying to put as much information as possible without overwhelming the user. I was playing with the different event states: modal for successful cart addition and the cart sliding up when “view cart” is clicked. I paid special attention to making sure certain important aspects were clearly labeled (i.e. checkout button).
Prototype Takeaways
I enjoyed the start and the direction project was taking. The issues I was having moving along with this project were with the color scheme, the curves, and the lack of clear findability on the discovery page.
I was trying really hard with the landing page to somewhat “gamify” the rewards program. My initial idea was to have a crown that slowly filled up as you gained more points. I abandoned this idea as I didn’t think it fit with the overall aesthetic and design philosophy of the Dry Foot store. They enjoy a more minimalistic approach as seen in their ceramics — clean, straight lines with a simple color palette.
I also failed to really take into account accessibility concerns. Trying to stick to the brief, the discovery page fails to properly label the product images. I might have stuck to the “not overwhelm the user” a little too rigidly at first.
The cart process I did really like. I think the modal addition might have been a little too much (not always the case) and really liked the implementation of the cart slide. It allowed the user make changes without forcing them to run around to different pages to do so.
High-Fidelity Mockups
Discovery & Profile
I decided to primarily make the storefront the main attraction for customers and separating out the profile to its own page — still completely accessible from the landing page and menu slider.
Filtering options were important to me and I didn’t want the user to have to travel unnecessarily by scrolling excessively or leaving the page altogether. I implemented the filtering options with the most used search terms at the top that the user can select or the user could use the filter icon at the left for more precise filtering options.
I also changed up the color scheme to better match and complement the ceramics Dry Foot produces. Bringing a cooler and somewhat earthier tone to highlight the material of the ceramics themselves.
Product & Cart
The main motif for me again was highlighting the products to entice customers and ended up making the product image as large as possible to showcase it.
This is also where we start to see the rewards program run through the app outside of the profile page. The user can see the impact of their purchase and how much they’ll be rewarded with their purchase.
I paid special attention to making sure important information was labeled properly and had an accompanying icon that made sense.
I completely removed the modal success from the prototype believing it added an unnecessary step. Instead, once the item is added to the cart, the cart automatically slides allowing the customer to either immediately checkout or slide the cart down to continue shopping.
Checkout Flow
Here, I wanted to make sure that the rewards could be edited or applied if not already attached through the redemption page on the profile.
I paid special attention to the flow of the checkout process since this was something that users had mentioned with their pain points. I made sure steps of the process were labeled and easily readable, they could edit their order multiple times during the flow, and made sure the steps were intuitive to follow.
Mock-Up Takeaways
Throughout the iteration process, I became incredibly empathetic towards the user and how the design could impact their experience positively. This really influenced a lot of my design decisions.
Color was a very big design choice for me. Originally, I went with the darker purple and built around that. However, after multiple design sessions, I realized I was doing a disservice by putting what I wanted in there and not what the brief was asking for. I finally landed on something that I think really compliments the ceramics and fits the overall design philosophy of Dry Foot.
I also really liked the idea of adding some curves to the project. My reasoning behind this was to incorporate more things from the world of ceramics. A common ceramic decoration and glaze is a curvy, complex blob-type feature. I applied this to the original prototype but thought it was overdone and too in-your-face. I settled on still incorporating it but in a more subtle manner on the product page almost as a highlight.
Finally, the checkout design and flow were incredibly important to me. During my interviews, the checkout process was something the users were especially vocal about. They had concerns around deceptive patterns and being overwhelmed with the process in general (i.e. not intuitive, not easily readable, etc.). I made sure that those things were addressed while still sticking to the brief.
