Want to make interactive content? It’s easy in Genially!

Over 30 million people build interactive content in Genially.

Check out what others have designed:

Transcript

Preparation Task (20 minutes)

Research Task (30 minutes)

Analysis Task (20 minutes)

Create Task (40 minutes)

Hear from a professional in this role to see how they might approach this task.The following pages are a detailed model answer for the work simulation on how to effectively create a digital mockup that visually communicates a product or service idea. This experience will strengthen your skills in design, planning, execution, and evaluation within a limited timeframe.

Document and Present (10 minutes)

Reflection Task (10 minutes)

Model Answer

Simulation

PREPERAtion task

Chosen Product/Service

Goal

A mobile fitness application.

I began by sketching a few wireframe ideas to create a basic visual representation of the app's key screens: the home screen, workout tracking screen, and progress dashboard. The home screen should feature a clean and minimalistic layout with quick access to workouts, a progress tracker, and user statistics. For the workout tracking screen, I envisioned large, easy-to-tap buttons, bold typography for workout names, and a visual timer. The progress dashboard will incorporate clear, interactive graphs showing users' progress over time.

Redesign the user interface (UI) of a fitness app to enhance the user experience, particularly focusing on ease of navigation, visual appeal, and motivational design elements that encourage daily use.

Sketch

Simulation

PREPERAtion task

Wireframes

Simulation

PREPERAtion task

Prototypes

Simulation

research task

I conducted online research by examining successful fitness apps, such as Nike Training Club and MyFitnessPal, for design inspiration. Key observations included:

  • Colour: Nike uses bold, energising colours like orange and black, while MyFitnessPal opts for softer, calming blues and greens. Both apps balance vibrant colours with plenty of white space to avoid overwhelming users.
  • Typography: Large, bold fonts were commonly used to emphasise important information, such as workout names and statistics, making it easier for users to navigate quickly.
  • Iconography: Very clear and minimalistic designs were used, to enable very clear and easy navigation throughout the app.

Graphic elements

The user experience was simple and intuitive, with one-touch access to key features. The designs emphasised clean lines, minimalistic icons, and a focus on the user’s goals.

Layout

Both apps integrated motivational messages, personalised fitness goals, and progress updates to keep users engaged and returning daily.

Motivational elements

I took note of these design elements, which I could draw inspiration from to enhance the motivational aspect of my own fitness app redesign.

Simulation

Analysis Task

  • I opted for a vibrant, energetic colour palette similar to Nike Training Club, choosing shades of orange, red, and black. These colours evoke energy and motivation, aligning with the fitness theme.
  • I planned to use bold, sans-serif fonts to make navigation and key information easy to read and engage with, even during a workout.

  • I ensured that my design allowed users to quickly start workouts or view progress without being overwhelmed by too much information on one screen.
  • I critically analysed how workout tracking and progress dashboards were laid out in other apps. I realised that clear call-to-action buttons, motivational messages, and the ability to customise workout plans were critical in improving user retention.

Aesthetic Considerations:

Functionality:

  • The main interaction points were designed to be intuitive: tapping a workout to start, swiping left or right to change workout categories, and using interactive graphs to explore the user’s progress.
  • I kept in mind that the app would be used while users are active, so it was important to have large buttons and clear visual feedback when selections were made.

User Interaction:

Simulation

Create Task

Home screen

Interactive graphs showing calories burned and workout frequency. I used contrasting colours (red for completed workouts and blue for goals) to make it easy for users to visually track their progress.

A large banner at the top with personalised greetings, followed by easily accessible buttons for "Workouts," "My Progress," and "Daily Goals." I used bright orange accents to highlight these key buttons against a clean, white background, ensuring high contrast for easy navigation.

Large, easy-to-tap buttons for starting, pausing or ending workouts, and a prominent progress bar with a countdown timer. I incorporated motivational phrases like “Keep pushing!” to inspire users during their workout.

Using Figma, I created a detailed mockup of the redesigned app. Key features included:

Workout tracking screen

Home screen

I ensured that every screen was visually engaging yet functional, with the goal of motivating users to stick to their fitness regimen while providing a seamless user experience.

Simulation

Document and Present

  • The use of vibrant orange and red was chosen to energise the user, while white space provided balance and clarity.

  • I selected bold, sans-serif fonts for clarity, particularly for key actions and workout titles.

Colour Palette:

Typography:

  • The app’s layout was designed to minimise distractions and provide quick access to essential features, which enhances user experience during high-energy activities like workouts.

Layout:

Design Decisions:

Simulation

Reflection Task

What I Learned:

Application to Future Projects:

Challenges:

Reflect on the Process:

Next time, I would conduct user testing earlier in the process to gather more insights on how the app's design works in real-life situations. This would help refine the functionality before finalising the design.

I learned that creating effective digital mockups requires a deep understanding of both aesthetic and functional elements. Balancing visual appeal with usability was crucial. The research phase also reinforced the importance of understanding user behaviour and how design can enhance user motivation.

Through creating this mockup, I gained skills in wireframing, researching industry trends, and refining user experience. These skills can be applied to a wide range of digital design projects. The ability to incorporate user-centric design elements will be especially useful in future UI/UX design roles.

The most challenging aspect was ensuring that the design was both visually engaging and easy to use. The small screen space available in a mobile app meant that every element needed to serve a clear purpose without cluttering the design. I overcame this by prioritising simplicity and ensuring that all essential actions were easily accessible.

What I Would Do Differently:

Simulation

Expected outcome

By completing this activity, I gained hands-on experience in designing and refining a digital mockup. This process strengthened my skills in visual communication, user-centred design, and the ability to combine aesthetic appeal with functional effectiveness. The reflection on the challenges and adjustments made during the process highlighted the importance of continuous iteration in digital design.

Expected Outcome