Artboard Copy 2.png

UX Design Process

 

Red Thread

UX Design

Red Thread is the first app I've ever designed. I built the app's UI in its entirety from scratch on Sketch.

 

I've been sitting on this idea of a network management app for a while--something somewhere between LinkedIn and Airtable. I've imagined a platform where you can keep track of everyone you're in touch with, grouped together by project and organized by urgency of the interaction. There are a lot of things we all have to keep track of mentally and manually when we're trying to keep track of all the people who've helped us out, the people to help out and just people in general. More often than not we drop the ball and forget to send that follow up email, or can't even remember who were all the people we were talking to to get recommendations for our upcoming trip to Morocco (etc.). While dropping the ball in these situations can be mindless, the stakes high. In fact, I believe the stakes are too high for this to not be automated. A forgotten thank you note leaves someone who really had your back feeling forgotten, unimportant and possibly deceived DESPITE the fact that the only reason you forgot to send the note was because you had a long meeting right after your call and then got a call from your son and had to go pick him up and the rest of the day went to shit. We all have those days BUT it doesn't stop the non-receiver of your non-thank you note to feel any less discarded. We all truly do care about the feelings of those we interact with, even on the most surface of levels, and wouldn't want anyone to feel this way--especially a potential employer, landlord, host, professor, or roommate. That's why I believe network management and the organization of our contacts needs to be broken down and reorganized. It's never been an easy thing to stay perfectly on top of, but I believe it should be. 

The name comes from the reminders of little red threads that I used to tie around my finger to remember to do something, like respond to an email or follow up about a conversation.

My creative process began by focusing on the information architecture of each screen. What are the main features on each screen and how do I want the user to be interacting with each feature (and most importantly what does the user need this feature for and how can I anticipate what would be the most helpful to him or her). Next, I played around with some low fidelity mocks in my sketchbook. Paper is an extremely important step for me to clear my mind and focus on the user's thought processes. Lastly, and most tediously, I endeavored to render my very first collection of high fidelity mocks (which turned out to be the really fun part) and watched as it all came alive.

Pretty exciting right!

Let me know what you think--I'd love any and all feedback. I'm definitely still a rookie at this and welcome any questions, comments or concerns in the comments section below!

 
 

Information Architecture

Tap images above to see the information architecture of each screen I plan to design (this time around...might add more later after gauging some interest). On the left in blue outlines the main features I want to include in each view. On the right, in green, see the corresponding reaction I hope to elicit from the user & how I want the user to interact with the interface.


Low Fidelity Mocks

Above please find my initial sketches of a few of the different screens prior to digital rendering. I always like to sketch by hand before I dive into digital rendering so that I can be fully creative and not limited by the tools available to me in whichever creative application I'm using. Doing this helps me access the more artistic part of my brain rather than the more structured creative mindset. On my software, I'm constantly reminded that whatever I imagine must fit perfectly inside the constraints of the most recent iPhone screen, whereas drawing with a pencil on paper opens up the canvas. This was crucial for an app like red thread, as creative layouts are key for an engaging interface that will help users look at network management in a new way.


High Fidelity Mocks

Below find my "final" renderings of a few different screens of the app. My creative process moved from the blue row (dock screens) to the orange row (core feeds) then to the pink row (a few on-boarding screens), but I ordered them in this way for you to read chronologically as if you were a user (so please let me know if it's confusing). For any questions regarding the purpose of a screen or a button please refer to the information architecture above👆🏼👆🏼 as those notes outline just about every detail. However, if you can't get your questions answered there please navigate to my about page to shoot me a message directly!

Enjoy & can't wait to hear what you think.

a few on-boarding assets 

the three dock screens: search, main feed and activity 

the two main clickable screens: connection profile feed and thread feed

 

That's it!

Hit the button below if you have any questions, comments, concert, critiques or jokes!