After getting a better picture of how I want to approach the solution, I sketched-out some wireframes for some of the designs I was weighing. Considering that this is a UX challenge, I wanted to maximize interaction with my designs by coding a mockup and getting real people to use it, so I heavily annotated each of the designs to be certain I could code it in a reasonable time and that I wouldn’t waste time on a design that wouldn’t be a good solution.
I didn't render any digital mockups in Sketch because I thought pushing-pixels and selecting fonts would be a waste of time. I wanted to get going on coding as soon as possible, as the time it would've taken to make non-interactive mockups is better spent on making something people could use in a challenge like this. I coded two prototypes that blended features from a couple of my designs. From the screenshots I was given and my analysis of the problem it was apparent that there should be a split-view in the fullscreen app with one side devoted to writing and the other towards inspiration. The main difference for these versions was the best way to present the inspiration content. Version 2.1.0 featured a drop-down list to present pre-made cards as inspiration, and Version 2.2.0 featured a continuous scrolling list of past cards sorted by relatively arbitrary numbers as inspiration. Please have a look at the links to get a feel for the mockups and a sense of the usability before reading on.
Abstract
This was a UX redesign of a software called CardMaker Pro which helped streamline the card-writing process for writers at a company called A Personal Touch, Inc. Given samples of previous versions of the product, I needed to take the best features of a recent update and an older version to create a simple and intuitive solution that makes editing cards as easy as possible.
"It was significantly easier... I could just scroll and all of the photos and text I needed were right in my view"
Introduction
This case study outlines my process for a design challenge I did while applying to a startup. While I can't share the entire contents of the challenge, this is a great example of my process for UX projects (despite the slight confusion there may be with a lack of reference). I was given mockups for an initial design and was told to apply user feedback from two initial versions (1 and 2) for a better version. The intended design goals of Version 2 were to maximize real estate on the page and to make writing the central feature of the entire application. Given the observations of how writers actually use the software (Version 1), it would appear that Version 2 completely neglects the inspiration process of writing the cards, and may have been designed with little to no research. The driving logic behind Version 2 is a centralized landing-application for all of the writer's needs, but the second part of that statement should be essential: all of the writer's needs. The writers of the company complain that Version 2 is unusable today because it's full-screen emphasis and explicit use case of only writing hinders the inspiration aspect of card-composing.
Initial ideation
Thorough feedback sessions from two users revealed key pros and cons from both prototypes.
User Testing 2.1.0 and 2.2.0
Thorough feedback sessions from two users revealed key pros and cons from both prototypes.
I had two different people test both prototypes, my friends Ben and Eva. I started Ben off with Version 2.1.0, and Eva with Version 2.2.0 to see if the design they started with would be bias towards picking their favorite of the two. I asked them to pretend as if they were writing a postcard-update on a trip to one of the cities I had prepared cards for. The only requirements were that they complete the card with a photo and text, and that they explicitly take a quote or fact from an inspiration card using copy-paste on their keyboards. With their permission, I recorded the screen as they moved-about the app. I'd ask them questions such as how they're interpreting the overall usability, why they would complete an action in a certain way, and whether something was difficult or non-intuitive.
The tests went well with both Ben and Eva able to complete the task with minimal aid. Both of them took their time to pick a city or piece of text they really liked with all of the options present. One of the glaring complaints that they had for both versions was the text-editor. They said they didn’t really need any of the features in the editor and that it only cluttered the card. Also, when they would copy text from one side and paste it into another, the font of the text-editor would be different from the copied text. Even using Apple’s auto-formatted-paste command (Shift + Command + V) didn’t work in the editor! For Version 2.1.0, Ben took a little while to find the inspiration cards, and Eva complained that the selection-menu for the cards was too small on the screen. The little bit of copy wasn’t enough to direct their attention to the bottom right corner to access the cards. Version 2.2.0 was much better-received by both users. They were pleasantly surprised to find they could simply scroll-up and down the list of cards to find what they were looking for. When asked about the application as a whole, they both said that adding a photo was the easiest thing to do and that having a stark color-contrast between the sections (as in Version 2.2.0) made it much more obvious where to direct their attention as they glanced from writing to the inspiration cards.
Version 2.1.0
Pros
- Clean interface with both cards on the same plane
- Categorization makes for finding cards easy if you know exactly what topic or place you're looking for
- Uploading a photo was extremely easy
Cons
- Text box editor doesn't use the same font
- Text box editor has too much functionality / unnecessary features
- Cards aren't scaleable. Variety of sizes looks weird and the screen can't fit cards that are larger than the template
- Lack of search functionality may make it hard to find content
- Navigating between topics is tedious
- Inspiration-side copy isn't very succesful in directing the user's attention to the lower right
- Category drop-down menu button isn't the same style as other buttons or big enough to be noticed
Version 2.2.0
Pros
- Explicitly divided the functional sections of the app
- Allowed for scrolling-through inspiration content very quickly
- Scaleable cards allow for variety of sizes
- Uploading a photo was extremely easy
Cons
- Text box editor doesn't use the same font
- Text box editor has too much functionality / unnecessary features
- Cards aren't sorted in an order or categorized
- Lack of search functionality may make it hard to find content
- Complaint of not enough photos and visual pieces of inspiration
- Copy isn't instructive-enough to make the process and task super obvious
Assessment and Improvements
Both of my users preferred Version 2.2.0 to Version 2.1.0, as the interface presented a clear divide in the workspace, inspiration content was immediately accessible, and it was ultimately the most scaleable. Looking forward, I'd continue to flesh-out Version 2.2.0 if I were to continue the design process. For users that have experience with the application and don't need a lot of direction, Version 2.2.0 is a practical solution. The main differentiator that would need to be added for a new user would be directions for the explicit task, and some familiar navigation / UI icons like arrows or empty-states on the inspiration-side to indicate scrollability or a photo icon in the middle of the photo-upload box. All-in-all, there are some gaps in the complete experience, from onboarding to repeat-usage that could be improved.
What I Learned
UX comes down to getting stuff into people’s hands, then iterating on what they actually do.
Running a good user interview starts with a good process.From onboarding them to what they’ll be doing, to encouraging good communication, the experience of running an interview should be intentionally designed.
Capturing feedback from as many angles as you can is essential to an informed iteration. It’s too time-consuming and inefficient to be lazy with how you record what happens. “The palest ink is better than the best memory” – Chinese Proverb.
Project Stats
Total time: About 10 hours spread-out over a weekend including coding, drawing, UX research, writing, ideation
Physical tools: Ballpoint pen, gray sharpie, printer paper
Digital tools: JS Bin