Portfolio - Simon Taylor UX/UI Designer

Stitch Mobile App Case Study

Stitch is a mobile application lovingly created for textile artists.

It provides users with the freedom to work in their own space, at their own pace and still be connected to a community of other makers.

Stitch is a 9-week project that encapsulates the entire UX/UI design process from top to bottom including: problem space forming, ideation, market research, user interviews, persona creation, experience mapping, user stories, task flows, sketching, wireframing, prototyping, user testing, UI design, responsive web design and development handoff.

Research

Beginning with a list of assumptions generated from further exploration of the problem space I conducted quantitative and qualitative research through a survey and direct interviews.

Through my interview and survey I wanted to understand: peoples current learning habits, behaviours and motivations; where and how people are currently accomplishing this; what do/don’t they like about the current process.

After conducting user research I uncovered the following insights:

1) People interested in the textile arts like to learn these skills in their spare time

2) They choose to do so at home or in evening classes

3) Multiple online platforms are used for research, guides and troubleshooting

4) People enjoyed these activities because it helped them relax after work

5) People lose motivation and get frustrated when they get stuck and can’t find a solution

Persona

I chose to create a target user persona after conducting my research. I built the persona around my research findings and from my 2+ years experience in various evening classes.

It was important to me that this persona was multi-dimensional and relatable.

Experience Map

I created an experience map to explore the current learning experiences of Anna. The goal was to understand her motivations and experiences, and empathise with her pain points throughout the process.

The map covered all aspects of her user journey, from finishing work, to travelling to class, to coming home from class and continuing with her classwork.

Empathy, Insights + Opportunities

The key moment in the above experience map occurs when Anna hits a roadblock with her project work once she returns home.

Being new to sewing she doesn’t know how to articulate her issue and can’t find advice online.

In a few moments, enthusiasm turns to confusion, frustration and annoyance.

By empathising with Anna and her emotions in this moment the following design questions presented themselves:

1) How might we enable someone to raise a hand and ask a question wherever they are?

2) How might we easily connect people with questions to those with the correct answers?

3) How might we remove the information overload often found when looking for advice online?

4) How might we encourage people to stay motivated around their goals?

User Stories

After the experience map the next step was to generate user stories to determine the features will that allow my app to alleviate the pain points and improve the current experience.

Over 50 user stories were generated in total.

Task Flows

To establish the information architecture of my app, it was important to draw out task flows for a typical user.

Task flows I explored included: project exploration; project sharing; project progress tracking; search; project collaboration feed.

Inspiration and sketching

After conducting my research I began researching existing solutions in the problem space.

I reviewed and tested a multitude of different apps and analysed the different approaches to features such as search, profile screens, sharing, product screens, home feeds and chat.

From this research and inspiration I began sketching out lo-fi analog wireframes.

Lo-Fi Digital Wireframes

Translating my sketches into digital wireframes was the next step in the process.

This allowed my to solidify the ideas and prepare for user testing.

User Testing

Usability testing was conducted over two rounds; each round with 5 participants.

The lo-fi digital wireframes were put into Invision to create a usable prototype that testers could try on a mobile device.

The feedback allowed me to further iterate my design and eliminate any pain points or flaws in the flow.

The below images show the evolution of the app homepage feed based on the insights gained during user testing.

Branding

It was important that my app have a visual identity that is fun, creative and engaging.

After exploring many different font pairings and individual fonts I chose a font that represented the thread and loops that form the basis of all textile arts.

Further work was done on the word mark to replace the bars of the Ts with a needle that was passing through two loops to create a stitch.

UI Library

I developed a clear and concise visual style for my app with a muted colour scheme that would allow project images and the images of the app users to take centre stage.

I implemented a card system and structured font selection to create a solid visual hierarchy.

Hi-Fidelity Wireframes

After establishing the visual identity of the app, the next step was to transform the greyscale wireframes into the high fidelity wireframes that would form the final deliverable interactive prototype.