Kraftly
Kraftly is a mobile application for a craft store, a shop that sells the materials and tools used for making handmade crafts.

The app is a platform to sell a variety of craft suppliers for hobbiers and craft businesses. Kraftly makes it easy for crafters to find and order easily craft supplies from their phones. Users can save their orders for the next purchase.

KraftlyFigmaAppMarketplace
Role

UX designer

Time

1 month

Team

Self-directed

Year

2021

Deliverables

Mobile app

Lo-fi prototype

Hi-fi prototype

User Testing

Research

According to some interviews that I have conducted, potential users want to have a trustworthy buying experience. They want to see adequate information to decide which product to buy. Especially some of the craft supplies should be touched and felt before buying them to understand the texture or color. They also mentioned that they want to see comments and a scoring system for the products sold to choose the right product to buy.

User stories

Lukas

Lukas

Lukas is a student who needs to discover various types of papers with different textures and order in a large amount because he organises paper craft workshops and needs paper materials for it.

Marlene

Marlene

Marlene is a jewellery designer who needs to order well-described craft supplies with quality because she needs specific and unique materials for her creations.

Problem

Adults who run home-based craft businesses or have craft hobbies want to buy craft supplies easily and fast. However, their challenge is to find adequate information about a material, understand the quality of it, and order it easily and securely from a mobile application.

Ideate

Site map

main-image
Ideate

Wireframe

image-edfc5069c6bcfe8b2030908b83e9db777fe9f0f1-720x1280-png
image-f9d294d8691841d7f0dc7393bfb52749d10e099d-720x1300-png
image-046ebd30ee17c722f5b5872280a9cd3245c831aa-720x1280-png
image-a1b4d90bba5c67a5d253bf2361ab7ca608fbbfec-720x1280-png

Digital wireframes

Usability testing

The low-fidelity prototype was the tool for usability testing. The aim was to determine if users complete core tasks such as searching a product, adding to the cart, and checking out. In addition, I have tried to determine if this app is difficult to use or not.

Methodology

Moderated usability study

Participants

5 Participants

KPI

Conversion rate System usability scale

Location

Germany, remote

Date

6 Aug 2021

Length

30 min (each)

Usability testing

Key Insights

Task success rate

88%

System usability scale

95%

01

Visible check-out button

02

Keywords while typing on search bar

03

Sorting and filtering options

04

Product categories at home page

image-51da3605e5b4190d969ef8f66ea94e6b698e5fbc-647x1205-png
image-065a473be8ea22bd9bddaf0a8f2342d861889a13-1109x1205-png
image-bc6501bea57c64cf4e8027135e75e99c3569bc54-8044x4895-png

Solution

I have designed an intuitive, easy-to-use mobile e-commerce application where users can easily navigate and follow the steps with clearly labeled buttons. They can find all information and images about the material needed in an organized and calm way. Neutral colors of the application make users focus on the colors and texture of the materials sold. Labels and tags combined with icons are for better navigation and legibility.

Final design

Features: Animated splash screen

Users are welcomed with an animated, friendly splash screen and land on the sign-up page.

image-0f7b33fb164efc55f770c44d559e14f2dc854aa0-756x1041-png
image-38712dd4045da18f13b7e868a1aeed82ae40a183-756x1041-png
Final design

Features: Hamburger menu

Sub-menus are placed under hamburger menu and designed with related icons.

image-908204e2385fae4699fdf3d65109d159bb993bd0-756x1041-png
image-b51d1f5b5a290c88024538c95014569a444d2681-756x1041-png
Final design

Features: Adding item to cart

Users can review all the important information and customer reviews. They can choose the colour and the amount of the material.

image-05afb89a83fa96e363edce613b41da227341fe4a-756x1041-png
image-2885d04105bd4ff595b7c51d5ed3b7f8edd721e9-756x1041-png
Final design

Features: Check-out with clear steps

Check-out consists of three steps: entering address information, entering payment information and reviewing the item. The steps are clearly indicated for customers. Upon confirmations, customers get a confirmation page.

image-75149f3be35e4ae1dd417d4b5d84ec27c66a92d9-756x1041-png
image-480498c298df1eca6aed39c16b8504f463a96d85-756x1041-png

High fidelity designs are ready for testing

“I have learned that the user testings indicate how a product design should be iterated to meet with user expectations and needs. Therefore the usability studies were valuable and effective towards a better design.”

Conclusion

Next steps

Design other user flows and repeat the same steps from wireframing to user testing

Conduct more usability study to understand if the app is user-friendlier

Conduct more user research to determine any new features of need