WHAT I DID

MODERNIZE LEGACY WEBSITE  

Before digging into mocking up a new MVP interface, we needed to improve the current product while the new MVP was being designed and developed. I started off modernizing the legacy websites UI by updating it’s CSS styles. Having web development experience, I streamlined the collaboration with the front end developer by inspecting and testing style changes through in-browser web developer tools before generating lists of coded design updates. 

REFINE MVP USER EXPERIENCE

Understand the Problem Although I had a set of UX mockups and visual design guidelines to work off of, I started my first week familiarizing myself with the problem that I was solving. I interviewed and talked to researchers and Mindswarms project managers using the legacy product. What about the current product did they love? What did they absolutely hate? What would they like to have?
 
From there, I used the flow charts and previous mockups that were applicable to the current project and worked collaboratively with Bill. We refined the expectations and requirements for the MVP to be a product users will love. 

High Fidelity MVP Mockups: Design, Test, Repeat Next, I produced high fidelity mockups, the ultimate design deliverable, to communicate and collaborate with the developer team. I quickly learned and became proficient at Sketch to design mockups. For every flow or new feature, I was habitually re-editing the designs after reviewing and getting feedback from multiple stakeholders including the executive managers, the project managers (our primary users), and developers in our weekly sprint meetings. I was simultaneously working on different flows at different stages each day. I used my secret weapon I learned from Aloe, Google Slides, to virtually collaborate with different stakeholders. Google Slides made it easy to communicate, make redlines, draw attention to an area, send mentions to anyone on the project who didn’t have Sketch, and saved time by not having to navigate a large file. 

Collaborative Visual Design Although my focus on the MVP was the UX, I spent extra time on the fundamental visual design work as the only in-house designer. I heavily relied on Google material design guidelines and Google products’ look and feel such as Drive and Google photos for inspiration. I spent time on the visual work to make the mockups higher-fidelity to test out UX concepts. After solving the primary problems users face, I worked with our graphic designer in Korea to reskin the look with a new color palette and typography.

Prototype Hand-off I ended my work on the MVP with an interactive InVision prototype, and a Google Slides hand-off on how to use InVision and edit the prototype so Bill could continue on prototyping and the product.

Sketching Idea Exercises We focused on the idea of the “Insight Hub”, a centralized place where all the research lived, and the user flow of how a researcher decides to build a study. Bill and I then held a brainstorming feature sketch session to release as many ideas as possible. We gathered the ideas we liked and posted the sketches on the wall with post its to make sense of how it could work.

Align Plan for Product Growth Knowing how the MVP will work and look like with the new design style guidelines, I designed a set of compatible mockups for the future feature “Insight Hub” and the researcher’s journey navigating through their studies. I designed several UI versions for the key pages so the team would have many different options. I also specified and broke down interaction flows to communicate how I imagined the experience to be from my interpretation of the design sessions. I ensured my creative message got across of how I envisioned Mindswarms can grow. I included enough wiggle room and options for the company to continue the work on the design without me once my contract ended.

CHALLENGES + SOLUTIONS

International Tech Team A big challenge that I had to overcome, was working with developers and designers that were internationally remote on opposite sides of the world and different timezones. This involved being cognizant of when the working hours are for different team members, and being available for sprint Skype meetings and answer emails outside of your personal 8-5 work hour.

Be Clear and Organized I adapted to work in a remote workstyle and be clear and concise in communicating in emails and collaborating online. My secret weapon to work flexibly online was Google Slides: it was a key tool to work collaboratively and get direct feedback between team members on their own time. Weekly Skype meetings started moving more efficiently because we all had a uniform frame of reference when addressing an issue; e.g.“See my comment on Slide 3”.

DISCOVERIES

Small Changes can Make a Big Difference When I changed the palette colors and the font style of the legacy website, I received an overwhelming amount of positive user feedback. With a few CSS style changes, the project managers using the site exclaimed how much easier it was to simply read the text on the site. Their experience working day to day became more pleasant and productivity increased because they didn’t have to take breaks from reading the black text on the green background. I discovered how holistic the design process is, and how all elements of design intertwine and affect together.

LESSONS LEARNED

Find a Balance, Be a Peacemaker One of the biggest, but fulfilling challenges was working backwards and redesigning the MVP while the legacy product was in use. I had to make methodical design choices in phases that will ease the user base out of the old system. On the development side, I had to create a flexible design for new features and functionalities to be developed. I found a balance by connecting the dots and bridging the needs between users and developers. For the users: what is your process like using the app, and what is absolutely vital? For developers: How difficult is it to implement certain features, how does this affect the timeline and sprint schedule? I learned designers are product peacemakers and strive for that win win situation for everybody. 

Product Manager: Bill Wurz

Company Website: Mindswarms

Appstore Page: Mindswarms App