Product Design, User Stories, Requirements Definition, Usability Testing, Workflows, Low and High Fidelity Mockups, Interactive Prototype
As part of the SMU User Experience course, myself and two other classmates were tasked to work on a group project to define, design, and test a new iOS app. My main contributions to the project included the product definition portion and the visual and interaction design for the app. This project was completed within 4 weeks, from start to finish.
My Role
I served as the primary UX Designer, as well as providing Business Analysis/Product Owner expertise in the requirements-gathering phase.
The Challenge
Design a full iOS mobile app within 4 weeks, from product ideation to research and testing to final UI designs.
Product Definition and Research
One of our team members was a photographer, and based on her input we decided that a photography application would be useful.
We talked through some of the challenges she encountered in her work. After conducting several rounds of conversations, we identified three main challenges she, and other photographers she knew, encountered:
“Finding interesting new locations to shoot”
“Discussing new locations with other photographers”
“Finding interesting local events to shoot”
After identifying these broad goal categories, we began conducting research, which included competitive analysis of similar apps in the market, comparing features, conducting heuristic analysis, and testing which interactions and design patterns worked best.
Based on this information, we defined several broad feature categories, which included Location features, Discovery features, and Social features.
We then defined about 40 user stories that specified the desired functionality. After this was completed, I identified the minimum viable product features that would be needed as a baseline. We used Taiga to organize our stories.
Ideation
After defining features, we created a workflow document that visualized intended action journeys for users.
This document helped me specify the flow of features in the application, and provided the launchpad for designing user interactions.
We began iterating through several designs, beginning with a simple wireframe of the main screens. I utilized feedback from users to settle on a design that utilized a more professional look, combined with the use of a limited color palette to provide consistency throughout the app.
High Fidelity Mockups
After deciding on a stylistic direction, I took inspiration from several successful applications, and applied these design patterns to create an intuitive experience, with minimal friction.
…
Login and Registration Sequence
Buttons were placed within the thumb zone, as defined by Steven Hoober. The colors used were variations on the same basic blue color, or the specific social service’s primary colors.
Map Search Tab and Location Details
I utilized a bottom navigation design, to accommodate the 49% of users that navigate mobile devices using only one thumb, per Hoober’s research.
The Location Details screen include allows the user to save, rate and tag the location. It also provides weather and physical accessibility ratings.
Below the fold information is accessed through scrolling, while a slightly translucent bottom navigation bar provides context for the rest of the content.
Favorites and Add New
The Favorites section allows the user to view saved locations, and gives them the ability to sort and filter those locations.
The Add New button gives the user the option to add a new location or a new event. This feature is central to the app’s usefulness, so the user is encouraged to add content by the button’s prominent placement in the nav bar.
Next Steps
I am in the process of finalizing all the high fidelity screens, and creating an interactive prototype using Origami.
Once the prototype is completed, I will conduct more usability testing to validate my design decisions, and find any issues I did not uncover from the first round of testing.