Qutee
client. Qutee
tools. Sketch, Illustrator, Photoshop, and Hotjar
type. iOS App
With Qutee's mobile app, users can go beyond the surface level of online discussions and extract valuable insights about trending topics, YouTube channels, video games, and more. Qutee is their one-stop shop for analyzing public opinion with an array of powerful features designed specifically for the iOS platform.
OVERVIEW
Once the website experiences were established, the stakeholders decided it was time to design an iOS app. Making sure the app was suited for the user base depended upon the following factors: available budget, intended purpose, and required features.
The inherent advantage of having an app alongside a mobile site was to encourage regular usage among users. For Qutee's audience, this was achieved by designing an interface that is similar to a gaming experience.
CONTENT INVENTORY AND SITE MAP
Tools: Google Docs, Illustrator and Mockflow
Process: The first stage of designing an app starts with creating a content inventory that's based on helping users' achieve their goals. I began by listing the project's components in a Google Doc.
This inventory includes various elements, such as required screens, modals, and assets. It identifies which structural components are needed to plan the app's architecture.
Once the list is complete, I convert it into a clear and concise sitemap, using Adobe Illustrator and MockFlow. Laying out the content in this manner makes it easier to understand the app's overall navigation.
WIREFRAME SKETCHES
Tools: Pencil, Paper, and a Ruler
Process: Here's where I roll up my sleeves to define each screen's UI and functionality. A total of about 75+ screens were drawn to make sure each user scenario was covered. Sketching the screens by hand allows me to make simple edits and quickly iterate on the concepts.
User Flow: Initial on-boarding screens
LOW FIDELITY PROTOTYPE
Tools: Mockflow, Adobe XD, and Invision
Process: The next step was to convert the sketches into a clickable prototype. During this phase, I start by designing low fidelity wireframes with MockFlow or Adobe XD, then export them to Invision.
Once the wireframes are complete, I use Invision to link the static screens into an interactive prototype.
USABILITY TESTING
Tools: Screenflow, a desktop or laptop, mobile phone, and a GoPro w/ a tripod
Process: Next, we proceeded to test the apps internally, among our QA team. During usability testing, I kept track of user navigation, navigational and presentation errors, control usage problems, and scenario completion.
For this section, I was required by the stakeholders to keep our testing information confidential. However, the following link contains the template used during our testing phase.
HIGH FIDELITY MOCKUPS
Tools: Adobe XD, Sketch, Illustrator, and Photoshop
Process: Initial testing uncovered several pain points within our user flows. So we reiterated upon the designs until users were able to complete their goals without any obstacles.
Once the prototypes were error-free, I began designing High Fidelity mockups using Adobe XD. While working in XD, I switch between Illustrator for SVG assets and Photoshop for image editing (banners, etc.) Then annotations are added to the mockups to convey a sense of functionality.
HIGH FIDELITY PROTOTYPE
Tools: Adobe XD and Invision
Process: After the stakeholders approved of the design aesthetics, I linked together the high fidelity screens into a final prototype.
The following prototype was tested in front of several influencers to evaluate the Qutee page's overall user flow. It showcases how users can access the comment filters, intent polling, and converse with one another using the expandable comment system.
FINAL THOUGHTS
While designing the app we didn't try and reinvent the wheel. We stayed true to our brand and used the same colors and iconography from the website. By keeping the color palette simple and using grey hues to create an illusion of depth, we were able to achieve an interface that resembles a gaming UI.
Taking a minimalistic approach demonstrated confidence in the strength of the brand and product. We might have obsessed over the minor details, but doing so made it possible to create an immersive, unobtrusive UI with a seamless experience.