September 25, 2017

Application UI Design: Social Zines

Follow Me on Twitter

"Think of applications as UX personalities when conducting effective UI design"

Story Boarding UX


Client Brief 

Lead UX-UI Designer

Social Zines is a  Book zine publishing company wishing to make the transition to a digital ecosystem by raising private capital for an upcoming platform launch. I was hired as the lead UI-UX product designer to create several UX-UI solutions relating to branding, UX and product design. Working using agile best practices I began to draft five fundamental principles pertaining how I developed their digital strategy using Sprints for project management using JIRA to administer agile Kanban Boards. 

"Empathize, Define, Ideate, Prototype, Validate"

Empathize is the process of showcasing user personas using digital storyboarding as a means to develop a stakeholder's vision for the product's design expectations, while capturing technical requirements. I created several paper notes based on meeting the Social Zine team on several company settings as a means to capture the product's overcall mission strategy. Defining the business goals behind the product innovation pipeline where essential notes I took while learning about the business needs of the start up by conducting qualitative A/B user research with the founder and two stakeholders. The process behind Ideation is to design an effective IA (Information Architecture) toward showcasing effective application goals for the engineering team. Using prototyping tools that are accessible in transcribing my paper notes into a high fidelity mockups is an  essential process during design thinking meetings. Combining high fidelity Prototyping development into the process was a means to create  pixel perfect screens that best reflected the stakeholder's needs for the final product which was a mobile application Zine Store. Running two sets of User Validation  Q/A using video to record user input was a final layer I orchestrated as the lead product designer working under the leadership behind the project's lead investor. 

Layout Design Prototype-Sozial Zines

The application prototyping phase was a method of gathering user research between reducing my assumptions as a UX designer in relation and delivering a final prototype UI for the team that reflected the product's overall mission strategy. The user experience needed to reflect the call to action cutout oval design from my  initial project notes in addition to maintaining the company's style guide patterns. I began with this basic layout style guide prototype as a means to showcase possible content locations for data and user generated feedback. 


Research Notes UX V1

Research UX Notes V2

Research UX Notes V3

Research UX Notes V4

Research UX Notes V5

Research UX Notes V6


Hi-Fidelity Prototype UI

Hi-Fidelity Prototype Design V2

HI-Fi Interactive Demo

The interactive prototype was a means to display several call to action areas for the user to quickly discover while navigating the final  interface components. During this phase in the project the stakeholder team was very enthused about the oval cutouts with a final request to design a web theme that capture a similar design style through the navigation. As per my research notes, the navigation UI needed to capture the Dashboard CMS component that would eventually be connected to the iOS product. I build a basic web theme for Social Zines with a dashboard content management system for non-technical users to be able to make changes to the web template over time, without needing to hire a full time developer in the process.

View Interactive Prototype


CMS Dashboard UI Design


CMS Custom Widget Development

From Design To HTMl5/CSS/Web Template