Stitched

Stitched homepage screen.

This project is about designing a web application for mobile phones which allow users to buy and sell vintage clothing. It includes 10 high-fidelity wireframes, all with key features added onto each. Also, it has 6 key functionalities, in total, for the users to interact with. Other clothing apps were researched and analysed to study the functionalities they offer. These mobile designs are aimed at the 25 to 34 year old demographic. A fun and vibrant colour palette was used to appeal to a younger audience.

My Process

Objective

To design the UI for the mobile version of a vintage clothing e-commerce app and prepare for handover to developers.

Low-fi wireframes

Balsamiq Wireframes was used to arrange the placement of different components and elements used for each page.

Stitched 'login' low fidelity wireframe. Stitched 'sign up' low fidelity wireframe. Stitched 'upload items' low fidelity wireframe. Stitched 'gallery' low fidelity wireframe. Stitched 'product' low fidelity wireframe. Stitched 'customer-reviews' low fidelity wireframe. Stitched 'write a review' low fidelity wireframe. Stitched 'basket' low fidelity wireframe. Stitched 'payment' low fidelity wireframe. Stitched 'search items' low fidelity wireframe.

Mid-fi wireframes

Figma was used to edit the arrangement of the selected components and elements used for each page. Real text was added to buttons, titles, sub-headings, paragraph sections, etc.

Stitched 'login' mid fidelity wireframe. Stitched 'sign up' mid fidelity wireframe. Stitched 'upload items' mid fidelity wireframe. Stitched 'gallery' mid fidelity wireframe. Stitched 'product' mid fidelity wireframe. Stitched 'customer-reviews' mid fidelity wireframe. Stitched 'write a review' mid fidelity wireframe. Stitched 'basket' mid fidelity wireframe. Stitched 'payment' mid fidelity wireframe. Stitched 'search items' mid fidelity wireframe.

Hi-fi wireframes

Figma was used to add colour to the wireframes, using a colour scheme from the style guide. The style guide's typography was also applied at this stage.

Stitched 'login' hi fidelity wireframe. Stitched 'sign up' hi fidelity wireframe. Stitched 'upload items' hi fidelity wireframe. Stitched 'gallery' hi fidelity wireframe. Stitched 'product' hi fidelity wireframe. Stitched 'customer-reviews' hi fidelity wireframe. Stitched 'write a review' hi fidelity wireframe. Stitched 'basket' hi fidelity wireframe. Stitched 'payment' hi fidelity wireframe. Stitched 'search items' hi fidelity wireframe.

Mockups

These mockups illustrate how the devices look on mobile phones when users are on the app at various locations.

Stitched 'login' mockup Stitched 'sign up' mockup Stitched 'upload' mockup Stitched 'gallery' mockup Stitched 'product' mockup Stitched 'customer reviews' mockup Stitched 'your review' mockup Stitched 'basket' mockup Stitched 'payment' mockup Stitched 'search' mockup

Conclusion

Creating a vintage clothing app, for 25 to 34 year olds, was a success. Using Balsamiq wireframes allowed for rapid sketches of low fidelity wireframes to be created. Figma was useful at adding real text and a colour scheme to the mobile screens' mid fidelity wireframes. All the key functionalities were implemented.