SmartCardz is a flashcard app used for studying. This prototype was developed as part of an online course called UX Fundamentals (CareerFoundry), and was my first UX design project ever.
Deliverables* include: Competitive Analysis, User Interviews, Persona, Job/User Stories, Task Analyses, User Flows, Wireframes, Clickable lo-fi Prototype (Prott), Usability Test Plan, Script, and Report, Visual and Oral Presentations.
*Throughout my coursework I focused my efforts on communicating meaningful content, using aesthetics only as far as they aided with that goal. I am not a visual designer and may never be intersted in pushing pixels all day and delivering gorgeous hi-fi prototypes. Put me with people! My main interest is UX Research.
The Problem
In my opinion, simply put, design is creative problem solving. In one sense, the problem propelling the design of SmartCardz isn't very romantic; it was just the first step to a new career.
On the other hand however, I wanted to design an app that was as close to flipping through flashcards as the real thing. When I was young, flashcards were an extremely effective way to learn something new, quickly. If you combine that with the powers of the internet and the convenience of a mobile phone, you've got something really special. That was the design problem behind the SmartCardz solution.
Competitive Analysis
When researching you want to answer 3 questions: is my solution desirable, feasible, and buisness viable? For the scope of this project I focused on the first.
If you want to know what is desirable or how to make a product more desirable you don't have to start from scratch; start by analyzing what is already out there.
I performed my CA on 3 mobile apps: Quizlet, Cram, and Flashcards Deluxe. While the first 2 were free, I chose the latter specifically for its price ($3.99) wanting to see if there was added value. (I don't know about you, but the word "free" is becoming an increasingly terrifying word!)
I downloaded, registered, and spent hours flipping around the apps while taking notes. If you would like to see the full CA, you can do so here, but mainly I validated that SmartCardz was in fact both desirable and doable.
One Design Decision: Keep. It. Simple. Stupid. These apps were trying to do too much and in my mind missed the main thing: make studying simple and distraction-free; thus eliminating student pain points.
User Interviews
The best way and my favorite way to gather solid qualitative data from potential users is the 1-on-1 interview. As a people person, I call this "getting to know someone" and after a life-time of experience, I consider myself a pro.
I conducted 5 remote interviews and recorded them with the permission of the participants. Recording allowed me to focus all of my attention on the participant during the interview and take notes later. I can use a scipt if I have to, but I prefer to rely on my own ability to make the participants feel comfortable, read their body language, and ask pertinent follow up questions when needed.
If you would like to see the questions, answers, and my notes, have a look at this report.
One Design Decision: All my interviewees echoed the same thought, "we learn best in context, not just by reading a definition". I wanted to include a feature that would allow you to create sets of flashcards with definitions straight from the dictionary, but with the added functionality of being editable. That way each user could edit the definition into its most memorable form and add context with original examples.
User Personas
One of the most important reasons we do user research is to create personas. A persona turns a hypothetical user into a "real" person which helps add a research foundation to all our design decisions. This is the key to user-centered design; it may have been my decision, but I made it for Johnny, or Susan, or Sara.
One Design Decision: It's Sara-Centered-Design from here on out.
User Flows
Its info architecture time! We've been introduced to Sara and we know how she would like to use SmartCardz to accomplish her goals. So now we can map out her path on the application, step by step, screen by screen in user flows.
One Design Decision: Draw all future user flows using the appropriate software. As you can see, I'm not the best artist ;). For future projects I switched to lucidchard and draw.io resulting in much better flows.
Wireframes
Now that we have visually mapped out the tasks into flows we can convert those to wireframes, which we string together in a clickable prototype for testing!
This part of the process was by far the most difficult and time consuming for me. I had zero knowledge of UI patterns and rather than get inspiration from existing patters I chose to go with what was in my head. The results are not awe-inspiring :) but they taught me a valuable lesson.
One Design Decision: It's o.k. to get inspiration from existing UI patterns.
Usability Tests
There is light at the end of the tunnel! This part is by far the most fascinating and enjoyable part of UX design for me. Its a part of the process that I bring strength to, with a combination of good social skills and aptitude for critical analysis.
I tested 4 users remotely and moderated them as they clicked throught the lo-fi prototype I strung together in Prott. I did this in a slightly unorthodox way as I opened the prototype on my computer, shared my screen with them, and had them talk me through the navigation. This may seem awkward at first but it turned out to very effectively extract their thoughts, as they had to verbally direct my every move of the mouse.
One Design Decision: These tests exposed me to mental models and to the benefits of iterating design in favor of those models.
Screen Shot of Usability Test
Conclusion
This initial project introduced me to the user-centered design process and gave me my first hands-on experience designing! I learned the parts of UX that I would like to focus on moving forward: Research and Testing.
If you've got 10 minutes you can hear me present what I learned here.
Or you could take a quick glance through the PP slides.
This is one of the slides from the PP where I show how I might increase the fidelity of the initial paper sketch.
Thank you for reading!
