Design process of ‘Shopster’ mobile app
My experience designing ‘Shopster’ — mobile application that helps you with grocery shopping.
The final part of my Interaction design specialization was to use all knowledge I acquired in past 10 months and use it on designing a real digital product.
Why Shopster?
I didn’t have to look far to get inspired for my final task. Looking at how people close to me plan and perform grocery shopping revealed a lot of problems they encounter and possibilities to improve that experience. Planning grocery shopping for most stakeholders is still a manual process that can be stressful, time consuming and still can’t ensure maximum efficiency in shopping process or full level of completion.
Building a digital solution they could use for brochure browsing, creating and managing shopping lists, group products by certain criteria, share information about special deals, have shared lists with their close ones and notifying each other about certain actions would greatly improve their shopping experience. To use that digital solution stakeholders would need to change their habits and shopping process, but would greatly benefit from it. That’s how the idea of ‘Shopster’ was born.
Needfinding
For start I selected three candidates to closely observe and document how they plan and perform grocery shopping. It quickly turned out they all do almost no planning, try to remember items they have to buy in their heads or simply write shopping list on a piece of paper. Two candidates used paper store brochures to find items they need and write them on a piece of paper. After observing and interviewing all three participants I found a lot of breakdowns in their activities and opportunities for improvement. They were all documented and some of them even captured in form of a photo. That was a nice way to create focus points for next stages.
Ideation
Brainstorming
To articulate my ideas as user goals I used phrases like “user needs a way to” or “user needs to be able to.” At this point I wasn’t looking for specific solutions or features. The end result was a list of 15 user needs with clearly defined problems or opportunities.
Point of View
Point of view is a high-level strategy that pretty much frames up upcoming stages of design process. A good point of view clearly expresses problems and/or opportunities that are deep user needs and makes clear what a good solution would accomplish. Expressing surface user needs or not clearly defining problems/solutions could later consume a lot of time developing something that will not produce adequate benefit.
Inspiration
It was time to hunt for inspiration — existing designs, products or services that directly or indirectly relate to my design idea or point of view. To start off I wrote down 10 words that address designs solutions or feelings that relate to my design idea. Then I added visual inspirations with clear explanations how they inspired me.
Prototyping
Next in design process was to use the design inspiration I came up with two different design ideas that engage my point of view to address a user need. I illustrated these two ideas with storyboards.
Storyboards
Storyboards are sets of comic like drawings about what an interface does and how it is used by user to accomplish tasks. They convey potential solutions to a problem found during Needfinding and show how a user will interact with the design.
Paper prototypes
Paper prototypes I made were hand drawn and each instantiated one of my storyboards. They show all the essential elements of a user interface, but in a pen and paper format instead of pixels and code. Prototype interfaces I built were complete enough to enable people to navigate, recover from errors, and change their mind. Built like that, they help us to focus on concepts and save a lot of time we would spend playing with pixels or writing code.
The biggest downside of paper prototypes is you can’t put a lot of details to them. This especially becomes a problem when screens have more than one state or element arrangement. It can be quite challenging to draw all those elements and possible screen sets.
Heuristic Evaluation
Prototyping is an iterative process in which our prototype is tested and evaluated by test users. Feedback we receive from them is a base for identifying problems and making changes to the prototype. Method used to identify usability problems in user interfaces is Heuristic evaluation.
I got together with a couple of colleagues who performed an in-person evaluation of my prototype while I mapped their thoughts and opinions to different heuristic violations defined by Jacob Nielsen. I wrote as many violation I could and added severity ratings between 0 and 4 (0 = minor violation, 4 = major violation) to each violation.
I also got an online evaluation from a peer who knew the heuristics, so I received the feedback containing violations and their severity. To return the favor, I also evaluated her prototypes and sent my feedback.
Since evaluation was made on detail-poor hand drawn prototypes not many violations were found. My conclusion is that most violations in both my and other peer’s prototype belong to ‘User control and freedom’ and ‘Flexibility & efficiency of use’ violation groups. If this task was supposed to evaluate wireframe prototypes of all screen within my app maybe it would be easier to find more violations and from various heuristics.
Development plan
Using feedback I received from evaluators who tested my prototype I put together first list of changes. Most of those changes were simple like renaming elements or adding a certain piece of information to existing screens, but there was also a critical one — users could not add any other product than those in store brochures. That’s a proof that one can overlook even the most obvious and simple things when too involved.
In order to make an interactive digital prototype I had to make a detailed development plan. All upcoming assignments were split into tasks and each one was defined with name, deadline, estimated time spent, status and comments. Counting several outside constraints in I soon had a pretty clear picture what my schedule will be in order to deliver the final prototype on time.
In last 4 stages I noticed that many helpful changes came from either from in-person analysis or other peers heuristic analysis. It helped me to complete the vision of each screen I will design in weeks that followed.
Digital prototype
In this phase I also started working on digital version of my paper prototype. My choice to design digital prototypes mock-ups was Adobe Photoshop and InVision for making prototypes interactive.
First three screens I designed were home screen, digital store brochures screen and shopping lists screen. That was enough to define the look and feel of the app.
Getting it ready for testing
In order to make ‘Shopster’ prototype ready for testing I had to design mock-ups for all screens in the app. First step was to draw all wireframes, upload to InVision and make interactive. With three pages done earlier I soon had a fully functional prototype. Even though it was not completely polished, the overall look and feel was reflecting the final product and it was ready for user testing.
Testing the prototype
At the very beginning I thought this will be the most boring part of my design process. I was so wrong!
To ensure maximum consistency between prototype testing sessions I had to develop the testing protocol. Testing protocol covered everything from introduction to testing and gaining signed consents, through specific list of tasks testers have to perform, to recording observations and debriefing participants.
This time testers were navigating through a fully functional prototype and I received a lot more feedback than after heuristic evaluation. After testing I went through all my notes and records that helped me identify all breakdowns and pain points in my prototype. That resulted with a detailed list of changes that were implemented in second iteration.
Among all design breakdowns or opportunities and their potential solutions I identified one for A/B testing. To get ready for A/B testing I had to make an alternative design of the chosen component.
A/B testing and results
After implementing all planned changes and designing alternative design it was time to duplicate my prototype and create versions ‘A’ and ‘B’ containing original and alternative solutions to chosen component.
I used usertesting.com to run A/B test with 4 participants. They all had same tasks to perform and went through the whole prototype, but 2 of them got screen ‘A’ and 2 screen ‘B’. They recorded themselves using my prototype and I later watched those videos and gained very valuable information.
What they said and tone of their voice enabled me to draw conclusions on how they how they interacted with my prototype, especially with A/B screens.
Although A/B testing with 4 users didn’t give me enough information to decide which of two versions is a better option, I got some new insights about my prototype in general. I created another list of changes that contained improvements motivated by comments from A/B testing. Many of them were valuable guides for final polishing of ‘Shopster’.
Fit and Finish
In this last stage I had to turn my prototype into a polished product. I concentrated on completing the changes from my last list and that app is optimized for the interface it was designed for (iPhone 6).
Last thing I had to think of was the name for my app that clearly encompasses and brands the function of it. I decided to call it ‘Shopster’ because I believe it is appealing and self explanatory.
Finished prototype is available on InVision. Check it out and let me know your thoughts and suggestions in comments section.
Thanks for reading!
