Blocbox is a web app project that streamlines the often chaotic task of storing and sharing useful content like notes, images and web links.
Role: User Experience, User Interface, User Research & Front-end Development
Functioning as a "UX Team of One" on this project, I was involved with all aspects of the design process and the accompanying deliverables for each.
Functioning as a "UX Team of One" on this project, I was involved with all aspects of the design process and the accompanying deliverables for each.
The Problem
Between home and work, keeping track of shopping lists, account passwords, useful articles, website URLs and photos of your new pet can be chaotic and frustrating. While solutions already exist, some are limited to a specific platform or device, while some are bloated with an over-abundance of hard-to-manage features.
The Solution
Blocbox provides a simple, centralized way to save, organize and share important content using whichever device is within reach at the time—smartphone, tablet or computer.
Planning & Research
With the problem identified, the design process kicked off with strategic planning and research to determine a MVP (Minimum Viable Product) based on findings from potential users, competitive analysis and business requirements.
Survey
A series of multiple-choice and short-answer questions were deployed via Google Forms to learn about potential users' current behaviors related to browsing, saving and sharing content online. Once the surveys were completed, I summarized the results and highlighted key take-aways to inform the rest of the design process.
Competitive Analysis
Three existing solutions were analyzed using the SWOT method to identify opportunities and compare how each was positioned in the market.
Interviews & Personas
In follow-up to the user survey, several respondents were interviewed in person or via phone to discover the motivations and goals driving their behaviors. Personas were created to represent key user themes identified in the quantitative and qualitative research and keep empathy for users at the forefront.
Business Requirements
In conjunction with user and market research, the business requirements were established and integrated into the MVP Summary. After a free trial, users would have the choice of three monthly subscription plans: Free, Pro or Expert.
Design & Test
Structure
User flows and a sitemap were created using Draw.io to visualize the necessary steps for the on-boarding and dashboard experiences.
Content
Landing page copy was drafted using brand-specific tone-of-voice—professional, friendly and straightforward—so that placeholder text could be avoided.
Layout
After some quick paper sketches I used Illustrator and InVision to create wireframes of the landing page, on-boarding, dashboard and account settings and so that I could start getting feedback from users right away.
Usability Testing
In order to get feedback quickly, I scheduled several 15 minute phone interviews with friends and drafted a simple script guide. After a brief introduction and clarifying with the interviewees that the focus of the testing was the wireframes, not them, I lead them through the key tasks. To get the best results I listened intently, jotted observations and, only when necessary, reminded them to speak their thoughts as they went.
Two glaring issues emerged as the users attempted the tasks: 1) none of the users found the link to Account Settings from the lower left corner of the dashboard page without help and 2) there was significant confusion around whether an added item was saved or not. It was clear these problems would be top priorities for the next iteration.
Issue 1 - Users needed help to find the link to Account Settings
Issue 2 - Users were confused by button choices while adding an item
Visuals & Branding
The visual identity was intentionally designed to align with and support who would be using the web app and for what purpose. Paper sketches and Illustrator were used to explore numerous ideas and iterations and then presented to my mentor for feedback.
Prototype
Using Sketch and InVision, an interactive prototype was created with mockups combining all aspects of the design so far: structure, content, layout and visuals.
Usability Testing
The top priorities for research at this point centered around users' perception of the landing page and the core feature of adding a new item. Additionally, the two interface issues identified in the previous testing needed attention as well. I used several lean research methods: UsabilityHub.com, UserTesting.com and Google Hangouts video calls/screen sharing.
UsabilityHub
I used UsabilityHub.com to run three tests. The Preference Test asked users if they preferred the "Add New" button position on the top left of the dashboard or the top right. The Navigation Test instructed users through adding a note to check for success rates and the average time taken for each step. Lastly I ran a Five Second Test on the landing page to get first impressions on the overall trustworthiness and clarity of the page.
A heat map image from the results of the Navigation Test
UserTesting
This remote test of the interactive prototype yielded a six minute video recording full of insightful feedback on the landing page and dashboard. The user highlighted their experience of an organized and trustworthy site that was user-friendly. They also noted their expectation of more nav options leading to additional information about Blocbox.
Video Calls and Screen Sharing
To further test and validate the interface issues encountered in the previous testing, I facilitated video calls to compare feature success rates for the account settings link and the save button when adding an item. All tests resulted in successful completion.
Issue 1 was resolved by relocating the Account Settings link from the bottom left corner to the top right corner of the dashboard page, a much more visible position.
Issue 2 was resolved by combining the "Save" and "Close" buttons from two separate buttons into one.
Build
Though this is a concept project, I also coded a prototype of the landing page using HTML and CSS factoring in break points for responsive images and columns to accommodate mobile to desktop screens. I used Terminal, Git and GitHub to track my commits and host the live page.
