Klin Klothing | Mobile App Prototype

I've researched and followed existing app design systems from other retail companies (Uniqlo, H&M, Shein).

Uniqlo, H&M, and Sheins UI Mobile Layout

Most of the apps had a lot of images to highlight their products and use some sort of a gallery slider for users to browse. All of them are actually contained in a card to create some unity and content division.

Klin Klothing's logo ideation process

The idea for the logo is to stick with the business branding of being a minimal clothing brand.

I played around with a bunch of typefaces from serif to sans-serifs and ended up using Crimson Pro. The type's thick serifs and serious tone fits the brand really well of presenting minimalism with an organic and authentic feel.

Klin Klothing's style tile

For the style tile, I wanted to stick with keeping the UI colors to a minimal to keep consistency with the branding. The only colors I used for the UI design is a hue of red and green for actions. I also toned down the hues so it gives off a more earthy feel.

I used Open Sans as the majority of the font for the UI for easy readability on mobile phones.

I created a user persona that fits the target audience of the business in order to design the UI. This way, we can empathize on how our users would feel navigating through the UI.

Klin Klothing's User Persona - Zain Stanton

Meet Zain Stanton! He is a young entrepreneur, loves playing with dogs, and lives a very busy lifestyle as an accountant.

One of Zains goals is to save money to afford a house in Vancouver, while he dislikes a messy workspace environment.

By empathizing with Zain, I started sketching out the wireframe designs and thought of how I could implement the branding of minimalism to Zain's busy lifestyle and his dislike for messy environments.

Klin Klothing's User Flowchart

Users would browse through the UI with various products. The products are either saved for later, or placed in their carts. The user is then asked to check out their item placed in their carts. After various validations, the user's flow ends with a purchase end confirmation.

Klin Klothing's App Wireframes for Landing Page, Register Page, Login Page

For my design, I've decided to re-create that same layout/style because it seems to work and is used by the majority of retail apps (Save-On Foods or AliExpress).

Klin Klothing's App Wireframes for Home Page, Favourites Page

Klin Klothing's App Wireframes for Cart Page, Checkout Page, Success Page

Elements such as having a card style container to contain a product and its information. These cards would contain a product name, image, and a button to save items for later browsing.

Klin Klothing's Prototype example

The app prototype was made with Adobe XD. I've linked most of the buttons to lessen the misclick rate during the test. With this in mind, I can gather more data on how the user interacts with the mobile application and how they resolve their flow when the page changes.

During this project, we were required to test our prototypes by using a third-party software, UseBerry. The data produced by the test was really useful for implementing design changes on where users were stuck.

Testing Takeaways:

• Users got stuck at the login page because the button was linked to a different frame.

• Users expect a product page to appear when a product card is clicked.

• A lot of users click on the image other than parts of the card.

• Coupon button in check out was clicked a lot assuming they thought it was the next button.

After getting some insights with UseBerry, I added and tweaked the final prototype based on the user testing.

Klin Klothing. revisions after test