Product Design

In cases where a new app does not yet have a look and feel established, we work with clients to discover core brand qualities that will inform the visual aesthetics as well as the tone and experience design of the final app.

Whether your company is a new venture and hasn’t nailed down its brand persona, or is an established organization working on translating an existing brand identity to a digital user experience, we are happy to build out a brand experience design system that is true to your brand and supports a great user experience for your customers.

At SmartLogic, our main goal when creating an empathy map is to align stakeholders and to establish a baseline user we are targeting when we move on to the next phase, journey mapping.

To create a customer empathy map, we conduct a mapping session with clients and developers in a room together, articulating various aspects of the archetypal person who will be using the app, including what they are thinking/feeling, seeing, saying, hearing, and what their challenges and goals are. This exercise helps us move from market research to user characteristics, and helps bring product vision and technical implementation stakeholders together around the needs and perspective of the end customer.

The completed user empathy map in of itself is a great artifact and point of reference; we also use it to also create a proto-persona, which helps to anchor design and development around the user's needs and preferences.

With a Journey Map, we move from focusing on the customer’s perspective to defining a set of steps a user takes to complete a goal in the app. We ask several questions as a team for each defined step to assess value and challenges for the user, including pains, gains, what they need to move on to the next step, questions they have, and how they’re feeling. We use the customer journey map to focus on the user’s journey, so we can make strong UX decisions.

This process is also a very useful way to shift focus from all the features the app could have to the features critical to the user’s ability to successfully complete a goal, which ultimately will help us to focus on delivering the features that best support your end users.

Our approach to wireframing often begins with micro-wireframes which we build in Whimsical; they are something of a cross between a user flow and an actual wireframe. Micro-wireframes allow us to start thinking about the interactions in each step without getting ahead of ourselves and putting too much detail into the layout, placement, and look and feel of each feature.

Micro-wireframes are a great way to map out the screens we’ll need to design and the flows we want in a quick and iterative way. We move on from micro-wireframes to full wireframes and then mockups once we've built consensus with the client on what the final flows should be.

Once we reach agreement with our clients on a final version of the wireframes, we move on to designing high-resolution mockups in Sketch, and then an interactive screen-based prototype. We do no code prototypes, rather we build our application prototypes in InVision, which allows for quick turnaround and iteration. The more we can test, clarify, and refine the design before beginning to code, the faster and more focused development can be. Structural changes are relatively quick and easy in a design tool, but much more time-intensive (and costly) once the coding has started.

Collaboration and communication continue after our design team hands off the prototype and design assets to the development team for implementation of the UI/UX design. Our design staff are a resource for the engineering team as they implement the designs, uncover edge cases, and as feature prioritization changes over time. As an agile development shop, this continued dialog is crucial to ensuring that the fit and finish on our apps is high even as we make strategic adjustments throughout the life of a project.