Phase 3: Low Fidelity Designs

This document is written for the Midterm Project in H541: Interaction Design Practice — Instructed by Sonali Shah, at IUPUI in Indianapolis, IN.

Other parts of this project:

Image for post
Image for post
Paper prototypes in progress + some branding concepts

In this document, I outline the screens included in the app. This includes an initial version of low-fidelity prototypes in 3.1: Initial Sketches, a series of questions, feedback and findings in 3.2: Feedback on Initial Sketches and an iterated version of the prototypes based on those findings in 3.2: Revised Sketches.

For the purposes of this project, I selectively focused on a subset of screens for the mobile app, as opposed to including every possible screen. This approach permitted an appropriate level of detail in representing various functionalities of the product. The mobile app screens I have prototyped in this document effectively demonstrate how the gathered requirements from Phase 2 have influencing the design.

For a project with a full-scale timeline (i.e. many months, rather than a few weeks), I would include greater detail for certain sub-screens in the mobile app (such as Team Details, Profile/Settings, and File Details), not to mention creating prototypes for the desktop app.

3.1: Initial Sketches

To begin, I created a list of screens that I knew needed to be included in the app, based on the core functionality and my knowledge of requirements from Phase 2. After listing these out, I organized them into the following primary and secondary views (more details about each one under their sketches):

  • A: Teams Overview
    A.1: Team View
    A.1.a: Team Details
  • B: Files
    B.1: Document Editor
  • C: Chat
  • D: Notifications
    D.1: Profile
    D.2: Settings
  • E: Conversation
    E.1: Conversation Details

I wanted to visually describe the relationship between each screen, so I created the following map:

Image for post
Image for post
Initial version of the screen flow for the mobile app

By viewing this diagram, I was able to see which main screens are “top-level” or most essential (A–D). They would need to be accessed from nearly any screen within the app. Therefore, I decided to include these screens in the main tab bar at the bottom of the user interface. Screen “E” (Conversation view) can be navigated to via several methods (i.e. the Team screen from the Files screen), but does not have a dedicated button to access as it changes based on the specific conversation being opened.

Image for post
Image for post
Screens A: Teams Overview and A.1: Team View

Screen A: Teams Overview is the top-level view of all teams that a user belongs to. They are able to perform certain actions, such as modifying teams (including adding new ones) and use various methods for sorting their teams. The default method for sorting teams (what is displayed when the screen is loaded) is to group by “Local” (i.e. in-organization) and “External” (i.e. part of another organization).

On Screen A, the tab bar navigation is shown, which is almost always visible and allows for rapid movement between screens A, B, C and D. This is essential as they contain the key functionality of the app.

Screen A.1: Team View shows the “bread and butter” for data organization in the app. Teams are the fundamental way of grouping conversations, live documents and folders. At the top of this screen, the top-left button will navigate back to the Teams Overview. This is also possible by swiping from the left edge of the screen. The edit button allows for addition or removal of files and the info button allows for configuration of group settings.

The search bar allows users to search for group conversations, documents or folders that belong to this group. Under the Conversation list view, users will see only conversations they belong to and that are part of this team. Under files, users will see files associated with the team that they have permission to access. This includes files that have been shared with the entire group.

In fulfilling a specific requirement from Phase 2, the icons for the team conversation and documents display in the top-right corner whether they contain external users (i.e. users that are not part of the same organization as the current user). This is essential to collaborating with many people that may not belong to the user’s own organization.

Image for post
Image for post
Screens B: Files and B.1: Document Editor

Screen B: Files is an overview of the user’s files. They are able to directly search for a file by name using natural language (e.g. “Reports from December”). The “Quick Access” list view allows users to directly access recently-used files without navigating to them.

The “Folders” list view shows the top-level folders and files that belong to the user. In order to fulfill the requirement for a single unified file storage system, any files or folders that are associated with a team can be symbolically linked in some location of the user’s folder hierarchy.

Returning to the top right, the edit button allows users to create a new live document. This would bring up Screen B.1: Document Editor. This screen can also be accessed when opening a file (e.g. from the Team View or by navigating to an existing document in B: Files).

Screen B.1: Document Editor allow users to write, format and comment on live documents. They can see who else is currently editing by the icons at the top middle. They are able to modify document settings using the info icon at the top right. The floating bubble allows for conversations about the entire document. By highlighting text, users can create comments about specific parts of the document. The keyboard attachment allows for all possible types of document formatting, from heading level to list type.

Image for post
Image for post
Screen C: Chat

Screen C: Chat is distinguished from the conversations in the Team View in that they are direct conversations, or less-commonly, a group conversation that is not associated with any team. Users are able to create new conversations with the icon at the top-right. They can find existing ones by using the search bar below the title.

Tapping on an individual conversation brings users to the E: Conversation Screen (just as tapping a conversation in Team View does).

Image for post
Image for post
Screen D: Notifications

Screen D: Notifications contains a historical list of all notifications received by the user, descending from young to old. They are grouped by meaningful chunks of time, such as yesterday, last Tuesday, last week, last month and earlier. This demonstrates a few types of notifications as determined by the requirements, including mention by name and role, as well as a certain person seeing the user’s message.

Image for post
Image for post
Screen E: Conversation and E.1: Conversation Details

Finally, Screen E: Conversation shows the view within a single conversation. This is representative of conversations with a single other user and with a group. With the button at top-left, users can navigate back to the previous screen (either Team View or Chat). This is also possible by swiping from the left edge. The top center displays either be the name of the single other person in the chat, or the name assigned to the group conversation if there is one. The search bar allows users to find text within specific historical messages.

Each message from a new person includes the name of the user as well as their profile photo. If they add another message uninterrupted by another users’ message and within a certain time frame (e.g. 15 minutes), it will add to what they said without adding in their name and photo again.

Each message is accompanied by a timestamp. This time is precise for messaged on the same day (e.g. 11:05AM) and descriptive for messages one day or older (e.g. yesterday, last week, etc.). By pressing and holding over a message, users can add reactions or get additional message details, such as the exact time it was sent. By pressing and holding a message they have just sent, they can choose to get a notification when it has been seen by anyone, or by a specific other user.

Objects that are shared in the conversation have a rich preview. For example, external links to the internet will display a title and preview image. Live docs will show an icon or image (if included in the doc) along with the title and preview of recent changes. Other files will display an icon, name and date or time last modified. Pressing and holding on attached files allows users to pin them to the conversation (or to the team).

Returning to the top right, the info button brings up the E.1: Conversation Details. From here, users can modify details about the conversation, including changing the name of the group.

The call button at the top left starts a team call with everyone in the group (or with the other person in the case of a chat with two people). A message pops up in the conversation view letting everyone know a call is in progress. Tapping this allows users to join the call.

3.2: Feedback on Initial Sketches

I started this exercise expecting that I would be able to ask my reviewer a set of questions per screen. So I designed questions to gather as much information as possible. I generally laid out the format to ask a few key questions for each screen:

  • What do you think about this screen (initial thoughts)?
  • What actions do you think you can perform from here?
  • How do you think you would go about creating a new team?

However, my reviewer (my wonderful wife), was full of endless ideas. Instead of a series of questions, it turned into an active conversation. She made comments, tried to perform actions, asked questions, and provided recommendations for how to improve. I organized these comments by screen below. Comments in parentheses within the responses indicate my reactions to her questions.

Screen A: Teams

What do you think about this screen (initial thoughts)?

I don’t understand – what’s the difference between local and external teams? It would be better to have this sorted by recently open. That would be more useful and easier to find what team I’m looking for.

I also want to be able to search for a team by name. Oh, never mind, I see the search bar. That makes sense, like in my messages app. But I want to be able to make a new team from here.

What actions do you think you can perform from here?

I can open up a team to see that conversation. Or I can go to one of the other places like “Files,” “Chat,” and “Notifications.” I guess I can search for a team too.

How do you think you would go about creating a new team?

Maybe by going to “Chat”?

(How about from within this screen?)

I don’t know how I would create a new one from here. Not clear right now.

Takeaways from the conversation about Screen A:

  • The default list view for all teams should be sorted alphabetically by default, with option to toggle this (via the dropdown button next to the title “All Teams”). Provide additional options for sorting (will represent this interaction in the paper prototypes via comments).
  • Hide the search bar by default from most screens. Make it available when scrolling up beyond the top. Nestle the screen title “All Teams” into the top bar, centered upon scroll (will represent this interaction in the paper prototypes via comments).
  • Remove current sort and edit buttons in the top right; replace them with a “+” button to indicate creating a new team.

Screen A.1: Team View

What do you think about this screen (initial thoughts)?

I’m surprised I don’t go directly into a conversation when I click on a team. I thought that’s what the teams were. Okay, so it’s easy to find files for this particular team, that makes sense to me.

I want to have a “separate” area for my conversations that aren’t with everyone, just certain people. And why is there a file and also a folder under the same section?

How would I make a new group conversation then?

(You can make a new one using the edit button).

It makes more sense if you can add new conversations, or new files I guess.

What actions do you think you can perform from here?

I can see whole stream of conversation for a team or for different groups that are a part of the same team, but don’t include everyone.

Takeaways from the conversation about Screen A.1:

  • Create a distinction between team folders and pinned files by using the list view category titles. They represent different things, so they should be grouped and labelled accordingly.
  • Create a distinguishing visual for the full-team conversation and group the sub-team conversations separately.
  • Turn the “Edit” button into a “+” button, which allows users to create a new conversation or add files to the group. Group configuration can be modified using the info icon, in Group Details.

Screen B: Files

What do you think about this screen (initial thoughts)?

So this is all the folders for all my groups. Yeah that makes sense, so you can find things that you were working on recently.

Can I look at my files and folders but for each team?

So it’s like it has it’s own Google Drive in here? Okay, that makes more sense now.

How do you think you would go about editing a document?

I can just press this writing button (points to the one at the top right).

(How about editing an existing document?)

You mean like, pressing on the file you want to edit, I guess?

(Yeah, exactly.)

Takeaways from the conversation about Screen B:

  • Provide dropdown next to title for “Files,” which allows for users to group files by team. This would use the title groupings for the list view to group files by team (both folders and pinned files).
  • Change the label for “Folders” to “All my files,” in order to represent the hierarchical file structure that can be accessed from here.

Screen B.1: Document Editor

What do you think about this screen (initial thoughts)?

Okay, this is a bit overwhelming. I’m stressed out by the idea of writing a whole paper with my tiny phone keyboard. Looking at editing a full document on here gives me a headache

But it would be useful to have conversations from here for sure

I want to see what’s different from the last time I edited

I can see that I can change formatting

What do the circles at the top do?

How do you think you would go about making a comment for the whole document (not just a specific part)?

I have no idea. Well, what’s this bubble?

Takeaways from the conversation about Screen B.1:

  • The keyboard should be hidden by default. When users open the document, they will be in “view” mode, where they can read and make comments. By hitting “Edit” at the top right, they can actually make edits to the document. The “Edit” button will turn into a “Done” button, which they can press to re-enter “view” mode when they are finished.
  • Add “viewing” next to the profile images to indicate who is currently accessing the document, in order to clarify what this represents.
  • The document editor needs to become its own top-level screen. Instead of B.1, it should be F. It’s not truly a sub-screen of B. Rather, it’s like E; it would not make sense to make it immediately available because it depends on an object. But it does function as its own separate entity with the app, accessible from multiple places (i.e. Team View and Files)

Screen C: Chat

What do you think about this screen (initial thoughts)?

Why are these separate from my teams? This seems kind of redundant.

(These are conversations with anyone outside of a teams.)

Oh okay, like direct messages. But it why would you have a group that’s not part of a team?

How do you think you would go about creating a new conversation with someone?

The writing button at the top right.

Takeaways from the conversation about Screen C:

  • All group conversations should belong to a team. Therefore, when creating a new conversation from chat, if a user toggles to select more than one, it should ask them to create a new team or add to an existing team.
  • Instead of separate section at the top for starred conversations, include a toggle button to show only starred conversations. This way, there’s more consistency in where to find existing conversations.

Screen D: Notifications

What do you think about this screen (initial thoughts)?

I want to be able to see whether or not I’ve opened a notification.

I want to be able to group by team so I can check in with what’s going on for one team at a time and not be overwhelmed by everything at once.

I’d love to be able to mark all my notifications as “read” at once.

When we were having a general conversation and not looking at any specific screen, I asked her, “how do you think you would go about changing your settings (or updating your profile information)?”

I mention this here because in the initial prototype the settings and profile can be accessed from the top left and right of the notifications screen.

I honestly have no idea.

(You can try clicking around to figure it out!)

(She tried clicking around in Team Overview and then after a while she looked in Files, but to no avail).

Seriously, I have no idea. It should be on this page where you can see all your teams. That’s a much broader place and that’s where I thought it would be. You can have it slide over and give you a list of different things like with the Facebook app I think.

Takeaways from the conversation about Screen D:

  • Move settings and profile to the Team Overview screen.
  • Include buttons to mark all as read and filter by unread.
  • Provide a dropdown next to the title “Notifications” which allows for grouping notifications by team.

Screen E: Conversation View

What do you think about this screen (initial thoughts)?

I like seeing the time stamp

One feature I really love about GroupMe (or is it Facebook?) is that you can see how many people or who has seen it. Like, do people hate what I just said or have they just not seen it yet? Could be the number of people who have seen it out of the total number people in the group.

What do you think happens when you click the “+” or the “@”?

Well the “@” button lets you tag somebody. But I don’t know if it’s really necessary as it’s own button. I can just type that in. The “+” lets you send stuff like files.

How do you think you would go about liking a message?

I have no idea! I don’t think that’s currently a feature. No really Austin, I don’t think you made that a feature yet.

(If you press and hold a message, you have the option to leave a response, along with other actions).

I would never find that if nobody told me. Also, what if you have a link? You might accidentally open the link. Also I think that if you really need to accurately gauge the group’s response, you should use a poll, not multiple different kinds of reactions.

(Don’t you think those could be fun?)

This is for getting stuff done, not having fun. Plus I think on Facebook having the reactions creates too much turmoil. It allows for passive-aggressive disagreement.

How would you go about changing the setup for this conversation?

This info button? (Points to button at the top right.)

Takeaways from the conversation about Screen E:

  • Include a “seen by [name], [name]” at the bottom of the messages, above the new message field. This also fulfills part of the requirement for seen by notifications as described in Phase 2.
  • Provide a button for each message to add a reaction and pick an emoji. (I have to disagree with my wife’s concept about this being all serious. Work is better when you can have fun with your teammates!).

Screen E.1: Conversation Details

What do you think about this screen (initial thoughts)?

You can see everyone on the team and when they were last online. That’s nice. You can get to the “pinned files” for this one specific team.

How can I add more members to this team? Do I hit this edit button?

This edit button should let me change the name of the team, add or remove people, and pin files, and more team-related actions.

Takeaways from the conversation about Screen E.1:

  • Allow for the edit button to edit more than just the team name. It should also be able to add and remove users and pinned files.

Wrap-up

Any other thoughts?

It’s almost there, but it needs some re-adjustment to make how the files and teams are organized.

Overall takeaways:

Clarity is key, especially when it comes to files. Many of the takeaways listed above answer questions like, “why is this file here?” and “where does this file really live?” Answering these questions with the user interface is essential to promoting ease of use and adoptability.

3.3: Revised Sketches

Based on my takeaways from the version 1 feedback, I updated the screen relationships. Here are my new screens, including the change from B.1: Document Editor → F. The screens listed as N/R are not represented in the scope of these prototypes:

  • A: Teams Overview
    A.1: Team View
    A.1.a: Team Details (N/R)
  • B: Files
    B.1: File Detail View
  • C: Chat
    C.1: New Chat Dialogue (N/R)
  • D: Notifications
    D.1: Profile (N/R)
    D.2: Settings (N/R)
  • E: Conversation
    E.1: Conversation Details
  • F: Document Editor

I updated my visual map accordingly:

Image for post
Image for post
Revised screen flow for the mobile app – so many lines and colors!

And the updated sketches are below:

Image for post
Image for post
Updated screens A: Teams Overview and A.1: Team View

A: Team Overview [Updates]

All teams are now sorted alphabetically by default. This can be toggled with the dropdown button underneath the subtitle of “Alphabetic”. There are additional options of sorting such as “Most recent” and “Internal/external.”

The search bar is hidden by default from all screens. Comments in the prototypes indicate that the search bar will appear when scrolling up and already at the top. Additionally, the screen title (“All Teams” in this case), moves into the top bar and is centered when the user scrolls down.

The buttons at the top-right have been replaced by a “+” button, which allows users to create a new team.

A.1: Team View [Updates]

There is now a greater visual distinction between team folders and pinned files, using different groupings.

Additionally, the full team conversation is listed at the top without an extra label, as it is likely the most commonly-accessed team object.

The “Edit” has been replaced by a “+” that allows users to create a new conversation or add files to the group.

Image for post
Image for post
Updated screen B: Files

B: Files [Updates]

A new subtitle and dropdown has been added which indicates the current method of organization used. It also allows users to switch between “Overview” and “Grouped by team.”

The label “Folders” has been changed to “All my files,” to better describe the nature of the hierarchical file structure it displays.

Image for post
Image for post
Updated screen C: Chat

C: Chat [Updates]

Group conversations have been removed from the Chat screen. Instead, when creating a new conversation (either from Chat or from Team View), if the user chooses to add more than one person, they must also choose an existing team to add it to, or create a new team for that group conversation.

Also, rather than sorting the chats by “Starred” and “All,” there is now a toggle at the top left which will filter to display only unread conversations.

Image for post
Image for post
Updated screen D: Notifications

D: Notifications [Updates]

The settings and profile buttons have been removed here and placed in the Team Overview screen.

A new button has been added to the top right to mark all notifications as ready. Additionally, a toggle has been added to the top left, which will filter to display only unread conversations.

A dropdown has been added underneath the screen title, which allows sorting notifications by by date or by team.

Image for post
Image for post
Updated screen E: Conversation and E.1: Conversation Details

E: Conversation [Updates]

After the most recent message, there is a text, icon and profile image indicator which shows which users in the conversation have read that latest message.

Additionally, there is a dedicated button on each message to add a reaction, which can be any emoji character.

E.1: Conversation Details [Updates]

The edit button allows users to change the group name and add or remove users or pinned files.

Image for post
Image for post
Updated screen F: Document Editor

F: Document Editor [Updates]

This screen has been upgraded to a top-level navigation screen. It can be accessed from file views, conversation views that tag files, and team views.

The keyboard is now hidden by default. This allows users to start with viewing mode when opening, and hit “Edit” to enter editing mode. This is a practical solution to the fact that users will not likely be writing many documents from their phones. They will more likely be reading, adding or replaying to comments, or making small edits.

3.4: Summary

I have never had the opportunity to conceptualize and design a mobile app. What made me truly value the low-fidelity prototyping process was how many hours this all took, even though I was saving significant time compared to high-fidelity prototyping. They are incredibly beneficial for “throwing things at the wall” so to speak. It allows for an understanding of where problems will arise before getting too invested in a design.

What lacked with the low-fidelity prototypes however, was detail that often times disallowed my reviewer to understand what was going on. Many of the problems with not quite visualizing where things were located or how they were organized would be resolved by the visual design (i.e. colors, crisp icons and strong typography). Therefore, I cannot wait to get started with Phase 4: Dynamic Interactive Prototyping, moving forward with the structure defined in my second iteration of sketches.

Written by

Product Designer @ Salesforce. I dabble in email and front-end development. 👨🏻‍💻

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store