Hey! Where are all the the pictures?
This project is in development and is currently protected by a non-disclosure agreement. I've shared what I can about the experience but to see the rest you'll have to wait and create an account.Another designer had created a set of wireframes. He brought them to me to write the markup. Once we started looking at them, we discovered some unresolved issues. For one, they had been designed desktop-first, not mobile-first. Additionally, there were some friction points in both the account creation and management process that seemed unnecessary. We worked together to revise the workflows, design responsive views and perform usability testing. Once we worked out the kinks, I marked up the pages and worked with a software engineer to implement the changes into production.
Once I received the designs, I worked with the lead designer to perform a quick S.W.O.T. analysis. This consisted digging into both the designs at hand and some competitive research into other services on-boarding and account management workflows.Using our discoveries, we iterated on design options and performed guerilla usability testing with quick iterations. The process was very non-scientific but did lead to some interesting insights.
Based on the results or our analysis and usability testing, we made some key changes to the workflow. For one, we removed the need to create a password on account creation and instead moved that to the email confirmation step. We also added in some information on account creation about what services your user profile allows you access to and what you can use it for. We also re-organized some of the menus to be more intuitive.
When I received the wireframes they had been created "desktop-first". Since we were moving the entire product suite to be responsive and mobile-first, there was significant thought and redesign required before beginning to build out the pages. I worked through a new set of wireframes that took the aspects from the desktop views and reverse-engineered them into mobile-first views. This was somewhat arduous but a necessary step. One of the biggest changes that came out of this was leaving the navigation visible at all times as opposed to collapsed on mobile as had been planned in the initial designs.
Following the updated wireframes and some hand-written notes I sketched out how the DOM structure should function. There were no style guides in place at the time so I was mostly starting from scratch. I was able to use existing CSS to establish a baseline set of styles so I built off of that. I created a small gulp project to manage the builds and SASS processing. The techniques were of interest to some other members of web development so I organized a sharing session to demo the process to the group.
I regularly shared my work with the software engineer in charge of implementation. He gave me feedback and asked for some specific methods of delivery. These were not the same delivery methods I normally worked with but I was happy to adjust my workflow to meet his needs. Occasionally, he would need something changed in order to get something working on his end so there was consistent and ongoing communication and revisions to make it all click. After several weeks, the pages were all dialed in and published to a testing server.