5. WIREFRAMING
This is the part of the process where the defined features and app sections begin to take the form of an app. For the remainder of this case study, I will narrow in the development to four sections: the home "feed", map, posting portal, and viewing portal.
5.1. SKETCHING
I began with sketching concepts to explore UX patterns.
5.2. PAPER PROTOTYPE
Perhaps the most delightful experience in research for this case study was testing paper prototypes. I hadn't expected the sound effects people would make as they interacted with the prototype. There was a lot of "beeps" and "boops". There was also a lot of laughing when the user was surprised for the paper prototype to do something they expect from a digital interface play out in an analog way.
Paper Prototyping Narrative
In this Covid-19 reality, I was able to test the prototypes with two friends (Peter and Kara) who are in our social-distancing "pod" (I know, these are weird times). I gave them each the task to "Post the Godzilla from your library."
They tested two design concepts: Concept 1 using a list format, a navigation bar, and buttons placed at the bottom, and Concept 2 using a carousel pattern as well as floating action buttons.
It was cool to see how much they treated the paper as they would the digital screen. When my testers tried to resize the Godzilla, they made a motion with their fingers as if to stretch something on a touch screen. I enjoyed the surprise they expressed when "the computer" replaced the littlest Godzilla with a bigger one.
The paper prototyping felt playful and fun! It was easy to laugh, and my testers found humor and delight in completing the task to "Post the Godzilla from your library."
The general census was that the navigation at the bottom was preferred over the floating action buttons, and the list format was preferred over the carousel format. Some heuretic details that came up were "undo", and "back" buttons in the posting portal as well as a confirmation after the post is created. These considerations will inform the wireframe development and future testing.
Concept 1: List and Navigation at the Bottom
Concept 2: Carousel and Floating Action Button
5.3. WIREFRAMES
To provide a product that allows users to connect via AR posts, I defined an iterated how the features would be accessed on the pages of the app. With some feedback from my user tests I developed wireframes.
Developing the Wireframes
Building my wireframes was insightful. I felt like I had learned a lot while doing the paper prototypes, yet while translating them into wireframes, I was able to catch a few things that had not played out in my paper prototype tests.
Below are the wireframes with annotations included to detail the features and functions of each page.
Viewing Portal
This is the tool that allows the user to view AR posted by people in their network. Physically, the user would be in the location of the post. They would hold their phone up and look through their screen to see the environment around them until they locate the AR post.
A tool bar at the bottom allows the user to interact with the person who posted by giving them the ability to react, add a comment, bookmark, or download the AR file to their own library.
-
Camera-view is showing the user the environment and showing the post in the environment. Arrows may provide help in locating the post.
Map
The map opens to the users current location and shows posts in the area. A search bar is also included at the top to give the user control over accessing information.
-
The user's location is represented by a distinct icon to help orient them to the rest of the map.
-
Each post will be represented by an icon that can be clicked to reveal more information about the specific post.
The navigation remains at the bottom providing the user access to home, messaging, and the posting portal.
Map, Overlaid by Selected Post Information
When post icon is selected more information is provided to the user that would pop up as an overlay on the map.
-
Inform the user who created the post: include profile information of the creator.
-
The Post information includes the Title, Distance, more specifics about Location, and a Description of the post
-
Each post can be bookmarked so the user can find it again later.
-
The user is given access to direction in order to find the post
-
The map is still visible and the icon changes in size or color to show that it is selected.
Access Maps
At this time, this design uses external map applications to receive directions for the post.
-
The user is prompted to select an app by which they would like to receive directions to find the post.
You've Arrived
Once the user has arrived to the location of the post, the app will notifiy them and prompt them to open their camera /viewer portal, in order to see the post.
-
Information is provided to the viewer to inform them of where they have arrived to. The user can select "Open Viewer" to see Simone_Biles's AR post of her "Double-Double".
Viewing Portal
This is the tool that allows the user to view AR posted by people in their network. Physically, the user would be in the location of the post. They would hold their phone up and look through their screen to see the environment around them until they locate the AR post.
-
Camera-view is showing the user the environment and showing the post in the environment. Arrows may provide help in locating the post.
- A tool bar at the bottom allows the user to interact with the person who posted by giving them the ability to react, add a comment, bookmark, or download the AR file to their own library.
-
Exit Icon
Home Feed
Gives user access to recent posts created within their network. This page provides navigation to other parts of the app, It's the main function is to inform the user about posts.
-
Access to profile, network, AR library, and settings.
-
Search and filtering tools to give the user control of what posts the see and gives the power to find what they are looking for
-
Each post is shown as a button. This initial view provides information such as the Title, who posted it, how far it is from the user, how many downloads the post has, and how many views it has. Each post can be bookmarked.
-
Posts have a different appearance if they are created specifically for the user.
-
The navigation at the bottom gives the user access to other areas of the app including posting, the map, messages, and home.
Posting Portal
This is where posts are created. The user has access to tools to create an AR experience to share with their network.
-
Camera view: the app will use the phone's built in camera to show the user the environment on the screen.
-
The posting portal has tools: Library, Links, Drawing, and Typing. These tools will help the user create or upload AR to create a post.
-
Posting is disabled until the user has produced AR in the portal.
AR Library
The user can access the library from the posting portal. Here they can select uploaded or previously created content and add it to their post.
-
Camera-view is still visible to the user so they can see they are still in the portal
-
This is a limited view of the library that overlays over the portal. Here the user can view recent uploads to their library.
-
The user can select which AR file they would like to post.
Posting Portal, AR in Place
-
Camera-view is showing the user the environment and placing their content in the environment. Here the user can resize and position their graphics in 3D space
-
The ability to delete content is included when the content is placed on the screen
-
Now, Posting is enabled. The user can move on to post.
Posting Form, Empty
Posts are identified by data such as who posted it, the title, and description. The user can control who the post is visible to: everyone, a group, or a direct post. Behind the form, the user can still see their post to provide visibility to where they are in the process.
-
The form requires the user to provide a Title and viewer settings. It does not require a description but gives the user the opportunity to create a comment with their post, add tags, or links.
-
Posting is disabled until the user completes the required parts of the form
Keyboard Overlay
The tool is given so users can create a description, comments, and fill forms. It increases the user's ability to communicate.
-
This keyboard will overlay when the user fills a form or provides any written information. t.
Posting Form, Filled
The user is able to see the information they have provided before submitting their post.
-
The information the user gave is visible to the user.
-
The posting button changes appearance to show that it is now active and the user can complete their post.
Posting Status
Provides the user visibility to the status of their post. Also allows user to undo their action.
-
A status bar and the wor "Posting" provide visibility to the user about their post being completed."
-
The ability to undo is given to the user by including a "Cancel" button.
Posting Complete
Informs user the post has been created.
-
The word "complete" and a checkmark communicates to the user that the status of their post is now "complete. "
Home Feed With User's Post
This is the posting portal where the user begins to create
-
The home feed now shows the user's post at the top of the list. The post appears slightly different at first to increase it's visibility. to the user.
Home Feed, User's Post is Selected
The post is enlarged to show more details and data about the post. Here the user is able to choose to make edits.
-
A button included that gives the user the ability to make edits to their post
-
The user can see data about comments on their post.
-
The user can select to receive directions to the post.
Home Feed, Selected Post
By selecting a post, the user receives more detailed information about the post.
-
Information is provided to the user about the post including the post's title, distance, and description (including tags and links). Data is provided such as number of views, number of downloads, number of comments, and how much time is remaining on the post. An abbreviated profile is given of the person who created the post. The user is given options specific to this post such as Bookmark, or Directions
-
A notification is visible on the map icon in the bottom navigation. The map notifies the user if there is a post in their immediate area.
Map Notification
-
The map is visible to the user
-
Icons communicate where the user is, and that there are items of interest in the area.
-
A notification is open to inform the user about a post. This gives the user information about the post such as the title, distance, views, downloads, and creator of the post. Features are included on this notification: exit, and edit.
Map Notification Expanded
The Notification can expand to reveal more information about the post to the user.
-
The overlay is identical to the "Home Feed, Selected Post" with the only difference being the "Open Viewer" button is available if the user is at the location of the post. If the user is not at the location of the post the button is replaced with the "Directions" button.
Heuristics Analysis
I redesigned these wireframes multiple times. After working through one of my first iterations, I reevaluated the design with heuristics in mind. I considered the 10 Usability Heuristics for User Interface Design developed by Jakob Nielsen. After analyzing my designs for heuristics, these are some features I added to the design.
-
"Posting Status" and "Posting Complete" are pages that provide visibility of the system status to the user.
-
To complete a post, the user has to click "Post" or a related button 3 times to ensure error prevention: the user posting without meaning to.
-
Back buttons and a cancel button are added to provide more user control and freedom.