Putting the Research to the Test

Now that the research has been explored and there is a better understanding of the client for the app redesign it is important to plan out the app structure. This is essential to building exceptional user experience and functionality. The first step to this process is the information architecture. This is a complex step that requires a lot of thinking which is why it is important to plan out the structure of the app. Information architecture is the process of organizing and structuring content for a variety of web based components such as websites, web and mobile applications, and social media software. Information architecture is a reflection of the UX design process which helps plan out the user experience.

“IA is a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. UX designers use them as the basic materials so that they could plan navigation system.”

Tubik Studio, Information Architecture, Basics for Designers

For my app redesign I focused on the information architecture especially because the original structure of the Poshmark app is disorganized which has especially been proven through my user interviews as part of my research process. I started by sketching out my information architecture which is helpful with the early stages of the planning. It allowed me to fully break down the app and make sense of the structure. Through this process I started to think about how I would restructure the app for better usability and function. For example, as I was organizing the specific menu options I realized having a “Favorites” option wasn’t necessarily important because there is are better options to include. This example explains why my sketch is slightly different than my digital version. The sketches for my information architecture can be found here.

In addition to the sketches for the information architecture, it is important to also look at it digitally because things may be seen from a different perspective. It also helps to fully organize the information for visual purposes. When the information architecture is brought to the computer the opportunity to establish the four main components of IA (organization systems, labeling systems, navigation systems, and searching systems) will become apparent. After I completed my sketches I transitioned into digital information architecture for the Poshmark app which can be found here.

Aside from information architecture, wireframes become the next step in the planning process for a mobile app redesign. inVision, the leading software for wireframes and prototyping describes a wireframe is a low-fidelity design layout that serves three simple purposes. It presents the information that will be displayed on the page, gives an outline of structure and layout of the page, and conveys the overall direction and description of the user interface. 

“Wireframing is a practice used by UX designers which allows them to define and plan the information hierarchy of their design for a website, app, or product.”

Rosie Allabarton, The Definitive Guide: How to Create Your First Wireframe

My wireframing process started out with the basic pen and paper sketches which was helpful for how I planned out the specific layout. With the information architecture it was important to knowing where the components of the app directed the user but with wireframing I was able to in vison the layout such as where the features of the app would go. Since the wireframe process is essentially a sketch even digitally the most common practice is to stay within the black and white color palette. The sketches of the wire framing for the Poshmark redesign can be found here.

Design a site like this with WordPress.com
Get started