Mobile
Since the introduction of the smartphone, the tech industry has changed dramatically. The introduction of mobile apps and the need for responsive design have given designers a new set of UX challenges. I left Google to work at Samsung on mobile application design. I’ve led UX and visual design teams in creating flows, device design libraries, and prototypes. I’ve worked closely with some of the best engineers and product managers to design and build apps for Samsung and startups.
Case Study
Echo Church
Echo.Church needed a new application that attendees could use to connect and sign up for events such as missions and social groups. It is also required to have a newsfeed showing fresh updates and browsing through content such as blogs, social media, and special events. The app they currently had was a hub that deep-linked out to independent browser-based websites. It was also only optimized for iOS. In early 2019 I worked with a volunteer group of professional developers and product managers to redesign the app. The overlying principle was to make the app relevant and valuable enough so that attendees would find value in using it and increase engagement in the church and its resources.
Previous site
The first version of the Echo.Church app wasn’t an app at all because all the links from the homepage were linked out to the browser. Because of this, the navigation flow was confusing, and the visual design was fragmented. It didn’t follow iOS or Android patterns, making it ineligible to download from the Apple App Store and Google Play.
Goal planning
The first thing I set out to do was to meet the stakeholders and product team to define our goals and review metrics. We found the number of downloads was low, and user engagement was virtually non-existent with metric data and a review of Echo.Church’s message and branding, we worked together to redefine clear intentions and increase user engagement.
Base wireframe
I created a simple wireframe to visualize the summary of needs. This step was a useful starting point of discussion as it is easy to scan and explain before going into details. Details emerge from simple presentations frequently, and this feedback is critical to gather before building out a more detailed user journey.
The user journey
A new user journey, derived from the product team and stakeholder feedback, included navigation decision paths. While the simple wireframe illustrated the course from Homescreen to feature-level pages, the user journey dives deeper into integrating feature-level screens and provides a clear representation of their relationships. It also extends the flow into detailed screens.
Visual design directions
After agreeing on the site architecture and journey, I explored the latest visual design trends and available technology. I then created different design directions in Sketch and interactive prototypes in Invision Studio to present navigation and visual affordances to gauge users' usability and reactions.
Interactive prototypes
After choosing a visual design direction, I created an interactive prototype with Invision Studio.
User testing
After creating the prototypes, it was time to get them into the hands of users to test and get feedback. In-phone interactive prototypes are very useful in observing how users interact with different devices based on their experience with various platforms (iOS and Android being the most common). I created prototypes using InVision Studio for both iPhone and Android to gather feedback and data from “real-world” usage. Below is an example of the iOS prototype we tested on an iPhone.
Collaboration
After reviewing the user research results and gathering client feedback, we were ready to develop using the iOS and Android development kits. As the designer, I was in constant contact with a talented team of volunteer iOS and Android developers to help change any issues during implementation. Challenges included platform updates and new device hardware specs (Google had just started testing their “Dark Mode” feature for the upcoming Pixel 4). We used Test Flight and Expo to upload and test devices.
Planning and client meetings
The initial stage in the process involved getting the clients involved. This included the Lead Pastors and Technology Teams at Echo.Church. We presented the issues with the existing app, level of engagement, and download metrics and proposed our solution for the next iteration. Nick Kurat was the lead product manager—setting deadlines, hosting meetings, and managing client relations.
Design and build
I met up with a volunteer team of professional developers to design and build the new site. Most of our meetings were conducted at our temporary office at Panera Bread, outside our full-time job schedules. Phillip Trent worked as the lead engineer on iOS (before starting his current job at Apple), and Dereck Quock led the engineering and development of the Android platforms.
Launching on the App Store & Google Play
After over a year of planning, design iterations, development hurdles, and user testing, we successfully launched the new Echo.Church App on both the App Store for iPhone and Google Play Store for Android devices, where you can download it today. Since launch, the number of downloads has increased, and user feedback has been positive.
