In this case study I will show my process of app creation from beginning to end. This project started as a design challenge for an interview, and upon being hired, I was tasked with forming it into a fully formed app. I will demonstrate the research I conducted, how I applied my findings and worked through the UX and UI layout by prototyping, testing and designing the app interface.
3D Capture App - This is an app that allows business owners to use their mobile devices to capture their products and turn them into 3D assets.
Research & Strategy
IA & Wireframing
Colour & Branding
The tech team at Nextech had developed a technology capable of capturing specific types of objects through a mobile device to produce a 3D asset. It was up to me to design an app that would allow people to do this easily and intuitively. There were and still are lot of technical constraints in this technology because this is still very new.
The main goal was to create a fully branded, thought out app that would easily enable people using their mobile devices to scan and upload a video of a product to the Nextech servers for a high quality 3d model for purchase.
Deliverables & Considerations
1. High Fidelity Design of the consumer facing 3D product Capture App
2. Research and Strategy (market research, information architecture, flows)
3. Creative Interface design of the App
4. Marketing pages, App store content, and companion content management site
5. 4 Versions: Canada, USA, Australia and United Kingdom
6. Responsive Marketing Pages
7. Accessibility must be considered
1 week design challenge
The first step began when I was tasked with a week long design challenge. I was asked to design some wireframes for an app that would allow people to capture items in 3D and save them in a library. Unsure what the technical. constraints were or who the main demographic was, I based the design on my own assumption and proceeded.
I. quickly conducted market research and looked at other apps like Display Land, Scann3D, Apple and Samsung's Bixby for inspiration. I drew up some sketches, and then. quickly designed some wireframes and put a presentation together. This turned out to be the beginning of the the development of ARitize 360.
Apps in market
Upon getting hired, I immediately started redesigning the ARitize360 app. The app lived in the app store but certainly needed a UX/UI touch. I was the first and only UX/UI designer on the Nextech team and I was excited to take on this challenge. Below are the screens I started with. In the rest of the cast study you will see how I turned this into a fully functional app, with accompanying marketing collateral.
The existing app
As you can see this app design has not been fully fleshed out and a lot of considerations are missing including accessibility, a user flow, user feedback and best UX/UIi practices. After exploring the app, and gathering information from the stakeholder about the target demographic and the goals of the app I was able to move forward with an improved focus.
Now that I had a focus. on who the user was, and understood the business needs I began looking for UI inspiration. I needed to create a visually appealing app, that functioned in a very simple and way but appealed to a specific user group. Because this app was aimed at business owners and it was in the high-tech, I wanted to try to design an app that would cater to that. Below are some of the images I used as Inspiration.
From here I started experimenting and elevating the flow that i had created. II started to experiment with colours and feels for the log in screen. This would dictate what the rest of the app would look and feel like.
Final Client Review
After addressing the client asks from the first round of reviews and building the desktop version of the SureCrisp marketing page, I prepared for the next round of client reviews. During the review I walked the clients through the new designs and spoke to why I made specific choices. Upon completion of the final review the clients had a few more requests which were simple to implicate. They decided to remove the operator page, so the operator button needed to be removed, and they requested the call to action button be higher up on the page. Overall they were happy with the look and feel of both the desktop and mobile version. Take a look below to see the final responsive designs. See below for the final mobile and desktop iterations.
Thank you for reading about how I created the SureCrisp marketing page campaign for McCain's. I hope you enjoyed the read and learning about my process in building this responsive web and mobile design. Now try not to indulge too heavily with those french fries!