My Role
My role included establishing a design system and style guidelines to ensure a consistent user experience. I directed and defined the design and user experience for the RepIQ web application, creating UI deliverables ranging from sketches to functional prototypes. The RepIQ platform ranged in features from email tracking to in-depth company and people data, including analysis and data insights.
Deliverables included wireframes, mocks, clickable prototyes, front-end templates, and usability tests.
Product Overview
The RepIQ platform ranged in features from email tracking to in-depth company and people data, including analysis and data insights. Along with the web platform, RepIQ also offers a Google Chrome extension to utilize across the web. A design system was developed and iterated over time within Sketch, providing design components to be easily incorporated into the product. Due to the rapid iteration and need for requirement refinement, it was imperative to maintain a strong design system. RepIQ was built using the AngularJS framework that I was new to, but I was able to adapt and integrate HTML and CSS templates and production-quality code.
Ideation
The team at RepIQ was small at 3 (2 software engineers, and myself), but we were able to continuously release new features for the product through constant communication and collaboration. As features were brainstormed, I remained in constant contact with key stakeholders within and outside of our development team. Due to the nature of such a young product, we often switched course at times to fill client needs, but our ability to communicate as a team made it easy for all of us to stay on the same page.
Strategy
The team at RepIQ adopted a lean approach, emphasizing continuous product feature deployment. I created low-fidelity prototypes in the form of sketches and basic wireframes, and the designs graduated up to high-fidelity prototypes and production-ready frontend code, while gathering and interpreting feedback to maintain a user-centered product. This lean approach created a strong ownership across the entire team as we all worked towards each feature release.
Planning Scope & Definition
Working directly with key stakeholders and the development team, we prioritized and negotiated product features. While planning each initiative in the product, I applied my user experience background to identify when industry standard usability guidelines best applied and communicated with the development team how best to address these concerns. Keeping this constant communication with the development team helped establish technical limitations and opportunities, while maintaining the vision of the product and aligning with business objectives.
Annotated Wireframe/Prototype Example:
Design Coordination & Execution
As the sole designer on the team, I had to make sure I was in constant communication with developers and stakeholders. I often gathered opinions and went through rounds of feedback to confirm business objectives were met while providing the user with a pleasant experience. Applying the feedback from internal stakeholders and external user testing, I produced user scenarios, user experience documentation, high-fidelity prototypes in Sketch and Marvel, and production-ready HTML/CSS(Sass) within the AngularJS framework. RepIQ was a web-based application that required responsive design and also a Chrome extension application of which I maintained a consistent design and user experience.
Design System
A design system was developed within Sketch to allow for rapid prototyping and wireframes. As the design system was refined, it made it much easier to adapt to the quick pace of development. Atomic Design was the main influence in the approach to this design system. Here is a quick look at some of the design elements:
Leadership
Throughout the development of the product, I owned the overall design and user experience. I routinely presented progress of feature prototypes to the team and iterated based on internal and external user feedback. I continuously pair programmed with developers in order to have HTML, CSS, and JS align with the vision of original mocks and prototypes, providing front-end technical expertise to resolve various issues. I also solely wrote and conducted usability studies for the product by performing observative user testing, analyzing qualitative and quantitative data.
Reflection
Due to the nature of working for a startup and the RepIQ platform, priorities often shifted and features were discarded along the way. It was frustrating at times to see initiatives see the end of the road, but it was also very exciting to be able to adapt and change course to deliver the product that users wanted. The development team at RepIQ worked at an insanely quick pace, which provided a big challenge that was a lot of fun. Usability testing took a back seat at times, as it required more dedicated time to write tests and dive into analysis, but the fast pace at RepIQ was really worth it. If I could have changed anything during the time developing the RepIQ product, I would have liked more time and resources to dedicate to additional usability testing with RepIQ users so design decisions could have been as accurate as possible.
Deliverables
Wireframes, mocks, prototypes, and a lot of other UX deliverables were rapidly produced during my time with RepIQ. Below are a few examples of some of these: