SoleSpace
Project overview
SoleSpace is a mobile e-commerce app offering a curated selection of shoes from top brands. Whether you're searching for sports shoes, casual wear, or formal footwear, SoleSpace delivers a seamless shopping experience tailored to every customer’s style and need. Designed with a sleek, user-friendly interface, the app ensures secure payments and prompt delivery, making shoe shopping more convenient than ever.
Objective
The objective for an e-commerce shoe app could be to provide customers with a user-friendly and convenient platform to browse and purchase shoes online. Some specific objectives that can be targeted are:
The goal of the e-commerce shoe app is to offer customers a user-friendly, convenient platform for browsing and purchasing shoes online. The app focuses on the following key objectives:
Boosting Sales: The primary aim is to drive sales and increase revenue. By showcasing the latest collections, offering exclusive promotions, and providing easy payment options, the app encourages customers to make quick and seamless purchases.
Enhancing the Shopping Experience: The app is designed to deliver a smooth, enjoyable experience through features like intuitive navigation, advanced filtering, personalized product recommendations, and tailored shopping suggestions.
Fostering Customer Loyalty: Building a loyal customer base is essential. The app improves retention by offering a loyalty program, personalized offers, and top-notch customer service, motivating repeat purchases and long-term engagement.
Design Process
Empathise
Define
Ideate
Prototype
Test
Competitive analysis
User analysis
Brain storming
Low fidelity design
Usability testing
User personas
Information architecture
High fidelity design
Feedbacks
Empathy map
Sketch
UI kit
SWOT analysis
Final prototyping
Case study
Wireframe
User research
Surveys
User personas
Creating a persona is a method used to envision the target users for the design. By listing their goals, needs, motivations, as well as fears and frustrations, the persona represents individuals with shared characteristics from user interviews. This persona plays a crucial role in guiding the design process.
Name
Ola
Age
26
Location
Nigeria
Occupation
Personal Trainer
Short story
Ola is a 26-year-old working professional personal trainer who spends most of his time working out and training others. He needs a shoe e-commerce app that offers a variety of athletic shoes that are suitable for his workout routine. However, with his busy schedule, he finds it difficult to take the time to go shopping for shoes. He has tried buying shoes online before, but has had mixed experiences with different e-commerce platforms. Some of them had limited options, while others did not have accurate sizing information, leading to disappointment and frustration.
Pain points
He finds it Difficult in finding shoes that are suitable for his workout routines.
Difficulty finding shoes that provide the right level of support and comfort.
Lack of time to visit physical stores.
Limited variety in local stores.
Uncertainty about the quality of shoes when buying online.
Inconvenient return policies
Goals
Ola is always on the go and values convenience above all else.
He wants an e-commerce shoe app that is easy to use, has a wide selection of shoes to choose from, and provides accurate sizing information to ensure that she gets the perfect fit every time.
He wants the app to be user-friendly and intuitive, allowing him to quickly and easily browse through different styles, filter options based on his preferences, and make a purchase with just a few taps on his phone.
He also values high-quality customer service, and wants to be able to contact the company easily if he has any questions or concerns.
User Empathy Map
The empathy map was a visualisation tool that helped gain a better understanding of customers’ needs, behaviours, and motivations.
See
Goals
Thinks
Values
He sees the home page of the app, which features different types of shoes, popular styles, and current promotions.
He sees the product pages for each shoe, which includes images, pricing, sizes, and colours.
He sees reviews and ratings from other customers.
He user sees a shopping cart and checkout page.
He wants to find a comfortable and stylish pair of shoes that fit their budget.
He wants to save time and effort by shopping online instead of going to a physical store.
He wants to make an informed purchase based on accurate product information and reviews.
He wants to have a positive shopping experience and feel good about their purchase.
He is excited to browse the app and see the latest shoe styles.
He may feel overwhelmed by the number of choices available.
He may feel hesitant to make a purchase, especially if they're unsure about the sizing or quality of the product.
He may feel satisfied and confident in their purchase after reading positive reviews from other customers.
He values comfort, style, and affordability in their shoes.
He may be environmentally conscious and prefer brands that use sustainable materials or production methods.
He may be interested in supporting small or local businesses instead of large corporations.
He may value convenience and accessibility in their shopping experience.
Strengths
Opportunities
Weaknesses
Threats
Convenient and easy to use platform for customers to purchase shoes.
Wide variety of shoe brands and styles available for customers to choose from.
Ability to offer personalised recommendations based on customers' past purchases and browsing history.
Low overhead costs compared to brick and mortar stores.
Ability to easily track and analyse customer data and behaviour to improve sales and marketing strategies.
Increasing demand for online shopping: With the increasing use of smartphones and the internet, more and more people are turning to online shopping. An e-commerce shoe app can tap into this growing trend.
Expansion into international markets: With the help of global shipping services, an e-commerce shoe app can expand its customer base to international markets and increase its revenue potential.
Expansion into other product categories: An e-commerce shoe app can consider expanding its offerings to include other related product categories, such as accessories to attract more customers.
Dependence on technology and potential for technical issues such as server downtime or app crashes.
High competition in the e-commerce shoe market, making it difficult to differentiate from other platforms.
Difficulty in accurately representing shoe fit and comfort through an online platform.Potential for fraudulent activity and security breaches, putting customers' personal information at risk.
Limited ability to physically try on shoes before purchasing, leading to higher rates of returns and exchanges.
Economic downturns or recessions that may decrease consumer spending on non-essential items such as shoes.
Changes in consumer behaviour or preferences, leading to a decrease in demand for certain types of shoes or brands.
Increased competition from other e-commerce platforms or brick and mortar shoe stores expanding into online sales.
Changes in regulations or laws related to e-commerce and data privacy.
Potential for supply chain disruptions or shipping delays due to external factors such as natural disasters or pandemics
SWOT Analysis
A SWOT analysis was used to find out the internal and external factors that make a company successful or not. In other words, it’s was used to analyze in detail how your online shop is doing so as to design a long-term strategy.
Information Architecture
The goal is to create a user-friendly and intuitive interface that allows users to find and purchase shoes quickly and easily, with the structural design of organizing and labeling digital content to support ease of use, navigation, and retrieval of information.
Splash screen
Home
Shopping cart
Wishlist
Sign in or sign up
Guest sign in
Nav bar
Select size & colour
Search
To checkout
To checkout
Add to favourites
Shoe type
Product list
Product page
Order review
Order confirmation
Order overview
Continue shopping
Enter or reuse
saved checkout
& shipping details
Enter or reuse
saved checkout
& shipping details
Onboarding
Add to cart
Add to cart
Staff picks
Favourite Brands
Discover
Sales
Filter
$10
$1000
$10,000
Category
Brand
Colour
Size
$000.00
Company name
4.5
123 Reviews
Product name
Size
Colour
Lorem ipsum dolor sit amet consectetur. Sed blandit vel mi dolor blandit tempor nascetur id eget. Tempor cras sagittis turpis gravida sit. Pellentesque in lectus mattis nulla venenatis etiam. Mus duis ipsum leo lacus ut adipiscing justo commodo morbi. Id turpis semper nullam sed. Sed commodo amet venenatis pharetra Show less.
Reviews
Help
Discover
Description
Checkout
Lorem ipsum dolor sit amet consectetur. Sed blandit vel tempor nascetur id eget.
Full name
E-mail address
Phone number
Shipping addresss
Post code
Wishlist
Recommendations
Add all to cart
Add card
Lorem ipsum dolor sit amet consectetur. Sed blandit vel tempor nascetur id eget.
Card number*
Card name*
Expiry date*
CVV*
Remember card?
Lorem ipsum dolor sit amet consectetur. Sed blandit vel tempor nascetur id eget.
Home screen
*Some screens
Filter screen
Product detail screen
Shipping address screen
Wishlist screen
Add card screen
Low fidelity wireframe
Creation of wireframes to visualize the app's layout and user interface. These wireframes were then transformed into high-fidelity prototypes that effectively demonstrated both the functionality and design of the app.
The onboarding screens typically appears when a user launches the app for the first time or when they create a new account. The purpose of the onboarding screen is to guide users through the essential features of the app and help them get started with using the app.
Onboarding screens
Splash screen
Onboarding screen 1
Onboarding screen 2
Onboarding screen 3
High fidelity design
The HI-FI designs with referees to the wireframes of the app’s layout and functionality. The wireframes will outline the user flow, the various screens and features of the app, and how they all fit together.
The Home Screen of the app is a critical part of the app's user interface. Its function is to provide a welcoming and visually appealing interface for users to navigate the app and explore available shoe products.
Search bar: A prominent search bar at the top of the Home Screen to allow users to search for specific products or brands.
Banner: This section displays promotional offers, discounts, or new products.
Sales: A section that displays current promotions and discounts available on shoe products.
favourite brands: section allows users to save their favourite shoe brands and view their products.
Featured products: A section that highlights a selection of products, with an image and brief description. This section includes the latest or most popular shoe products.
Navigation menu: A menu that displays the app's different categories of shoe products. The menu was designed to be easy to use and intuitive.
Home screen
A product detail screen is an essential part of an e-commerce shoe app. It provides users with detailed information about a specific product and allows them to make informed purchasing decisions.
Product Image: Displays a clear and high-quality image of the shoe product from multiple angles.
Product Title and Description: Providing a clear and concise title for the product along with a detailed description that includes the product's features, material, size, colour, and style.
Product Price: Showing the price of the product with an option to display any available discounts or promo codes that are applicable to the product.
Product Size and Colour: Displaying the available sizes for the product and provide a size chart with the recommended measurements for each size. Also, providing a guide on how the shoe fits and whether it's true to size or runs large or small.
Reviews and Ratings: Displaying reviews and ratings of the product from other customers who have purchased it.
Add to Cart and Buy Now Buttons: Providing a clear options for users to add the product to their cart or buy it directly. It should also display the number of items in the cart for easy tracking.
Product detail screen
The main goal is to provide a clear and intuitive way for users to manage their orders and complete their purchases.
Products list: The cart screen shows the list of all the shoes that the user has added to their cart. For each product, it displays the name, price, size, and quantity.
Promo Code: Allowing users to enter a promo code if they have one. If the code is valid, apply the discount and display the new subtotal with the discount applied.
Order summary: It displays the total cost of all the items in the cart, including any shipping fees that may apply.
Checkout: The user is able to proceed to checkout directly from the cart screen.
Cart screen
The main goal is to provide a clear and intuitive way for users to manage their orders and complete their purchases.
Shipping Information: The user has the option of using saved information or entering a new shipping information, such as their name, address, phone number, and email address.
Shipping Method: The user has different options of shipping methods that suits their needs.
Payment Method: The user has different options of payment methods that suits their needs.
Add card: The user has to enter their payment information, such as their credit card number, expiration date, and security code. The app also allow the user to save this information for future purchases.
Order review: The final step in the checkout process is to review the items that are in the user's cart and also the option to edit any of the steps taken and after payment has been made, it then display a confirmation screen that shows the order number and estimated delivery date.
Progress indicator: Helps the users know their progress and how far they hae gone.
Checkout screens
The wishlist screen is a convenient feature for users to keep track of the shoes they are interested in purchasing, and to share their wishlist with others. It also helps to drive sales for the e-commerce app by encouraging users to revisit their wishlist and move items to their cart.
Here, they can view all the shoes they have added to their wishlist, along with the shoe name, image, and price.
Remove from Wishlist: The user can remove all the shoes from their wishlist by clicking on the trash icon. The shoes are then removed from their wishlist.
Move to Cart: The user can move shoes from their wishlist to their cart by clicking on the bag icon. This adds the shoes to their cart and removes it from their wishlist.
Sort and Filter: The user can sort and filter their wishlist by various criteria, such as price, brand, size, color, etc. This makes it easier for them to find the shoes they are looking for.
Wishlist screen
More Screens
Aa
Montserrat
Font
Layout
A B C D E F G H I J K L M N O P Q R S T U VW X Y Z
1 2 3 4 5 6 7 8 9 0
$ & * - + @ ? . , /
Gutters - 8
Layout Column
Count - 4
Type - Stretch
Margin - 16
Style guide
Typography
Head 1
42/48 Semibold
Head 2
32/40 Semibold
Body large
16/24 px Medium
Small
12/16 px regular
Head 3
24/32 px Semibold
Title
18/24 px Medium
Body
14/18 px regular
Outline
10/14 px regular
Montserrat
Font family
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn't compromise, allowing letters to be settled into their natural width.
#000000
#FFFFFF
Colours
THANK YOU FOR VIEWING
