The Mobile Design Process
Photo by @ephemiamaria
Hi! My name is Kristin Ardese and I am a professional Graphic Designer and Marketing Strategist. I hope that by sharing some of my expertise, I can help offer valuable insights and build an engaging community.
Recently, I’ve been working on a mobile application redesign for A Guide to Crystals. During this process, I learned that there are many steps that go into creating a quality design. One might assume from looking at the final product, that a few sketches, and vector images might do the trick. However, the mobile app design process is far more detailed than that. There are many lengthy steps that must be taken before even touching Adobe XD or Figma. I am going to share with you my design process thus far on this Mobile Interaction journey.
Ideation and Research
To begin my research, I downloaded every crystal, meditation, or manifestation app I could find on the Apple app store. I also filed through Google Images and Pinterest to gather a better understanding of what type of design would be successful for this project. Through this research I found a few things. First off, many of the crystal apps were not designed well. They were outdated and held bad UX design. Many of the buttons were either too big or too small, and the typeface selection made for poor readability on a mobile screen. This is something I wanted to fix when diving into my redesign. Another key point that I noticed was how beautifully designed the meditation apps were. These apps were made to uphold a calming and effortless user experience, and that is certainly reflected in the design choices. I knew from my research that I wanted to incorporate aspects of meditation app design into my app.
IA & User Research
Now that I had a vision for what I wanted to produce for this app, it was time to begin constructing the information architecture (IA) and user flow diagrams. My information architecture allowed me to visualize the hierarchy of my app. What information will fall under where? I decided on having 4 tabs in my app: Home, Crystal Gallery, Guided Meditations, and User Profile. After organizing all of my content ideas in this hierarchy, I moved on to creating 5 user flow charts that aligned with 5 user goals. These goals were as follows:
Learn About Crystal Chakra
Add to Crystal Collection
Listen to a Saved Meditation
Listen to a New Meditation
Edit User Profile
The user flow charts and information architecture allowed me to have a well-designed map before continuing onto the next step in the design process. By having this framework, I am able to ensure a smoother and more efficient wireframe and user testing process.
Wireframe & User Testing
The wireframe process was one that I was very eager to start. It was very exciting to finally see my visualization come to life. I sketched all of the required screens that might show up on any given user flow. After bringing in my sketches for peer review, I made necessary edits before bringing them in for user testing. For my user testing, I brought in two users to each complete 3 user goals. I recorded this testing process so that I could look back at what worked and what could use some adjustments. After my user testing, I found that I needed to change a few things:
Label the navigation
Add the “+” button to all crystal pages
Provide clearer labeling on all buttons
The user testing process allowed me to clean up my wireframes before the prototype phase. This also ensured that my app was aligning with the needs of the user.
UI & Prototype
I am currently in the user interface (UI) and prototype phase of the design process. The first part of this phase was creating a brand identity template. This would help determine what the primary, and secondary colors would be, what typefaces would be used, and the style of the buttons and symbols. I spent some more time researching a color palette that I felt best fit my app. I also did a bit more research on typefaces and symbols to ensure that all of my elements aligned with the style I was going for. After my brand identity template was complete, it was time to create my User Interface Kit. This would hold all of my asset designs that would later be used in the final prototype. I spent hours on this phase, individually drawing each button, header, and background that would be seen on this app. Although time consuming, this step was very enjoyable for me, especially to see it all come together.
Final Comments
Now, all that is left is for me to prototype my design! I hope you enjoyed learning about my mobile design process. Although lengthy, each phase is well worth your time to ensure the best design for the user experience.
