Cable Archive
ROLE
UX Researcher & UI Designer
-
Process of researching and designing the initial app concept
-
User researching to gain insights and data to design the apps features and design
-
Prototyping and designing the app to create usability tests to gain additional research insights
DESCRIPTION
Electronics and cables are a part of our everyday lives. From HDMI and Ethernet cables to the many different types of USB cables, there are so many different adapters for electronic devices that most people cannot recognize them all. Instead of having to look up the name of cables or just buying new ones for devices you already have a cable for without realizing, there are better ways to organize and identify the many types of cables people often hoard. Cable Archive is the solution to these problems.
Cable Archive is an app that contains a library of every electronic device cable, plug, adaptor, and power cord. Users can search and view information on any of these cables through either text and filter options or by simply taking a picture of the cable. This app is more than just a library of information, users can also create organized groups of cables in the app's Cable Box to manage and care for their cables to help avoid hoarding.
This was a solo project so I was responsible for every part in the creation process. Starting with the basic idea to research, sketching, and prototyping, it was a long process learning many of the concepts and ideas behind UI/UX design.
Duration
18 Weeks
April - August 2023
Try Out The Figma Prototype Here!
View The Full UX Case Study Here!
Cable Archive Logo
View full UX research files Here
User Research
First, research was done on the initial concept behind the app. A survey was sent out to roughly 40 people to gain insight about demographics for the apps possible user base and information on their cable organization habits and perceived tech-savviness. After finding ideal user groups, I created two different personas based on the two main demographics found. These personas would be used used to develop a minimum viable product and the user stories behind these features that I wanted to add. The two main personas: younger, more tech-savvy users, and older, less tech-savvy users. I had found that the younger persona would value the organization features of the app while the older persona would value the search and identification of cables. After creating the main features that would be in the MVP, I drafted out a user flow of the UI. This would then evolve into sketches of the UI and drawn wireframes of the UI.
Sketching & Wireframing
After completing the first steps of user research, I began creating a map of the user flows and highlighting the red routes of the app. When I had finished with this, I moved on to creating basic sketches. I started sketching a couple of the main screens to have a general idea layout and UI design before moving on to create more detailed wireframe sketches of the red routes. I plugged these sketches into a user flow to get a sense of how a user would navigate through the app. These sketches were then moved to Figma where I turned them into low fidelity wireframes. I included all the possible screens a user could go through, showing off menu options and how a user would navigate through screens. These wireframes went through a few iterations until I settled on designs that I liked and felt that they would fit the app the best.
View full wireframe & sketch files Here
View full style guide files Here
I moved to creating a style guide for the app. I wanted things to be simple and easy to understand so I researched possible competitors and other apps with similar functionalities to get a general understanding of their UI layouts and design. I wanted to base the design and feel of the app off of electronics, libraries, and the feeling of things being sleek or efficient. I took some inspiration of coloring from these ideas and went with a simple light blue color as the main brand theme. I then filled out a color palette with various shades of this blue, as well as secondary grayscale colors and denotive colors for some UI features. With a general style chosen, I created sets of icons that would be used throughout the app and chose a typography style. With the style guide completed, I began drafting up ideas for a brand logo. I initially wanted to incorporate both themes of books and libraries with cables and adapters, but found many of the designs overly complicated that did not stand out enough. I decided to then go in the opposite direction for logo design, basing a logo off of the brands name: Cable Archive. I chose to create a logo that incorporated both the "C" and "A" of the name into an abstract view of looking head on at a USB cable adapter. This design went through a few iterations before I finalized a design.
