What is ecoATM?
ecoATM is a kiosk that pays instant cash for unwanted or used cell phones, tablets and MP3 players and recycles them responsibly.
Key Goal
To create a convenient mobile app experience that allows the user to get an accurate price offer, assist them with the necessary preparations, and allow them to 'Drop-off' their phone to get paid at the kiosk.
Role & Responsibilities
Discovery, Ideation,  Interaction Design, Prototyping, Usability Testing, Visual Design, Documentation
Discovery
I gathered with stakeholders from UX, Product, Engineering and Operations to explore the problem, discuss the business viability, what was required and possible with the current system, and what challenges lied ahead with the user's value for the app.
Team Sketches
The team was then asked to quickly sketch multiple solutions and present what they would like to see. They were then asked to sketch and present a final possible solution. This helped align a common vision of what the experience should be.
Vision Map and Framework
The team then needed to figure out how a user would get from Point A (installing the app) to Point B (dropping the phone at the kiosk). By starting at Point B and going backwards, we were able to come up with a 'Vision Map' of the general steps that would have to occur.

I was then able to synthesize the Vision Map and the final Team Sketches to create and Interaction Framework that helped guide the rest of the process. 
Prototyping
I ended up creating two prototypes. The first was made with Invision. The second was created in Proto.io, which had input controls, UI components, and dynamic interactions.
Usability Testing
I created two separate testing environments to observe different aspects of the experience. The first was a room where the user could use the mobile app, the second had a kiosk where the user could complete the transaction.

There were multiple cameras in each environment and we had several stakeholders assist with recording observations onto Post-It notes in a separate room.

We ended up having two separate sessions. The first used the Invision prototype which helped give valuable insight into the users mental model and uncover a few blindspots from our initial design. After going back and iterating with our findings, we had a second session with the Proto.io prototype, which allowed us to then validate the experience.
Synthesis
The observations from the usability sessions were then organized into themes, which were then synthesized into Insights and then reframed into 'How Might We' (HMW) questions that could be used for ideation.
Storyboard
We then created a detailed step by step storyboard of the entire experience from the user's point-of-view. Once again we started at the end, and worked backwards, placing our HMW questions (orange Post-Its) contextually within the story. This helped us understand when and how to address certain sticking points the users were having. 
Wireframes
Once the storyboard was complete we sketched a quick wireframe representation that was the starting point of the final UI.
UI Design
After the validation from the second usability session, I began working on the final visual design in Sketch. I created a design library that was influenced by  'Atomic Design' patterns which included typography, styles, elements, dynamic components, and resizable templates. The pages were organized by the interactions originally framed in the Interaction Framework.
Functional Diagrams (Wireflows)
I then discussed the functionality and logic with engineering and documented them in Omnigraffle with the screens created in Sketch. The screens were then uploaded to Invision so they could be embedded into Confluence and linked to the Inspect feature for the specifications.  
Documentation
Both the Screens and Functional Diagrams were documented in Confluence and attached to their respective JIra tickets for agile development. Each diagram was linked to their parent diagram and had a list of all the screens that were included, making it easy for the developers. They were also able to collaborate with me directly in the documentation if they had any questions. Confluence also provided a reliable source of versioning and logging activity for prosperity.
Back to Top