Background Home

Abel & Fields

Mobile Prototypes

Online Catagolue

User-Centered Mobile Interfaces

The Client

Abel & Fields is a fictional clothing company for whom I have developed a number of materials including promotional digital graphic design and mobile site prototypes. Founded by a collective of artists and fashion designers working collaboratively, Abel & Fields was founded on the virtues of socially-conscious industry ethics. Their materials are locally-sourced and all products are constructed in-house at their A&F studios. As a mainstay in the fashion landscape, the client requires a mobile site design that will represent their visual aesthetic while providing a seamless and intuitive online shopping experience for their users.

The Challenge

As the fashion industry is one with a deep pool of competitors for my client, it was crucial to maintain Abel & Fields' brand identity throughout the design of the mobile interface in order to both attract new users and retain their established audience, while simultaneously creating a space that will be task-oriented with the end user in mind. The interface would be reliant upon both its functionality and ease of use, and also its visual aesthetic. Throughout the early stages of the project, the question soon became: how will I create a mobile experience for an audience that is accustomed to an established brand identity, while also focusing on the end user's ease of use?

97% Complete
78% Complete
76% Complete
Responsive image

The Process

In order to achieve this aim, I began by first wireframing a series of mobile interfaces that would allow me to establish a series of tasks with user stories in mind. I then constructed a set of user personas to establish the precise target audience for my client, with the primary audience being both males and females aged 17-41, with moderate computer literacy and an expendable income. As I myself fit into this audience, I then examined my client's competitors sites in order to examine both what I found to be successful and what I felt should be changed.

Phase 2 of this project involved creating photoshop mobile prototypes based on my chosen wireframes and importing them into InVision to undergo user testing. This phase involved providing a test group a pre-defined task and requesting the participants to complete this task via InVision's live demo feature. Based on the feedback acquired during a think-aloud protocol, I then altered my site design before moving on to the final phase of the project: a heuristic analysis. Three participants were asked to critique the site based on the areas of task orientation, search, data entry, navigation and information architecture, writing and content quality, and trust & credibility. Abel & Fields mobile site design is the result of an iterative process of both UI & UX testing, and visual communication design.


UI/UX Design

Branding, Graphic Design


Adobe Photoshop

Abel & Fields