Work

Imported Apples: iPad Publication

iPad Mockup.jpg
 
 

Imported Apples is a conceptual iPad publication about 3 foreign designers who worked at Apple Computers.

 

Project Requirements

  • Choose 3 designers

  • Research the designers, write content, and collect imagery

  • Design an interactive iPad Publication

 

Constraints

  • Time: 3 weeks

  • Deadlines

    • Week 1: Content & Design Directions
    • Week 2: UX & Final Design (all screens)
    • Week 3Prototype

 

Project Goal

  • An interactive e-publication experience that communicates the work of 3 designers

 

Picture of Success

  • An interactive reading experience

  • An iPad-focused design

  • An easy-to-use, functional navigation

 

 

UX  Design

Note: The UX of this project was explored after a design direction had been determined. Thus, all UX designs have the final "skin".

"Site" map & flow

To provide a layer in between the table of contents and the main content – and as a way to group all of the designer's sections together, I decided to have a "landing page" for each designer. From this landing page, the user could navigate to any of the designer's sub-sections.

UX Flow.png

The final section of every designer highlighted some of the designer's most famous designs. The content modal was added as a way to view additional info on these designs.

 

Scroll Directions

The main reading screens utilize a horizontal scrolling layout, allowing two-column text layouts to never get cut off by user scrolling.

 When scrolling vertically, 2 column text could potentially get cut off.

When scrolling vertically, 2 column text could potentially get cut off.

 Scrolling horizontally seemed to avoid the confusion of text potentially getting cut off.

Scrolling horizontally seemed to avoid the confusion of text potentially getting cut off.

After exploring various layouts, I arrived at two concepts – vertical scrolling and horizontal scrolling. When using two column text content with a vertical scrolling layout, there was potential for the text body to get cut off, potentially causing confusion.

The final design ensures that text never gets cut off vertically, as the height of the screen will always be the same.

 

Navigation

Primary Navigation

The navigation (when collapsed) consists of a hamburger icon (global navigation), the designer's name (for context), and the subsection of the designer.

When expanded, the user can view all subsections of the current designer and access the reader settings.

image.png
image.png

Given the site map, the navigational needs were:

  • Between designers (Ive, Newson, Esslinger)
  • Between sections (Childhood, education, etc.)
  • To and from the Table of Contents
  • Accessing reader settings (Dark mode)

Thus, the navigation needed to be able to provide robust navigation functionality. However, the main purpose of the app was a publication – not a navigator. So the content needed to remain the focus. 

The designer subsection also provides context, but additionally allow a way to navigate to other subsections within that designer as well as access the reader settings (dark mode).

 

Rich Media Content

To create a experience that goes past reading, additional media are found throughout the main text content such as videos and 3D models.

 3D models of the designer's designs

3D models of the designer's designs

 Reference image for 3D rotating media

Reference image for 3D rotating media

 Video thumbnail in text content

Video thumbnail in text content

 Video Modal

Video Modal

 

UI Design

Initial directions

Since the purpose of the book was to talk about designers and highlight some of their most famous designs, the last thing I wanted to do was create an interface that competed with the content. Because of this, both initial directions were intended to be very open and spacious.

 

Concept 1: Dark

The first concept was a dark interface that featured large text hierarchy and abstract lines. The abstract lines were a way to break up the grid-like structure of the photo and text content. 

The lines wouldn't be completely abstract as they would imitate the shapes of the designer's designs. The colors of these lines would also imitate the colors of the content.

San Fransisco was chosen as the typeface because of its simplicity and versatility. It also seemed appropriate being an publication about designers from Apple Computers.

Lines - Text.png
Lines - Home.png
Lines - TOC.png

Concept 2: Light

The second concept had a focus on imagery and utilized overlapping text and images as a way to break the grid.

Setting the headings in a Bodoni-style typeface was a stylistic choice. I felt the elegance and detail contrasted the clean lines of the images and text of the text and interface.

Serif - Text.png
Screen Shot 2018-01-08 at 3.34.38 PM.png

Final style

The final style was largely a result of taking the concepts of the 2nd concept and adding the abstract lines from the first. It's simple and image/content focused.

As part of communicating the final design, we were required to make site map posters highlighting the functionality of the interface.

 

Prototype

A prototype was created to help communicate the interactivity of the design. The design largely relied on horizontal scrolling – which Invision does not support. Because of this, every screen that was originally intended to be horizontally scrolled had to be broken up into at least 3 parts.

 

 

Outcomes

Was the project successful?

By being minimalistic, the interface is very content-focused, which serves well to accomplish the goal of creating a publication that communicates the work of the designers. Also, by utilizing touch screen functionality – in horizontal scrolling and features like 3D rotating media – and taking advantage of the screen size, the design is iPad-focused. By these measures, I'd consider it successful.

 

Improvements

1. User testing

While the timeline didn't allow for user testing, some decisions and assumptions could have been better validated by testing with users or creating a prototype.

2. Scroll direction decision

The UX decision of the scroll direction was largely a result of wanting to retain publication-like text formatting (2-column text). If I hadn't chosen this text formatting, the scroll decision might not have been as big of a deal.

 

Lessons Learned

There are many details that can influence how a user should experience an app. If a design could go in a number of different directions, constraints provided by user testing and/or user research can help direct the design.

To properly communicate and test the horizontal scrolling, a different prototyping tool would have needed to be chosen.

 

 

My role

This project was individually completed, so I acted as the sole UI/UX designer. This included: 

  • Content planning, structure, and writing
  • UX Design
  • UI Design
  • Prototyping
 

 

Gallery

 

 

Questions?

Want to know more about Imported Apples?
Have a similar project?