Now that the start of the wireframing process has been explored and the information architecture has been solidified I have begun the process of wireframing the entire app of the redesign. This has been a lengthy and often mind numbing process but with the help of the downloadable wireframing kits from Adobe I have been able to make my work more productive. I decided to use Adobe XD to complete my wireframing because I have the most familiarity with this program and with the requirement to make 40+ wireframes I needed to work fast yet efficiently.
I used my information architecture as a guide to layout my wireframes. I made my wireframes as detailed as possible but with my ultimate goal of simplicity in my redesign I kept each screen minimal for optimal user experience. The wireframing process though long and often repetitive has helped me think more about how I want my app redesign to look in the end. This has been good leverage toward my ultimate goal. I found the downloadable wireframing kits to be helpful in finding a design that could reflect my vision but be able to modify them to fit what makes sense with my overall look and feel.
Through my explanation of the wireframing process there may be slight confusion on the difference between wireframing and prototypes. Adobe Blog has a great article that explains this difference. The major takeaways from this is include they look different, they communicate different things, and they serve different purposes.
“Wireframes and prototypes differ in terms of functionality, but both serve as useful tools that allow product teams to create better products.”
Nick Babich, Everything You Need To Know About Wireframing And Prototypes
My thought process for the wireframing portion of the redesign was to consider the most important features of the app. During this process I thought a lot about the users of the app and their reviews and feedback they have provided. I also needed to consider what the app was before in terms of the features that weren’t working. I did my wireframes according to the feedback and how the app could work smoothly with new features. You can view all of my wireframes here.
Aside from the process of wireframing there was a need for visual research which is important to do before determining the branding, look and feel of my app redesign. The visual research this week consisted of color palettes, typography, examples of mobile app UI designs, imagery, graphics, and photography. Aside from the process of wireframing there was a need for visual research which is important to do before determining the branding, look and feel of my app redesign. The visual research this week consisted of color palettes, typography, examples of mobile app UI designs, imagery, graphics, and photography.
To maintain consistence throughout the overall brand of Poshmark I decided to keep the same color palette as the original branding. Along with a color palette type options are important to consider. I have a variety of typographic options which include Open Sans, Roboto, or Montserrat. I found a lot of inspiration from other UI designs that became beneficial to my visual research. I looked for some that had nice design elements or had design features that I could consider for my app redesign. Poshmark has a lot of great photography on their website which I pulled from for options for my redesign. Considering the app doesn’t have a lot of professional looking photography I think this would be a benefit to the redesign. My visual research board also includes the UI elements I used in my wireframes which were icons, menu bar, and buttons. To look at the visual research more in depth click here.
Mikayla Lovering 