Responsive Web App for an Online Store

PROJECT OVERVIEW

PROJECT:
Solo Student Project

ROLE:
UI/UX-Designer

DURATION:
1 month

App Cover

CONTEXT

An online store that helps everyone find products quickly and easily to match their particular needs.

Pottr.ly is an online platform that blends traditional craftsmanship with modern design, offering a curated selection of handcrafted pottery through a sleek, user-friendly interface.

We provide a sophisticated shopping experience that makes discovering and purchasing unique pottery both effortless and enjoyable.

Pottr.ly is designed as a responsive web app, to ensure a seamless experince on every device.

THE PROBLEM

Most Online Stores are unintuitive and overwhelming.

Users are tired of the complex and unintuitive navigation systems in traditional online stores.

Once they make it to the checkout, users face the next problem of not having a fitting payment option available or the need to create an account to proceed.

THE SOLUTION

Implementing an advanced filtering system, flexible payment options and real user reviews.

To navigate online shops easier and in a more intuitive way, we provided accessible solutions for the users main pain points. 

Our modern and clean design makes navigating our online shop intuitive.
A smart filtering system, flexible payment methods and checkout options provides the user with a high flexibility.

Real user reviews helps the user to make better buying decisions, for a lower return rate.

Mockup Tablet

MVP
(Minimum Viable Product)

To design an online store that helps everyone find products quickly and easily to match their particular needs.

USER RESEARCH

User Research – The 5 W’s

WHO

This tool is for people who want to shop for key items without going into a physical store.

The online store is particularly valuable for people who struggle to find the items they want in traditional stores.

Most of the users will be proficient with technology but will greatly benefit from basic navigation and clean design.

WHAT

A responsive web app, that shows users the inventory and can be filtered in particular ways depending on their needs.

The tool allows users to purchase their desired goods and have them delivered to any address.

WHEN

This product will be used most often on commutes to and from work, in the evenings, during lunch breaks, and on weekends.

WHERE

Users can easily shop from anywhere they can connect to the internet, whether on a mobile device or on a desktop.

WHY

Users don’t have the time or ability to visit physical stores and would rather buy their goods on the go or from home.

It’s also more convenient to try out the items and easily return those that aren’t desired or appropriate without having to return to a physical store.

COMPETITOR ANALYSIS

SWOT Analysis – Motel A Miio

STRENGHTS

  • Motel a Miio is recognized for its unique, handmade Portuguese ceramics that emphasize both quality and sustainability.
  • The brand’s strong identity and commitment to ethical production resonate well with its target audience, creating a loyal customer base.

WEAKNESSES

  • There are significant opportunities for Motel a Miio to expand into new international markets and to diversify its product offerings.
  • This could attract a wider range of customers and capitalize on the growing interest in sustainable and artisanal goods.

OPPORTUNITIES

  • This product will be used most often on commutes to and from work, in the evenings, during lunch breaks, and on weekends.

THREATS

  • The brand faces potential threats from economic downturns, which might reduce demand for luxury items.
  • Additionally, the increasing competition in the sustainable and artisanal products market could pose challenges.

COMPETITOR ANALYSIS

SWOT Analysis – Onomao

STRENGHTS

  • Onomao is distinguished by its minimalistic and earthy ceramic designs, which cater to consumers seeking both aesthetic appeal and functionality.
  • The brand’s strong emphasis on sustainability further enhances its attractiveness in a market increasingly oriented towards eco-friendly products.

WEAKNESSES

  • The brand’s narrow product range and high pricing can limit its customer base.
  • Furthermore, Onomao’s niche market positioning might restrict its visibility compared to larger, more diverse competitors.

OPPORTUNITIES

  • Onomao can explore international expansion, tapping into new markets where sustainable and artisanal products are in demand.
  • Collaborations with designers or influencers, as well as product line diversification, could also enhance its market presence and appeal.

THREATS

  • Onomao is vulnerable to economic fluctuations, which might impact consumer spending on non-essential items.
  • The threat from larger competitors offering similar products at lower prices could also challenge the brand’s market position.

User Personas

User Personas

Key Features

  • Login/ Logout
  • Create account
  • Like/ share items
  • Advanced filtering systems
  • Flexible payment options
  • Flexible checkout options

User Flow Diagram

Low-Fidelity-Wireframes

Using the method of Crazy 8’s sketching, I was able to focus on the essentials without overthinking it.

Mid-Fidelity-Wireframes

In the mid-fidelity stage I was refining my drawings from the low-fidelity state and used the tool Figma for wireframing.

USABILITY TESTING

Gathering constructive feedback from 5 testers

To assess the design’s effectiveness, functionality, and usability, I used Slack to gather constructive feedback. This process allowed me to make informed enhancements to the app’s overall design.

FEEDBACK

The Feedback I received was very valuable and helped me to improve my design decisions later on.

  • “I love the design and overall layout. The app is easy to navigate, readable, and user-friendly with good spacing overall.”
  • “This navbar should stay visible while scrolling (menu, logo, search and cart)”
  • “Consider moving over the heart/share icon just a little bit towards the left so its not close to the product title on the right side”
  • “As I read, we should avoid using “Click Here”. Make the “Forgot your password?” clickable.”
  • “You should make these options distinct. (3 buttons in shopping cart)”
  • “The arrows from the filters are misaligned from one screen to the other.”

Branding Guidelines & Style Guide

As this whole project involved building a brand from scratch, I developed detailed branding guidelines which include not only a style guide, but also deliver guiding principles and the tone of voice from our brand.

High-Fidelity-Wireframes

In the high fidelity stage, I applied the branding guidelnes to the final design, making sure everything is consitent and aligns with our future brand.

High Fidelity Wireframes

Mockups & Walkthrough

Start shopping right away, without needing to create an account.

App 3 Screens

Browse through our carefully curated collection of unique pieces.

Easy access to search on every screen, for a seamless user experience.

Didn’t find what you were looking for? Maybe check out recently viewed pieces, or search again.

Search screen

Use our advanced filtering and sorting options, to perfectly fit your needs and make shopping more time efficient.

Get a detailed overview from the selected piece and read real user reviews, to make your shopping decision easier.

Choose afterwards if you want to keep shopping, or go right to checkout.

Selected item

Choose your preferred checkout option and pick the payment method that suits your needs.

View your order summary and double check before submitting your final order.

As a thank you for your order, we’ll give you 10% off of your next order.

order summary

If everything goes wrong, we still have your back.

Our user friendly 404 page explains what happened and provides you with an exit.

PROTOTYPE

Click through the prototype to learn more and experience the functionality of the app.

THANK YOU

Let’s connect

Privacy Policy

© 2025 Doreen Thurm