Building an app in a short time-frame can feel like scraping ice off your car with a toothbrush before work. You know that you can get the task done, but you don’t know if you’ll have enough time. At MetroStar Systems, we’ve seen dedicated and experienced teams make the seemingly impossible possible.
In fact, last September, five MetroStar employees (including myself) participated in the National Institute of Standards and Technology (NIST) data challenge. Over the next two weeks, we created and launched a data reference app for chemists, ChemBook.
To tackle this challenge, we followed the steps below:
1. Assemble a flexible team
We assembled a light and agile team. Team members had cross-functional skillsets, which allowed them to play dual roles and distribute the workload throughout the challenge. As examples, our developer also acted as a project lead, and our graphic designer helped me (the UX researcher) with research.
The different players in our team included a:
- Subject matter expert
- UX researcher (me)
- Designer
- Developer
- Video producer (to conceptualize and create a promotional video for our app)
2. Define your objectives
At out kickoff meeting, the team sat down to define what the main goal of our app was going to be. We determined that our biggest objective would be to make the NIST data user-friendly. This meant that we needed to interview actual chemists about their needs; reformat existing data into plain English; design the app to look appealing; and create a good, robust search function.
3. Discover your users
We interviewed chemists to learn more about how they already use NIST data. These interviews helped us figure out what to include in the application. They also connected our team with SMEs who could later provide feedback on our ideas from brainstorming sessions.
4. Brainstorm
Even though we’re hard-core techies, we still brainstorm using sticky notes, a whiteboard, and markers. We gathered as many ideas as possible at the beginning of the session before narrowing down the ideas. From here, we had enough direction to begin wireframing the major features of our application.
For another brainstorming idea, check out our Ignite sessions.
5. Create a mockup
Don’t overlook wireframing! While the general public never sees wireframes, they’re critical for fast and efficient development.
For all wireframing, it’s crucial to maintain a mobile-first mentality (i.e., use big buttons and simple language as much as possible).
Tip: Wireframes should be black and white. It’s overkill to include color at this phase.
Remember, it’s OK to have multiple iterations of wireframes. It’s much easier to change a wireframe than to change a prototype, so soak up as much feedback from your designers and other team members as you can at this point. (It’s super important to keep designers in the loop since they’re heavily involved in the prototyping cycle.)
6. Design a prototype
At this stage, our graphic designer created a prototype. She added color and life to the app. She also worked hand-in-hand with our mobile developer to ensure everything was cohesive.
7. Develop an app
Since we took the time to research and wireframe, the development phase of our app only took two weeks. The designer and developer worked closely together; the designer literally moved into the mobile development room for a week. This allowed them to quickly go back and forth with design and development.
8. Make the video
The video production efforts worked in tandem with all the previous phases.
To accomplish this, the following pre-production materials had to be created:
- Analysis of target audience
- List of all of the application features
- Video script
- Linear storyboard
From there, the entire team collaborated on the video’s graphic design components, which would later be brought to life through the magic of animation.
Our video producer was able to record our fully developed app in action to capture all relevant features. The music, voiceover, graphic design components, application screen recording and animations were all compiled to create an effective marketing video that illustrated the app’s robust functionality in a fun and engaging manner.
9. Deploy!
We launched the video and the app in the app store at the same time. Both were necessary for completing the competition. The video has since served to advertise our app and to demonstrate the value of our product to users.
