This Proof of Technology project was to showcase backend functionality and  in order to demo the backend functionality a mobile app needed to be designed and built for a Car Manufacturer.

This was a very short timeline, I started and completed my work in 3 business days.

Process

Since I had a very short timeline to complete my portion of the work, I started immediately doing a competitive analysis as well as speaking to one of my coworkers who was working on a mobile app for a different car manufacturer to learn any insights he could share about his experience working on a car manufacturer’s mobile app. This these in mind I completed a very thorough competitive analysis understanding not only the features that were similar or different, but also which approaches worked well and which did not.

After the completion of my competitive analysis and gaining a full understanding of the functional requirements needed to be present in the mobile app in order to showcase the backend functionality, I began working on my low fidelity wireframes.

With the short timeline in mind, I actually ended up putting a lot of time, effort and thought, up front, into the interface and visual design as I built out the wireframes. The reasoning behind this was I needed to deliver high fidelity wireframes the following day along with a style guide to help guide the front end dev in his efforts to quickly build out a mobile app to integrate with the backend.

I worked closely with the front end dev, back end dev, and the architecture team members to ensure the wireframes for the mobile app covered the experiences require to show off the backend functionality for the client demo. We did a two rounds of reviews. The first one off my first draft of wires and the second one after my final wires were pretty much done. Luckily, there were only a few very minor tweaks needed after the second review.

Below are the final wires (logo removed and font changed for client confidentiality):

After I completed the wires I worked on completing the basic style guide below (logo removed and font changed for client confidentiality).

Between the final wires and the final mobile app, some adjustments were made to accommodate the changes in functionality. These changes were made directly in the app.

The first change was that in the app for the demo they would use Google authentication. This temporarily replaces the login screen shown in the wires above.

The second change was due to tech feasibility and ultimately a better experience, where if the user is trying to turn on both the engine and the AC at the same time and if one of them fails, it would be hard to determine which one failed if they are being turned on simultaneously. So as a compromise, the engine will fully turn on then right after, the AC will fully turn on.

Below are the final screenshots of the mobile app. Masked the logo used throughout to protect client confidentiality.

• Axure,
• Competitive analysis,
• Mobile app,
• Style guide,
• User experience design,
• User interface design,
• Visual Design,
• Wireframes