The Xpertio App
Xpertio is a mobile-first application made to connect people who have questions with experts who can give advice in real-time.
Problem
Hobby enthusiasts and others who pursue new and complicated activities in their free and professional time often need to learn key skills or to seek advice from others. Unfortunately the need for help tends to come in the worst moments- when opening up a browser window and typing a question is not possible, when there's not sufficient time to scour the internet for the right answer, or there simply aren't any resources to be found online.
Proposed Solution
Xpertio is a mobile app that was conceived to bridge the time gap that currently exists between when someone needs an answer and when an expert can give one. The way we set out to do this was by making it super easy for askers to post a question and for enthusiasts and self-proclaimed experts to be informed of opportunities to give advice.
The rest of this document explains the process I went through to bring the Xpertio solution to life.
Generative Research
After interviewing many prospective users, I was able to define user motivations and desires by categorizing the theme's within their responses. This type of research was crucial to validating the solution I was pursuing, but to informing the features and functionality that would be most useful.
User desires research shedding light on key functionality
I also spent time looking at competitive sites and doing content audits of sites such as justanswer.com and Quora to better understand the gaps in the market and how I could improve on their offerings.
User Personas
In order to further flesh out the necessary functionality and purpose of the app, I created personas of power users inspired by the prospective user interviews. The names and faces served as an extrapolation of the behavior and motivation patterns I picked up on through the research.
In order to further flesh out the necessary functionality and purpose of the app, I created personas of power users inspired by the prospective user interviews. The names and faces served as an extrapolation of the behavior and motivation patterns I picked up on through the research.
These personas were the basis for some user task analysis and gave me insight into the mental journey that users would take alongside the Xpertio app. The next step in the process, User Flows, is necessary to map out the digital journey, ultimately leading to the initial visual designs of the app.
User Flows and Site Map
The User Flow is the first look at the organization of the new app- Below is an example of one of the several flows that I created for each persona. Conceiving a series of screens that the user will navigate is the most effective way to initiate the development because now my design is based on the steps a user will take to enter and successfully solve their problem.
User Flow diagram for user Fiona, a 29 year old mother from Philadelphia.
Once I had mapped out the journey for different users and use cases, I was ready to sketch out the visuals and the first look at how a user would click to navigate through the app. I created a Site Map, showing which screens were necessary and how they would all be accessed based on the most important functionality. While the User Flow demonstrates one user's journey, the Site Map can be used as an initial guide for developers to know what they'll be building from a birds-eye view.
Final prototype version of Xpertio Site Map. The top row shows buttons that would be accessible from home screen or all screens if they appear in the main toolbar. Red color denotes pages that can be accessed from several different subpages.
Card Sorting
As the last bit of generative research, I conducted a card sort using OptimalSort. Often times we can get lost in our own ideas about where certain features reside, so for a true user-centered design it is important to evaluate user expectations and to have an understanding of psychology that is at play. This card sort led to some important updates to the sitemap which I would hand off to developers.
Design, Develop, Evaluate, Repeat
Good design is an iterative process requiring collaboration with end users, and it is best to do it as you build, because that makes it easier to accurately identify which layer of the design is the source of confusion or dissatisfaction.
Wireframes and Lo-Fi Prototype
The first screen visuals for Xpertio were sketched with a pen and paper to get a look at the important features on some of the main pages. These show how I was thinking about the features with color codes that explain each proposed element.
I used these screens to create a low-fidelity prototype which I stitched together to demonstrate navigation from one screen to another. Before now, I had done lots of generative research to discover what I should create, but I hadn't gotten feedback yet on the experience of using my actual product.
Mid-Fidelity Prototype
Creating a mid-fidelity prototype gave me the ability to gather a first round of feedback on the functionality and flow of the app. I used Balsamiq to give some shape to the sketches and to mock up the flow that users would see. I focused heavily on the onboarding process first because, as the first interaction users have, it's important to make sure this is clear. Making sure that users have a good initial understanding is important to the entire experience from that point forward.
Above: Clickable onboarding flow in Balsamiq. Below: Clickable mid-fi prototype screens
After gathering feedback on the onboarding process and incorporating some of this into the design, I put together some of the main screens and demonstrated the flow of screens post-onboarding using my Balsamiq prototype.
High-Fidelity Clickable Prototype
Finally, I converted the prototype into Sketch so I could start learning about the usability of my app as a whole, in an effort to discover where and why users would find encounter friction. I came up with a usability test plan and script. All of my conversations were carefully recorded, summarized and filtered into Affinity Maps, User Story Map and a Rainbow Spreadsheet.
User Story map based on first iteration of user research with the full clickable prototype.
Now that my prototype was in Sketch, I could begin building and iterating on other design ideas such as colors, fonts, buttons, iconography. So I ran preference tests, such as the one shown below for the login page.
Nailing Down Visuals
Usability is not just about utility, but the pleasure and desire a user has to continue use. Certain elements create clarity or ease of use through intuitive design and best practices, while some create emotional affinity through the use of colors, shapes, and rewarding interactions. With Xpertio, I kept principles of design and Gestalt psychology in mind as I worked on visuals.
Branding and Style
My final product includes a design library that includes specifications for primary and secondary colors, typefaces and sizes, and guidelines on imagery. I also created a design language system that explains the "Do's" and "Don'ts" of building for Xpertio to ensure consistency into the future across platforms and devices.
Finished Product
While there are always things to learn and a product can never really be finished, below are a few screens from the most recent update. Please have a look and also feel free to click through the Xpertio app prototype by clicking here!
Summary
Great design requires three main things- knowledge around a problem, creativity to design a viable solution, and an understanding of users, their environments, and their goals. Conducting good research and making sure that users are kept in the forefront of the problem that is being solved is crucial to having a successful product.
I hope you enjoyed learning about my process and I hope you could see these elements of success in the Xpertio project!
