Smart Email — Pile App Design
The modern life can be hectic, digital files speed up work and personal communications. However, it also may get ignored more given a large amount of emails/digital files we receive every day. We asked four users and surveyed inside of the team, and found that an individual can get from 10 to up to 50 daily emails. These emails leave large amounts of information for users to process.
Some of these digital articles would just get put away without being looked at. We found that the more users accumulate, the harder to go back into the folder to clean up. This is like forming an old pile of the document on the desk but never get to deal with them since digital piles don’t visually call for users’ attention.
Users can also have multiple sources of their important files. Professional or personal files can be located in local folders, email accounts, and even published websites. Dealing with multiple
windows and software all the time can be time-consuming.
Hence, we summarize the above observations to our design challenge:
How can we help people process their digital documents/subscriptions more effectively?
Project Roles
Project Manager
UX + UI Design Lead
Tools Used
Axure RP 8+9, Adobe XD + CC
G-Suite, MS Office
Slack, Airtable
Panopto (digital presentation and voice-over)
Process Overview
Concept Sign-off → Style Guide + Scoping → Mental Modeling → Design, Testing, and Iterating
1. Concept
Given the typical use cases- in office/on the go, we conceived the application to be a native app running on both desktop (PC and Mac) and mobile (Android and IOS). The app is named after an old-school desk document pile.
The main feature would be allowing users to group their digital newsletters/files into virtual piles so they can process them faster.
Design Goals
Help users gain more control over their digital reading, save time, and speed up day-to-day information processing.
Audience
Anyone who deals with the large amounts of emails at work, or people who subscribe to and would love to read digital newsletters (e.g. my team and I, lol).
Competitive Analysis
Competitive analysis is important to UX design since we get to investigate features that have been working in the market and identify market gaps that our app, PILE, can fill.
To thoroughly understand existing solutions, I conducted competitive analysis among six apps, both web-based and native. Five out of all six apps were more focused on email organization rather than help users process the email faster.
Key Pros:
✔️ AI-powered smart filtering;
✔️ Smart grouping and filtering;
✔️ Facilitation on faster reading:
✔️ Easy links to sites and accounts.
Still Lacking:
⚠️ Focus on the newsletter/digital reading management;
⚠️ Humanized support on fast document reading.
If you are interested, here are some more details about the two apps that we analyzed:
👉 SaneBox: an all-platform application that filters users linked email accounts by
importance. The filtering is entirely automated with a bot, once the filtering is done, users can manually go through and change the importance level of each email. This app charges users $7 to $36 per month for the service. However, this does not solve our problem, since users would still go into each email in order to read their subscriptions. There’s also no other filtering users can do other than importance level.
👉 Feedly: a native app on IOS and Android with a website for desktop access. The app lets users browse popular blogs by system-curated topics, or manually link to a website. However, this app does not allow user integration with their emails.
2. Style Guide + Scoping
The concept got sign-off quickly (i.e. class presentation went well). Then we moved onto setting style guides and MVP scope.
The style guide helped keep the design consistent, given we usually had different designers working on different parts of the app. Similar to setting up a design system, the style guide as a living document in our Google Drive; as we proceed infidelity, logo, fonts, and colors were updated.
Scoping helped us to clarify what features would be necessary for MVP. Proper scope helped us stay on deadlines with quality deliverables.
3. Mental Modeling + Personas
Given limited project time, we decided to build the MVP based on a “guerilla research” (casual interviews among convenient sample), combined insights with mental modeling, which yielded two personas for us.
Mobile Anne | Busy Grad Student:
👉 Goal: Accessing Blog Subscriptions Remotely and Efficiently
👉 Key Task: Reading digital newsletters quickly in one central place on her mobile devices
👉 Stress Case: Need to quickly grasp the key points in an article.
Desktop Benny | Experienced CPA:
👉 Goal: Organizing client emails efficiently
👉 Key Task: quickly retrieve historical client conversations/documents for meetings or audits.
👉 Stress Case: Recalling year-old conversations from multiple emails, local file folders, and online drives/sites before reconnecting with clients.
4. Design, Testing + Iterations
Based on the personas and identified key tasks, we draft low-fi sketches following proper user flows. The process was robust, and consolidation of the sketches from all designers also improved our understanding of how certain features would work in detail.
Then we started cycles of rapid testing and iterations, moving from low-fi to high-fi. Our process was iterative, all designs were backed up with user testing feedback.
a. Low-fi Sketches
Each member individually collected inspirations to create the low-fi sketches. Collectively, we created two sketches for mobile and two for desktop.
b. Walkthrough + Mid-fi Prototype
We evaluated low-fi sketches with cognitive walkthroughs, then synthesized key useful features to the mid-fi digital wireframe. The mid-fi prototype was presented to stakeholders (i.e. the prof. and entire class) in the format of a narrated presentation with static screens.
Here are the high-level screenshots, if you are interested in seeing the detail, feel free to click on either image below to go to our shared folder.
c. Mid-fi Testing + Iterations
After buy-ins from the stakeholder, we moved on to make the mid-fi wires interactive. This way, we can conduct usability testing with end-users.
We started with scripted formal testing with four users. The script included both pre- and post-task questions. All users were tracked on success rate, numbers of errors, and completion time on each task by a backlog.
Then we supplemented with four more “guerrilla testing”, where I went to the class and tested the same tasks on four random users who fit into our personas.
Among all testings, we found that:
⚠️ first-time users had trouble understanding the features, which made their navigation time longer;
⚠️ for the desktop version, we lacked a feedback screen after users hit “create” button; some users were confused if their task was completed or not (relevant to NN/G heuristic #1: show system status);
⚠️ when prompts to read new articles, users were looking for notification icons, which we did not have.
To test Desktop Benny’s stress case, where he needs to pull off multiple files from the PILE app, we asked users to click on a “minimize” button to allow emergency escape from all open notes. However, during testing, one user made us realized that the minimize button may be redundant to the system window icons, so we replaced the feature with a post-it feature. This post-it feature allowed users to turn different piles of documents in the app into sticky note windows while the main app interface stayed open. In later testing, this feature turned out to be much more welcomed than the initial “minimize” feature.
For my nerdy friends, here is the entire testing report to read our protocol and tasks. 😉
d. High-fi Prototypes
To implement changes based on our testing results. We went back to the sketchpads again to create fast solutions with pen and paper.
Then we conducted an internal expert evaluation to filter out the best solutions and consolidated them into the final iterations.
This high-fi prototype was appreciated by most of the class. The design edits seemed to solve the key pain points from user testing.
End Notes
Overall, I learned several things:
👉 1) Team communication is very important, esp. when multiple designers are working on different versions of the app. Before any time wasted, talk to each other to keep us on track;
👉 2) Early art direction and style guide/design system applications are important to your UI. Your new product’s design details may still change, just update along the way. This will eventually make the workflow and future launches much easier.
👉 3) Never underestimate user-testing. They are necessary since no matter how many expert evaluations UXer conduct, jumping out of your design is inherently hard. Test with real end-users, they’ll surprise you sometimes, but ultimately, your product will be way better.
Same as many other projects, PILE also has its own limitations:
👉 1) We tested the mid-fi but not high-fi. Iterations still need user confirmation so we could confidently say “we solved it!”
👉 2) The high-fi mobile version could be more polished, as well as the desktop version. This is literally just a matter of time. Typically when I spend more time on UI, and it looks nicer because I can tweak more on details. We were actually two gals down when dashing for the finishing line (we had four people, to begin with, so yes, my workload was A LOT and we were definitely rushing).
All in All:
This is not too shabby for an MVP. With more time, PILE definitely is pretty promising.
