Shawn Clampitt's profile

Savvy - Design Process

Savvy
Thank you for taking the time to review the work I did to create the app, Savvy. This is a product I designed and produced on my own as part of a User Experience Design course project. The initial prompt I was given was this: "Create an app where users can find and connect with an expert in any field or topic." From that, I developed Savvy. Below you will find the documentation of my process. I took an iterative approach, and the design took shape along the way. 

Currently, it exists as an interactive prototype, though not all screens and functions have been built out. You will find the prototype and screens as their own project board here on Behance.
Initial Research

My work began with a competitive analysis. It quickly became clear that this is not a well-defined space, because there are no established competitors with a large market share. My findings, SWOT profile, and conclusions are detailed below. 

I also wrote up a Business Requirements Document. Any real world scenario will have to bridge the gap between the needs of the user and the needs of the business. Identifying what is expected, what is the criteria for a successful design, and who will be the judge of that are all key elements to know beforehand.

And finally, we have the user stories. Identifying some basic tasks or needs that a user will have provides some context to what the design need to offer. 
Understanding the User

Below, we begin to get a better picture of our users. After doing some user research, through interviews and surveys, I created three individual user personas. Two are users that come to the app seeking to connect with an expert, and the third is a user serving as an expert herself. 

Continuing to contextualize the user, I created journey maps and user flows based around individual tasks and features within the app.
Beginning to Design

Starting with a site map, I made low-fidelity sketches with pen and paper, then mid-fidelity wireframes using Balsamiq. Eventually this lead to a high-fidelity wireframe and prototype in Adobe XD.
Usability Testing 

My testing primarily consisted of moderated interviews done over Zoom. There were 6 participants, and each gave great feedback that helped me identify areas of potential improvement within the app. I used a rainbow spreadsheet to help process their responses. I also did an A/B preference test for the onboarding screens.
Refining the Design

After making updates informed by the data gleaned from usability testing, I did some research on Google's Material Design principles. I identified several elements that were good design heuristics and would provide added familiarity for users while using the app. Below, you will see my breakdown of how I implemented those. 

I also applied a grid to the design. This helped add balance and structure to the design and layout. 
Deliverables for Development

Below are screenshots of the folders and files exported for development. Each has been named and organized to make them easy to identify, and they have been saved at 1x, 2x, and 3x.
Further Iterations

There are still several additional screens that would need to be created to completely build out this prototype. There will likely be changes made to some of the account screens that exist currently once the information architecture is more fully developed. And, of course, there will need to be more testing done to validate and improve all of those decisions. I look forward to that process and seeing what a final product might look like.
Savvy - Design Process
Published:

Savvy - Design Process

Published: