Snapkeep is an Android app, based on Google's material design language and was created at General Assembly in San Francisco as part of a 1 week accelerated UX course.

All work in this case study is my own and does not necessarily reflect the views of General Assembly.

The challenge

Design an app in one week, utilizing your learnings as your progress through the course.

We set out to learn the practice of experience design in just one week. A whirlwind tour that was intense, challenging and mind altering.

We were given the task of designing an app that would serve as an ongoing practical example for each day’s learnings. We kickstarted the process by choosing a topic close to our hearts, that would solve a real-world problem.

I chose my favorite hobby – card gaming.

I framed my challenge in a simple sentence:

How might we transform the way hobbyist manage their collections?

I started with a generalized problem so that I could get a feel for the audience but I knew I’d have to hone in on 1 single game later to make it relevant and impactful.

The process

The course followed a fast-paced structure that felt similar to a google sprint.

Day 1. Intro to design thinking and research
Day 2. Defining the problem
Day 3. Ideation and testing
Day 4. Prototyping
Day 5. Refining final project
Day 6. Presenting

We also used the lean startup methodology build – measure – learn.

lean startup approach build measure learn.
The design approach we used for the course baed on lean startup.

Primary Research

After our first class, we were given homework to interview between 3 – 5 people. So I took off to the comic book stores in San Francisco to meet as many gaming nerds as possible. With only a few hours to do research, I targeted the 3 biggest stores and set up 2 Skype calls to my buddies back in South Africa while en-route to the first store.

Primary research methods
3 methods I used during the course for research

I managed to interview 5 card gamers. 3 in San Francisco and 2 over Skype.

The feedback and conversations constituted my primary research. A card game called Magic: the gathering seemed to have a big presence so I rolled with it. 

When I got back to my hotel, I also put out a request on the Facebook groups in the bay area to complete a survey I had set up. The participation was very positive with 18 responses, given the short timeframe.

3 locals from the bay area that I interviewed and 2 skype interviews
3 locals from the bay area that I interviewed and 2 skype interviews

Secondary Research

A competitor analysis and survey were used for my secondary research.

In my competitor analysis, I compared 22 Tools used for managing collections. I also looked at how admirable services outside of my topic could be used as a benchmark.

I found the technique of comparing admirable products very interesting. Combining this with Fjords concept of liquid customer expectations allowed for me to draw experience analogies between sports cards, sneakers and stock exchange apps.

Competitor analysis chart
Competitor analysis

Synthesis

The next day in class we were taken through the process of research synthesis.

Using the raw data collected we used the technique of card sorting to identify emerging themes and insights.

The very rudimentary sampling of the mtg landscape revealed poor management, lots of manual effort was involved, strong financial mindset n players and collectors.

Personas

I identified 3 key behavioral traits and formed personas around them.
(2 more emerged following more research)

1. Adam the collector
2. The Haggler
3. The online guy
4. The bulk buyer (anti – persona)
5. Investor (very rare)

I also faced a very peculiar issue – a large portion of my audience was not directly aware that a problem existed with the way they managed their collections. This was a difficult notion for me to wrap my head around. It was also a great learning as I had to frame a lot of question in such a way that highlighted the problem first without asking leading questions.

At this stage, it became clear that I needed a well-defined value proposition that would distinguish my product in the ocean of mtg apps.

Persona Adam the MTG Collector
Persona developed from initial research.

Value proposition

A mobile app that lets card collectors easily input & manage their collections. Focus on a delightful interface, real-time financials, and simplicity of input.

Solution statement
Solution statement for Snapkeep after research and synthesis

Feature prioritization

I narrowed my extensive feature list into 5 buckets and focused on just the core features that would deliver value for a minimum viable product (MVP).

After reviewing my MVP scope I felt a crucial aspect was missing. I re-looked at the research and felt the MVP approach wasn’t quite right I needed a Minimum lovable product (MLP) which included a social aspect. Without social, I felt my app would be left alone gathering dust like all those cards I’d seen in collectors cupboards.

Feature prioritization based on 3 personas
Feature prioritization based on persona needs
Feature prioritization for MVP and MLP
Grouping features by 5 core themes and selection only the most valuable for MVP.

Information Architecture

I love building very detail oriented information models but we were taught to keep our documentation lean and to show clarity of thought our artifacts.

We did a few really great exercises around storyboarding and rapid idea generation. I went deep on this and developed a high-level journey map, a set of user stories, a sitemap, and user flow.

Hero Flow

Hero flow is a new term I learned on the course which is similar to red routes – the most critical actions users need to be able to perform for your product to be successful. Scanning a card using the camera (card lookup) was most important for my MVP.

Snapkeep Hero flow
A flow diagram of the most important action users to need to complete in order for my product to be successful.

Sketches

At the end of the second day, we moved into sketching, we were given the evening to complete our sketches as homework. I drew several sketches, one for each screen in the hero flow using material design as a guide for the structure of elements.

Paper prototyping

On the day three, we moved onto low fidelity prototyping. The rate at which we moved from research to prototyping made for a really fun experience. The build-measure-learn methodology was showing its merits.

We used Marvels POP App to capture our sketches and link them together in a click-through prototype. I used a few cut-out elements to show different states on the same screen.

Usability testing

To demonstrate how usability testing was facilitated, we paired up in class and swapped phones and then tested each others paper prototypes. In a speed dating fashion, we stepped through each other prototypes using a think-aloud technique. The most noteworthy learning from this exercise was getting human feedback as early as possible even though it’s not representative of intended audience can massively valuable.

Feedback

With only 5 tests of my paper prototype and I was able to pick up some big usability hurdles and gaps in my design. We noted our learnings and recommend changes and went back to the drawing board to improve our sketches.

Sketch finding: Based on early sketch feedback, it became clear that the app was all business and no fun. So I tweaked the interface and flow for a more casual and fun approach
and moved to wires.

We then had another round of speed date testing outside of class. It was convincing to see how very early feedback at low fidelity can pick up problems and why they were happening.

For homework, we had to test with a representative sample set.

Wireframes

Next up we turned our sketches into medium-fidelity wireframes. I used Sketch and followed Material Design guidelines.

Wireframe finding: Based on usability testing with people, it became clear that simple patterns were more learnable & encouraged discovery.I also learned that what the audience said they wanted in research, didn’t match their exceptions during testing.

User story: Allow for multiple cards to be “snapped” in one go.
Outcome: Many failed tasks & there was a lot of confusion.
Change: Capture on a one-by-one basis and prompt for multiple card capture.

Time only permitted one revision of the wires but I felt confident my hero flow was on the right track because of the feedback I received.

Key wireframes for snapkeep

Style Tile

The following day we delved into UX principles, design patterns, mood boards and visual design. I opted to create a style tile instead of a mood board and style guide. I had used this artifact extensively before with positive results.   

I also defined my own design viewpoint that would guide my design decisions and make my app standout amongst the crowd.

Style Tile
Style Tile is a cross between a mood board and style guide

Prototype

On Day 5, we covered the storytelling aspect of our presentation, developing a narrative and putting together a deck for our final app. Most of the day was spent refining our prototypes, getting feedback and tweaking the visual design.

I built my prototype in Invision, using Sketch for my visual design assets. I chose these 2 tools because they work really well together and prototyping while limited on animations can be done very quickly.

With only one evening remaining and the majority of the class sitting with half-baked prototypes, it was time to get cracking. I worked late into the night along with others classmates who were very supportive via the Slack channel.

Presentation

On the final day, I gave my presentation to the class and scored full marks. Like many, I felt overwhelmed, exhausted and delighted to have been part of this awesome learning experience.

Photo of me
Last day at General Assembly exhausted but keen to explore San Francisco.

Next steps

Snapkeep in its MVP state provided a concrete proof of concept, for an innovative card collection app. I would like to get more evidence-based feedback from players and collectors and revisit the project. Reaching out to the right influences and organizations in the community could turn this into a funded project.