Mobile Experience Project
Designing an informational mobile app about my design hero, Lotta Nieminen
Sitemapping
To make a basic map of the different components to my mobile app experience, I sketched out a simple flowchart for different pages and subpages. First would be the homepage, then a menu bar that branches off into sections that resemble the sections of my booklet:
- Early Life
- Style and Aesthetic
- Timeline of Important Accomplishments
- Key Works and Influence
- Why a Design Hero?
- Sources
To go more in depth I wanted the timeline to have clickable parts that would give you more explanation of certain events or works of Lotta’s career.
Some things I brainstormed were having a scroll type effect that extends the timeline and gives a different experience for a user. This would be different compared to booklet that is a 2D experience, and different from a website which lists things or uses a paragraph format. In a mobile version, people are using their fingers and can pinch and zoom, and slide to the left or up and down to see the rest of the timeline.
Wire-Framing
For my next steps, I drew some basic wireframes to map out where each of the content parts would go. Boxes with X’s represent images, and lines would be text. Additionally, I had the idea to turn this experience into having a “shop” style where the bar at the bottom would have icons like a search bar, a products section, and a shopping cart where users would be able to shop some of the products that have Lotta’s illustration or branding as part of the design.
Compiling Texts with Images
Next I used Figma to start sketching the actual wireframes of the mobile experience. I used a basic layout and started compiling different subsections of texts from my essay into the different screens.
As I tried creating the icons and the navigation bar at the bottom, I realized there would be some issues to create a shop part of the app. Incorporating these products Lotta designed for various companies seemed interesting to me, but it was hard to find some of the actual websites and links to where they’re sold, because things were uniquely made individually for clients. Things like scarves or campaign illustrations for limited edition packaged was hard to find links where to purchase. However, I plan to maybe include a section or page that has these products displayed like a gallery or collage to still showcase the range of Lotta’s work.
Testing Opacity, Colors, and Using Text
Additionally, I experimented in Figma with different opacities of rectangles, layering them, and trying out different image placements. For paragraph text, I sometimes had to manually create hard returns to avoid uncomfortable rags on the ends.
Linking Connections
After putting in the content texts and images with captions, I had to figure out the connections between he screens. This took a bit of figuring out Figma, and practice with navigation prototyping.
One lesson I realized, was that I need to remember to link back to where I came from, for example linking all hamburger menus on all the pages to the main homepage. Without doing this, there is no way to go back to where you started, and the prototype share starts all over from the beginning.
Moreover, I thought about how users might want a closer look into certain photographed works, so having pop-ups, or additional section pages that have more perspective photos of certain books and works would be beneficial. I included another page that specifically gave more photos and closeups of Lotta’s illustrated cookbook, so users could see the detail work and the pretend-play interactive components of the book.
Making Landing Animation
To make the homepage, I initially wanted one of the illustrations to horizontally scroll and show parts of a city, but I ended up trying a different pop up method which I liked better. The first tap causes the letters of Lotta’s name to fall in place and the second tap shows her last name. The third tap transitions to the homepage with the hamburger menu opening up to the navigation bar.
Presentation Feedback
After presenting the initial prototype draft to the class, here are some points of feedback:
- large hamburger menu
The scale of different elements are important to consider, and the hamburger menu seems a bit large in comparison to the rest of the parts, and it may make the experience more enhanced if it was less prominent.
- justify type and smaller margins
The margins of the body texts are too large, and on a mobile app it wastes space that can be used to read across. Expanding the text boxes horizontally will help, and be more efficient for taking up space while still having people be able to read quickly.
- fix alignment
The alignment of the different tabs or buttons part of the navigation bar are off, and the type is also too large. The alignment of the timelines branch lines are also not systematic and very random. Adjusting this would make the user feel less thrown off by slight imperfections.
Updates
Going back and fixing some of those critiques, I found that it was especially helpful with the timeline and visually made more sense to have lines be parallel properly to each other. I also fixed some text colors so it isn’t black on black but more dark grey and has a softer feel.
Product Gallery
To still address the initial idea I had with including various products that Lotta designed, I compiled a set of images that I could use. She’s made illustrations for packaging and textiles in particular, and I chose to showcase these in a gallery type collage view as a separate subsection of the navigation menu.
One lesson I learned is the way the pop up image is positioned affects the effort the user has to put in to view the image better. I thought having the pop up right where the original tapped image was located would be fine, but it actually made it inconvenient, because the user needs to scroll down. I changed this to have all the pop ups be as close as possible to the top center and the same position so it is visible when you tap the image in the gallery.
Final Mockups
Walkthrough
Reflection
From this mobile experience project, I thought using Figma was super useful and I’m really glad I got experience using this tool. I figured out different features I didn’t know of before, and it now makes the possibilities for designing digital experiences less intimidating to me. I always admired mobile apps and amazing projects on Pinterest by professional designers, and thought it would be really intensive and complicated to prototype it. But using Figma was really comfortable to me, and I feel like I can now try out so much and next time try something more challenging now that I know the basic elements. Overall I thought this project was fun and satisfying to make what you envision be possible with a few clicks.
